Wikini

MenuNavigationWikini

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-54-82-82-201.compute-1.amazonaws.com

MenuNavigationWikini


Le site source : http://contrib.africacomputing.org/wakka.php?wiki=MenuNavigationWikini ne marchant plus,


J'ai retrouvé la source dans les cacheGoogle...

Un peu galère, en bref ...

En plus, cette source ne marchait pas très bien avec avec WikiNi 0.4.3

J'ai donc fait 2 modifs pour que ca marche dans le header.php ...
C'est ptet pas très propre comme modif, mais ca a la mérite de marcher ;-)


Objectif

Un site s'appuyant sur un Wiki est une solution idéale pour permettre aux lecteurs de se transformer en contributeurs : il est facile de publier une nouvelle page et toute modification est immédiate. Avec l'accroissement du nombre de page d'un site Wikini, la navigation à travers les pages devient fastidieuse : il faut sans cesse revenir à la page principale du site pour parcourir une nouvelle partie de l'arborescence. Or, la plupart du temps, on pourrait imaginer une décomposition du site en rubriques principales et on aimerait pouvoir passer d'une rubrique à une autre sans avoir sans cesse à revenir à la page d'accueil.
Partant de ce constat, cette contribution consiste tout simplement à ajouter un menu de navigation à gauche du contenu. Et plutôt que de coder en dur dans la page le menu de navigation, l'idée consiste tout simplement à stocker dans une page Wikini le menu de navigation ; ce qui permettra de modifier très simplement le contenu du menu de navigation. En final, la navigation a travers le site se trouvera grandement facilitée en permettant une navigation transversale entre rubriques sans avoir à revenir à la page principale.

Implémentation

L'implémentation du menu est extrèmement simple. Elle consiste à :


Ajouter dans action/header.php une section permettant de décomposer la page en 2 colonnes (ou 2 divisions CSS) et d'afficher dans la colonne de gauche le contenu de la page spécifiée par $wakkaConfig['menu_page'];


Ajouter dans action/footer.php le code HTML permettant de refermer le tableau;


Définir la valeur de $wakkaConfig['menu_page'] dans le fichier wakka.config.php


Définir les styles CSS pour la mise en forme du tableau englobant chaque page, la colonne de gauche et la colonne de droite

Les plus pressés peuvent télécharger le fichier zippé contenant les fichiers modifiés. Il ne restera alors plus qu'à spécifier la variable $wakkaConfig['menu_page'] dans wakka.config.php


Modification de action/header.php :

Placez juste avant la ligne <h1 class="wiki_name">, le code ci-après :

<?
$wikimenu_page
=$this->config["menu_page"];
if (isset(
$wikimenu_page) and ($wikimenu_page!=""))
    {
    
// modif 1 pour sauver l'objet $this ...
    
$wikiBody=$this;
    
$pagebody=$wikiBody->tag;
    
// fin modif 1
    
    // Ajout Menu de Navigation
    
echo '<table class="page_table">';
    echo 
'<tr><td class="menu_column">';
    
$wikiMenu $this;
    
$wikiMenu->tag=$wikimenu_page;
    
$wikiMenu->SetPage($wikiMenu->LoadPage($wikiMenu->tag));
    echo 
$wikiMenu->Format($wikiMenu->page["body"], "wakka");
    echo 
'</td>';
    echo 
'<td class="body_column">';
    
    
// modif 2 restitution de l'objet $this ...
    
$wikiBody->tag=$pagebody;
    
$wikiBody->SetPage($wikiMenu->LoadPage($wikiMenu->tag));
     
// fin modif 2
    
}
?>


Je propose plutôt à la place de ce qui précède le code qui suit, beaucoup plus propre (évite de triturer $this):
<?php
$wikimenu_page
=$this->GetConfigValue('menu_page');
if (!empty(
$wikimenu_page))
{
    
// Ajout Menu de Navigation
    
echo '<table class="page_table">';
    echo 
'<tr><td class="menu_column">';
    echo 
$this->Action('include page="' $wikimenu_page '"');
    echo 
'</td>';
    echo 
'<td class="body_column">';
}

