Wordpress: Menu avec la technique des sliding doors css

La technique CSS des sliding doors (portes coulissantes en Français) permet de réaliser des onglets sophistiqués pour vos menus de navigation. Malheureusement, les fonctions de Wordpress wp_list_pages() et wp_list_categories() ne permettent pas de rajouter la balise span nécessaire à la mise en place de cette technique. Nous allons voir comment outrepasser cette limitation.

Les sliding doors, pourquoi faire?

Il existe des milliers d’articles sur la technique dite des sliding doors. Je ne m’étendrais donc pas trop sur le sujet. Pour ceux qui ne connaissent pas encore ces fameuses portes coulissantes, en voici un topo rapide:
Prenons une bête liste de navigation:

<ul id="nav">
    <li><a href="#">lien n°1</a></li>
    <li><a href="#">lien n°2</a></li>
    <li><a href="#">lien n°3</a></li>
</ul>

Si nous appliquons, via css, des images de fond à nos liens histoire de rendre ce menu un peu plus joli, nous nous heurtons vite à une problématique de taille: Nous devons imposer une taille fixe au liens, correspondant à l’image de fond. En effet, sans taille fixe, si le lien est moins long que l’image, celle-ci sera coupée, si le lien est plus grand, l’image se répètera ou le lien dépassera de l’image.

C’est ici qu’intervient cette fameuse technique des sliding doors: Nous allons imbriquer notre lien dans un span, puis assigner indépendamment une image au span et au lien. Ces deux images se complèterons, et donneront ainsi l’illusion d’une seule image, adaptée à la taille du lien.

<ul id="nav">
    <li><a href="#"><span>lien n°1</span></a></li>
    <li><a href="#"><span>lien n°2</span></a></li>
    <li><a href="#"><span>lien n°3</span></a></li>
</ul>

Quand à notre feuille de style, nous procéderons comme suit:

#nav a, #nav a:visited  {
    display:block;
}

#nav a:hover, #nav a:active {
    background:url(images/tab-right.jpg) no-repeat 100% 1px;
    float:left;
}

#nav a span {
    float:left;
    display:block;
}

#nav a:hover span {
    float:left;
    display:block;
    background: url(images/tab-left.jpg) no-repeat 0 1px;
}

Comme il s’agit ici d’un exemple, cette feuille de style est volontairement minimaliste et ne montre que la mise en place des deux images.

Voici à quoi ressemblera un menu utilisant cette technique:

Mise en place dans Wordpress

Wordpress propose wp_list_pages() pour lister vos pages et wp_list_categories() pour vos catégories. Bien que ces deux fonctions prennent en compte de nombreux paramètres permettant de les configurer finement, il n’est pas possible de placer l’élément span nécessaire au bon fonctionnement de la technique des portes coulissantes.

J’ai lu plusieurs posts ou des utilisateurs préconisaient de modifier le core de Wordpress. Personnellement, cette idée ne m’a jamais vraiment séduit. Pourquoi? Simplement car le core n’est pas fait pour être modifié, et que en cas de mise à jour, il faudra tout recommencer…pas très user-friendly, tout ça.

En lieu et place de cette idée, je vous propose d’utiliser une expression régulière, par le biais de la fonction php preg_replace(). Il s’agit simplement de récupérer, sans l’afficher, la liste des catégories (ou des pages, au choix) et de la passer en paramètre à preg_replace(). Les deux autres paramètres seront bien sûr notre expression régulière: ce que l’on cherche, et par quoi on le remplace.

Pour mettre en place ce menu, recopiez le code suivant et collez le à la place de la fonction wp_list_pages(), ou wp_list_categories() dans le fichier header.php de votre thème Wordpress.

Pour lister vos pages:

<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i’, ‘<li$1><a$2><span>$3</span></a>’, wp_list_pages(’echo=0&orderby=name&exlude=181&title_li=&depth=1′)); ?>
</ul>

Pour lister vos catégories:

<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i’, ‘<li$1><a$2><span>$3</span></a>’, wp_list_categories(’echo=0&orderby=name&exlude=181&title_li=&depth=1′)); ?>
</ul>

Voilà, le menu est en place. Il ne vous reste plus qu’à décorer le tout via css. A vous de jouer!