BioSPIP et BioSquelettes v. 4.0

suite du tutoriel

Créer ses propres squelettes : II

mise en place d’un menu différent

Le choix de l’affichage du menu est quelque chose d’important pour faciliter l’accès au contenu de votre site par les visiteurs.

Cet article fait suite à : Créer ses propres squelettes que nous vous conseillons de lire avant celui-ci.

À la fin du tutoriel précédent, nous en étions à ce type d’affichage :

Nous souhaitons maintenant modifier le menu de gauche pour un affichage correspondant plus à nos attentes.

Choix de l’organisation du menu

Dans notre cas particulier, nous souhaitons un menu affichant les rubriques et leurs premières sous-rubriques ainsi que les articles de chacune de ces rubriques.

Cela donnerait une organisation de la sorte :

• rubrique1
  • sous-rubrique1.1
    • article1
    • article2
    • article3
  • sous-rubrique1.2
    • article4
    • article5
• rubrique2
  • article6
  • article7
• rubrique3
  • article8
  • article9
  • article10

La boucle SPIP pour l’affichage d’une telle boucle serait la suivante :

Il s’agit ici de boucles SPIP tout ce qu’il y a de plus classique ? Je conseille à tous les lecteurs d’approfondir la connaissance des boucles RUBRIQUES et ARTICLES auprès de la documentation officielle de SPIP.

Nous pouvons ajouter de petits commentaires concernant le code ci-dessus :

  la BOUCLE_Rubriques affiche toutes les rubriques placées à la racine du site (racine) et les classe d’après le numéro de leur titre (par num titre) ;
  la fonctionnalité par num titre est très pratique et s’utilise avec le filtre |supprimer_numero décrit dans la documentation sur les filtres dont voici l’extrait correspondant :

