Nous allons maintenant modifier le squelette pour l’adapter à nos besoins.
Avant tout, n’oubliez de sauvegarder régulièrement vos modifications pour pouvoir revenir en arrière si besoin.
Nous allons reprendre le squelette pour le transformer en portail. Actuellement on a une présentation de type Blog : les articles sont listés les uns après les autres.
Sur les sites portails, on a souvent les grandes catégories auxquels on peut accéder directement.
Nous allons donc ajouter sous l’entête, une barre de navigation horizontale qui reprend les rubriques principales du site.
La première étape est d’analyser le squelette pour savoir où nous allons ajouter le code HTML de cette barre de navigation. Cette barre doit être présente sur toutes les pages sur site et donc sur le squelette de toutes les pages : article.html, rubrique.html, recherche.html ….
D’après notre analyse de la feuille de style, l’endroit le plus logique pour placer ce menu est sous le bloc #entete.
Nous allons donc créer un nouveau bloc #menu.
Si on analyse la page article.html, on remarque que l’on ajoute le bloc #entete est ajouté avec l’instruction SPIP INCLURE qui permet d’inclure des bouts de squelettes.
[(#REM) Entete de la page + titre du site ]
<INCLURE{fond=inc/inc-entete}{lang=#ENV{lang}}>Nous avons donc le choix ici pour ajouter notre nouveau bloc #menu :
soit on ajoute le code HTML du menu dans le fichier inc/inc-entete.html
soit on crée un nouveau fichier pour placer le code HTML du menu.
On préfére la deuxième solution plus modulaire, on créé donc un fichier inc/inc-menu.html avec le code HTML du menu.
Pour l’instant le code est dit statique c’est à dire que on place à le code à la main (il faudra ensuite que SPIP le calcule automatiquement)
Fichier inc/inc-entete.html
<div id="menu">
<ul>
<li><a href="rubrique1.html">Actualités</a></li>
<li><a href="rubrique3.html">Blog</a></li>
<li><a href="rubrique26.html">FAQ</a></li>
<li><a href="rubrique12.html">Divers</a></li>
</ul>
</div>
Remarque :
Comme il s’agit d’un bout de code placé à l’intérieur d’une page, nous n’avons pas besoin de tags habituels <html><body> ....
Pour le menu, nous avons choisi les tags <ul><li> car du point de vue sémantique, il s’agit d’une liste de liens
Nous faut maintenant inclure ce bout de code dans toutes les pages du squelette.
Par exemple dans article.html
[(#REM) Entete de la page + titre du site ]
<INCLURE{fond=inc/inc-entete}{lang=#ENV{lang}}>
[(#REM) barre menu horizontal ]
<INCLURE{fond=inc/inc-menu}>
(Repéter cette opération sur rubrique.html, recherche.html, sommaire.html … )
Dans l’espace public du site, nous allons recalculer la page pour voir le résultat :
C’est bon, la liste apparait ! Il faut maintenant l’habiller …
Comme nous avons un nouveau bloc, rien de plus de facile de l’habiller
Nous allons ajouter sur habillage.css
/* Habillage du bloc menu (barre de manigation horizontale)
/* ------------------------------------------ */
#menu { margin:0 12px;}
#menu ul {margin: 0; padding: 0; list-style: none; }
#menu ul li { display:inline;}
#menu ul li a {display:block;float:right; background: #666; color:#fff; text-decoration:none; font-size:0.9em; padding:4px 12px;border:1px solid #efefef;border-top:0 solid #333;}
#menu ul li a:hover {background: #333; border:1px solid #fff;border-top:0 solid #333;}
Et voilà le résultat :
Remarque : comme nous avons utilisé un float:right, il faudra lister les liens à l’envers ….
Notre menu marche maintenant très bien. Le problème est que si nos administrateurs ajoutent une nouvelle rubrique à la racine du site, notre menu ne se mettra pas jour. Nous avons besoin d’un menu dynamique. Nous allons le programmer grâce aux boucles SPIP
On regarde alors la documentation, on veut lister une série de rubriques, on va utiliser la boucle RUBRIQUES dont la syntaxe est
<B_menu>
code optionnel avant
<BOUCLE_menu(RUBRIQUES){racine}{par titre}>
code principal
</BOUCLE_menu>
code optionnel après
</B_menu>Nous avons utilisé deux critères :
racine pour lister uniquement les rubriques à la racine du site
par titre critère de tri pour lister les rubriques par ordre alphabétique
Le code est donc :
Fichier inc/inc-entete.html
<B_menu>
<div id="menu">
<ul>
<BOUCLE_menu(RUBRIQUES){racine}{par titre}{inverse}>
<li><a href="#URL_RUBRIQUE">#TITRE</a></li>
</BOUCLE_menu>
</ul>
</div>
</B_menu>Ce qui donne, lorsqu’on recalcule une page du site :
Youpi ! On obtient le résultat escompté quelque soit le nombre de rubriques à la racine du site.
Il s’agit d’un exemple pédagogique. On peut bien sur compléter et affiner ce menu :
Mettre en valeur la rubrique courante
Utiliser un autre ordre de tri
Lister les sous-rubriques ….
Nous vous rappellons la méthode :
Nous vous conseillons d’effectuer ce tutorial étape par étape "à la main"
Pour les plus paresseux voici les fichiers du corrigé
Mis en ligne le jeudi 23 août 2007
fiche pro2spip
contributions spip contrib
sites favoris (del.icio.us)
- Des squelettes Lebanon 2007 pour votre site Spip
- Lebanon 2007 : Modifier l’aspect graphique (programmation CSS)
- Personnaliser le squelette socanco
- Apprendre à rendre son site conforme aux normes w3c
- Comment analyser une page HTML et sa feuille de style CSS ?
Generationcyb.net est motoris´ par Spip 1.9.2e
associ´ a un squelette graphique Rizom