Il serait également une bonne idée de remplacer les <table> etc. par des <div> mais je laisse tel quel afin de ne pas avoir à modifier toute la page.
NB.: Dans la version actuelle de WikiNi (< 0.5.0), lors de l'édition de la page menu_page, une erreur s'affichera probablement à la place du menu (ceci n'étant qu'un faible mal, qui sera corrigé dans la version 0.5.0). Ce bug est connu de par le fait qu'il est également possible d'utiliser une inclusion à la place des navigation_links. (il y a des pages qui en parlent...) -- LordFarquaad

Voici une alternative avec des <div> pour manipuler plus facilement les CSS :
<?php
$wikimenu_page
=$this->GetConfigValue('menu_page');
if (!empty(
$wikimenu_page))
{
    
// Ajout Menu de Navigation
    
echo '<div class="page_table">';
    echo 
'<div class="menu_column">';
    echo 
$this->Action('include page="' $wikimenu_page '"');
    echo 
'</div>';
    echo 
'<div class="body_column">';
}
?>



Modification de action/footer.php :

Placez juste avant la ligne </body> (avant dernière ligne du fichier), le code ci-après :
<? 
$wikimenu_page
=$this->config["menu_page"];
if (isset(
$wikimenu_page) and ($wikimenu_page!="")) echo '</td></tr></table>'
?>

Idem avec DIV pour CSS :
<?php
$wikimenu_page
=$this->config["menu_page"];
if (isset(
$wikimenu_page) and ($wikimenu_page!="")) echo '</div></div>'
?>


Ajout d'une variable dans wakka.config.php :

$wakkaConfig['menu_page'] = 'PageMenu';

Ajoutez la ligne ci-dessus en spéciant le nom de la page Wikini correspondant au menu de navigation (ici PageMenu).

Ajout de styles (fichiers .css) :

.page_table {margin: 0px; padding: 0px ; border: none; height: 100%;width: 100%;}
.menu_column {background-color: #FFFFCC; vertical-align: top; width: 150px; border: 1px solid #000000;padding:5px;}
.body_column {vertical-align: top; border: none;padding:5px;}

Les mêmes styles avec des DIV :

.page_table {margin:.5% 0 0; padding: 0 ; border: none; width: 100%;}
.menu_column {float:left; background: #f8f8f8; width: 19%; border: 1px solid #ccc; padding:5px;}
.body_column {margin-left:21%; border: none; padding:0;}


Utilisation

L'utilisation est très simple : tant que la variable $wakkaConfig['menu_page'] n'existe pas où n'est pas définie, rien ne se passe. Une fois que vous avez spécifié la page associée à cette variable, le menu s'affiche dans la colonne de gauche. Pour accéder à la page menu en vue de la modifier, il faut soit faire un lien sur PageMenu depuis une page quelconque, soit la chercher directement en spécifiant wakka.php?wiki=PageMenu dans votre navigateur.

La couleur du fond du menu, sa largeur et plus généralement l'ensemble de ses propriétés sont modifiables via le style menu_column ajouté dans la feuille de styles CSS.

Perspectives

Avec un peu d'imagination, vous pouvez adapter l'apparence du menu à vos envies et intégrer l'ensemble dans une interface graphique. Par exemple, sur cette page Wikini que vous consultez :


un include("header-graphique.php") a été ajouté AVANT le bout de code à ajouter dans header.php


un include("footer-graphique.php") a été ajouté APRES le bout de code à ajouter dans footer.php


pour le menu de gauche, le style menu_column ne comporte pas de couleur de fond, ni de bordure ; chaque sous-partie étant constituée d'un tableau saisi en suivant les règles de formatage de la contribution Tableaux Wikini et en spécifiant le style utilisé (et défini dans la feuille de style).

Ainsi on obtient un résultat où Wikini est parfaitement intégré dans la charte graphique du site et la modification du menu de navigation s'effectue très simplement par tout le monde ou simplement une ou plusieurs personnes autorisées.


Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]