supprimer_numero sert à éliminer le numéro d’un titre, si par exemple on veut faire des tris d’articles {par num titre} mais ne pas afficher les numéros (car ils ne servent qu’à ordonner les articles). Le format des préfixes numerotés est « XX. titre », XX étant un nombre à n chiffres (illimité).

  nous utilisons également la balise #EXPOSE qui permet de mettre en relief la rubrique ou l’article sur lequel on se trouve.

  la BOUCLE_ssRub affiche toutes les sous-rubriques contenues dans la Rubrique de la BOUCLE_Rubriques ;
  la BOUCLE_ArtssRub affiche tous les articles contenus dans la Rubrique de la BOUCLE_ssRub ;
  la BOUCLE_ArtRub affiche tous les articles contenus dans la Rubrique de la BOUCLE_Rubriques.

  tous ces affichages sont contenus dans des listes imbriquées (ul/li) classiques (voir à ce sujet une doc concernant le langage XHTML ou HTML.

Création d’un fichier affichant le menu du site

Nous créons un nouveau fichier /squelettes/menu.html dans lequel nous plaçons notre script de menu ci-dessus.

Nous plaçons ce script dans un container div dénommé "nav" qui est un raccourci signifiant "navigation" dans notre esprit vif et efficace !

Nous ajoutons également la balise de formulaire de recherche SPIP qui a bien sa place en bas de notre menu : [(#FORMULAIRE_RECHERCHE)] (ce formulaire de recherche ne s’affiche QUE si ce dernier a été activé dans l’espace privé de SPIP).

Voici donc le contenu final de notre page /squelettes/{{menu.html }} :

<div id="nav">
<B_Rubriques>
        <ul>
        <li class="plan-site">
        [<a href="(#URL_SITE_SPIP)" title="<:accueil_site:>"><b>#NOM_SITE_SPIP</b></a>]
        </li>
                <BOUCLE_Rubriques(RUBRIQUES){racine}{par num titre}>
                <li class="plan-rubrique">

               
                        <a href="[(#URL_RUBRIQUE)]" class="[(#EXPOSE{current,off_current})]">[(#TITRE|supprimer_numero)]</a>
               
               
               
                <B_ssRub>
                <ul>
                <BOUCLE_ssRub(RUBRIQUES){id_parent}{par num titre}>
                                <li class="plan-rubrique">
                        <a href="[(#URL_RUBRIQUE)]" class="[(#EXPOSE{current,off_current})]">[(#TITRE|supprimer_numero)]</a>
               
                <B_ArtssRub>
                <ul>
                <BOUCLE_ArtssRub(ARTICLES){id_rubrique}{par num titre}>
                                <li class="plan-article">
                        <a href="[(#URL_ARTICLE)]" class="[(#EXPOSE{current,off_current})]">[(#TITRE|supprimer_numero)]</a>
                </li>
                </BOUCLE_ArtssRub>
</li>
                </ul>
                </B_ArtssRub>
                </BOUCLE_ssRub>
               
                </ul>
                </B_ssRub>
               
               
                <B_ArtRub>
                <ul>
                <BOUCLE_ArtRub(ARTICLES){id_rubrique}{par num titre}>
                                <li class="plan-article">
                        <a href="[(#URL_ARTICLE)]" class="[(#EXPOSE{current,off_current})]">[(#TITRE|supprimer_numero)]</a>
                </li>
                </BOUCLE_ArtRub>

                </ul>
                </B_ArtRub>
               
       
                </li>
               
                </BOUCLE_Rubriques>
        </ul>
        </B_Rubriques>
[(#FORMULAIRE_RECHERCHE)]
</div>

Utilisation des fichiers inclus de SPIP

Nous utilisons ici la fonctionalité <INCLURE> de SPIP.

Maintenant, il nous faut appeler ce menu dans les fichiers de squelette de SPIP.
  Prenons le fichier /squelettes/sommaire.html à la ligne 25 (environ) :

  et ajoutons juste après la ligne suivante :

avec SPIP 1.9 on écrira préférentiellement :

<!-- Menu de navigation general -->
<INCLURE(spip.php){page=menu}>

  cela nous donnera l’affichage suivant (ne pas oublier de recalculer la page grâce au bouton tout en haut à droite ou dans la partie administration de l’espace privé de SPIP) :

Design du nouveau menu du site

La capture d’écran précédente nous montre que nos boucles fonctionnent bien mais l’affichage est très laid. Il nous faut corriger cela, grâce aux... CSS bien entendu.

Nous ouvrons donc le fichier /squelettes/habillage.css et nous y ajoutons le code suivant tout à la fin :

/* Style du menu de la page menu.html */

div#nav {
border: 2px solid #000000;
background: #dddddd url(bandeau_menu.jpg) top right;
margin:0px;
padding:5px;
}

li a.current {
background: #ffffff;
font: #000000;
}

#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}

#nav ul li ul, #nav ul li ul li ul {
padding-left: 15px;
}

  nous choisissons un fond composé d’une image pâlie avec The Gimp afin de bien lire les titre des rubriques et articles ;

  nous ajoutons une bordure ;
  nous réglons l’affichage des listes (sans puce, avec des retraits par rapport à la marge de gauche plus court que les retraits par défaut...) ;

Cela donne le résultat suivant :

Amélioration de l’affichage des items de liste

Nous allons ajouter des images en tant que puces aux différents items de liste. Nous choisissons des icones extraits de la base d’icone de Jimmac, le fameux designer de Gnome (entre autre).

Nous plaçons ces petites images dans le répertoire /squelettes/ puis ajoutons les quelques lignes suivantes tout en bas de notre fichier /squelettes/habillage.css :

/* puces et styles particuliers suivants les types de fichiers */
li.plan-article
{display: list-item ;
list-style-image: url("stock_new-16.png");
list-style-position: inside;
font: italic normal normal small normal sans-serif;}

li.plan-rubrique
{display: list-item ;
list-style-image: url("sc_dbqueryopen.png");
list-style-position: inside;}

li.plan-breve
{display: list-item ;
list-style-image: url("stock_paste-16.png");
list-style-position: inside;}

li.plan-site
{display: list-item ;
list-style-image: url("stock_insert_url-16.png");
list-style-position: inside;}       

En rechargeant la page de notre site nous avons maintenant le résultat suivant :

Quelques correctifs pour finaliser notre design de site

Nous constatons que certains styles de la feuille de style par défaut s’affichent (titres des rubriques en vert ce qui fait que nous perdons la transparence et ne voyons plus l’image de fond). C’est tout simplement dû au fait que nous avons malencontreusement utilisé les mêmes dénomination pour les styles des rubriques de notre nouveau menu que des styles déjà existants (en l’occurence .plan-rubrique).

Nous allons donc tenter de pallier au problème en recherchant où se trouve les références à .plan-rubrique et corriger cela.

Les références à cette classe se trouvent de la ligne 194 à 246 (approximativement) :

Ces lignes de la page /squelettes/habillage.css correspondent au design d’affichage des rubriques et articles dans la page de squelette particulière affichant le plan du site.

Nous n’utilisons pas la page de plan du site pour le moment, nous allons donc commenter toutes ces lignes pour que le navigateur internet les ignore :

Le résultat est maintenant exactement conforme à ce que l’on cherchait à obtenir :

Suppression de l’ancien menu

L’ancien menu n’a pas été supprimé et il s’affiche toujours en dessous de notre nouveau menu. Il convient donc de supprimer son affichage.

Rouvrons donc notre fichier sommaire.html pour commenter tout le passage suivant :

Dans SPIP 1.9, le menu est déjà en fichier inclu, vous le trouverez dans /dist/inc_rubrique.html.

<div id="navigation">

<h1 class="structure"><:navigation:></h1>

<!-- Menu de navigation general -->
<INCLURE(spip.php){page=menu}>

<!--
<div class="menu">
<ul class="general">
        <li class="menu-titre">
        [<a href="(#URL_SITE_SPIP)" title="<:accueil_site:>"><b>#NOM_SITE_SPIP</b></a>]
        </li>
        <li class="menu-item">
        <a href="plan.php3"><:plan_site:></a>
        </li>
        <li class="menu-item">
        <a href="resume.php3" title="<:articles_populaires:>"><:en_resume:></a>
        </li>
        <li class="menu-item">
        <a href="ecrire/"><:espace_prive:></a>
        </li>
</ul>
</div>
-->
<!-- Formulaire de recherche -->
<!--
[(#FORMULAIRE_RECHERCHE)]
-->
<!-- Menu de navigation rubriques -->
<!--
<B_rubriques>
<div class="menu">
<ul class="rubriques">
<BOUCLE_rubriques(RUBRIQUES) {racine} {par titre}>
<li>
<div class="menu-titre"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>#TITRE</a></div>
<B_sous_rubriques>
        <ul class="menu-liste">
<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
        <li class="menu-item"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>#TITRE</a></li>
</BOUCLE_sous_rubriques>
        </ul>
</B_sous_rubriques>
</li>
</BOUCLE_rubriques>
</ul>
</div>
</B_rubriques>
-->
<!-- Logo SPIP -->

<a href="http://www.spip.net"><img src="IMG/logo_spip.jpg" width="105" height="92" class="spip_logos" alt="<:site_realise_avec_spip:>" /></a>

</div>

ATTENTION : le commentaire en XHTML est <!-- et --> contrairement au commentaire de CSS qui est /* et */.

La mise en commentaire équivaut à supprimer l’ancien menu et revient à écrire à la place le code suivant :

<div id="navigation">

<h1 class="structure"><:navigation:></h1>

<!-- Menu de navigation general -->
<INCLURE(page.php3){fond=menu}>

<!-- Logo SPIP -->
<a href="http://www.spip.net"><img src="IMG/logo_spip.jpg" width="105" height="92" class="spip_logos" alt="<:site_realise_avec_spip:>" /></a>

</div>

L’utilisation de commentaires n’est donc utile que dans les étapes des tatonnement. Après il convient de supprimer ces passages inutiles afin d’alléger le code et faciliter sa lecture.

Et les autres pages

Il convient de procéder au remplacement de l’ancien menu dans les autres fichiers également : article.html et rubrique.html.

Nous allons donc recopier le code précédent dans ces deux fichiers.

La seule différence est la suivante :
  dans le fichier article.html il faudra ajouter : <INCLURE(page.php3){fond=menu}{id_article}> en lieu et place de <INCLURE(page.php3){fond=menu}> ;
  dans le fichier rubrique.html il faudra ajouter : <INCLURE(page.php3){fond=menu}{id_rubrique}> en lieu et place de <INCLURE(page.php3){fond=menu}> ;

Dans SPIP 1.9 on conviendra d’écrire : La seule différence est la suivante :
  dans le fichier article.html il faudra ajouter : <INCLURE(spip.php){page=menu}{id_article}> en lieu et place de <INCLURE(spip.php){page=menu}> ;
  dans le fichier rubrique.html il faudra ajouter : <INCLURE(spip.php){page=menu}{id_rubrique}> en lieu et place de <INCLURE(spip.php){page=menu}> ;

Cette dernière manipulation permet de mettre en relief la rubrique ou l’article dans lequel on se trouve :

Voici les différents fichiers tels que nous les avons modifiés dans cette seconde partie du tutoriel :

C’est fini !

Le menu peut ne pas vous convenir parce que vous avez beaucoup d’articles. Il suffit de retirer les boucles ARTICLES du fichier /squelettes/menu.html pour que ceux-ci ne s’affichent plus. Un cou p d’oeil dans la documentation de SPIP vous permettra de résoudre bien des problèmes à ce niveau.

On peut configurer bien d’autres pages de squelettes dans SPIP :
  breve.html pour l’affichage des breves ;
  forum.html pour l’envoie de messages sur le forum ;
  recherche.html pour l’affichage des résultats d’une recherche sur le site ;
  plan.html pour l’affichage d’un plan détaillé du site.

Les principes évoqués ci-avant s’appliquent bien sûr à toutes les pages de squelettes que vous adapterez ou créerez.

Quelques références pour construire vos squelettes

  Alsacréations pour des tutoriels sur les CSS  ;
  La documentation officielle de SPIP ;
  SPIP-CONTRIB.

Tutoriel suivant : Créer ses propres squelettes : III.