DarineKo.com Paris, Seoul & the WWW

La fonction wp_list_pages sur WordPress affiche automatiquement une liste de liens vers les différentes pages créées. Ce tutoriel explique comment on peut créer un menu utilisant des images tout en utilisant la fonction wp_list_pages au lieu de créer les liens manuellement à chaque fois. Il va d'abord falloir insérer ce code là où vous voulez que votre menu s'affiche :

<ul id="menu">
<?php wp_list_pages('title_li=&depth=1&link_before=<span>&link_after=</span>'); ?>
</ul>

Normalement, le code HTML généré automatiquement par cette fonction ressemblera à ceci :

<ul id="menu">
<li class="page_item page-item-1"><a href="lorem.html" title="Lorem"><span>Lorem</span></a></li>
<li class="page_item page-item-2"><a href="ipsum.html" title="Ipsum"><span>Ipsum</span></a></li>
<li class="page_item page-item-3"><a href="dolor.html" title="Dolor"><span>Dolor</span></a></li>
<li class="page_item page-item-4"><a href="amet.html" title="Amet"><span>Amet</span></a></li>
</ul>

Il va donc falloir styler tout ça dans la feuille de style. Tout d'abord, on veut enlever toutes les marges et les puces de la liste :

ul#menu {
margin: 0px;
padding: 0px;
list-style: none;
width: 200px; /* largeur de votre menu */
}

Les tags <span> et </span> qu'on a fait insérer par la fonction wp_list_pages sert à cacher le texte des liens (car nous allons utiliser des images, c'est le but du tutoriel !)

ul#menu li.page_item a span {
visibility: hidden;
}

Maintenant, on va mettre tous les styles communs aux liens du menu :

ul#menu li.page_item a {
display: block; /* pour que toute l'image soit cliquable */
text-decoration: none; /* on enlève le soulignement par défaut des liens */
width: 200px; /* pour width et height, si vos images ont toutes les mêmes dimensions, on les définit ici */
height: 40px; /* si les images sont de dimensions différentes, il faudra le faire au cas par cas */
margin-bottom: 10px; /* ajoute une marge de 10 pixels entre les liens */
}

Maintenant, on va définir des images pour chaque lien. Comme vous pouvez le voir, WordPress ajoute une classe bien précise à chaque lien : page-item-1, page-item-2 etc. Les chiffres peuvent changer, ils représentent l'ID de votre page. Il faut donc que vous connaissiez l'ID de votre page, mais cela n'est pas sorcier à obtenir. Il y a en fait deux méthodes, une avec ID, et une avec le titre. Je vais explorer les deux solutions ici, en commençant par l'ID.

Souvenez vous, le code HTML du menu généré par WordPress ressemble à ceci :

<li class="page_item page-item-1"><a href="lorem.html" title="Lorem"><span>Lorem</span></a></li>

Avec page-item-1 qui est variable et différent pour chaque lien, ce qui nous permet de définir des styles différents pour chaque lien :

ul#menu li.page-item-1 a {
background: url(images/lorem.jpg) no-repeat;
}
ul#menu li.page-item-2 a {
background: url(images/ipsum.jpg) no-repeat;
}
ul#menu li.page-item-3 a {
background: url(images/dolor.jpg) no-repeat;
}
ul#menu li.page-item-4 a {
background: url(images/amet.jpg) no-repeat;
}

Ou alors, on sait que le code HTML du menu généré par WordPress comprend aussi l'attribut title pour chaque lien :

<li class="page_item page-item-1"><a href="lorem.html" title="Lorem"><span>Lorem</span></a></li>

Comme les titres sont différents pour chaque page, on va exploiter ceci avec le CSS pour donner un style différent à chaque lien :

ul#menu li a[title=Lorem] { /* On récupère les liens ayant comme attribut title "Lorem" */
background: url(images/lorem.jpg) no-repeat;
}
ul#menu li a[title=Ipsum] {
background: url(images/ipsum.jpg) no-repeat;
}
ul#menu li a[title=Dolor] {
background: url(images/dolor.jpg) no-repeat;
}
ul#menu li a[title=Amet] {
background: url(images/amet.jpg) no-repeat;
}

Voilà, vous avez donc deux méthodes pour styler vos liens générés par wp_list_pages et utiliser des images pour lier les pages plutôt que du texte.

Exemple - Télécharger les fichiers

Be Sociable, Share!

• 

Tags app css image php tutoriel wordpress