WordPress menu : Le guide complet

Pour le codage d’un thème (cf. article précédent), j’ai parcouru le codex de WordPress, des dizaines de sites, forums, tutoriaux pour arriver à avoir exactement le comportement désiré pour mon menu. Je vous propose ce guide qui compile toutes ces trouvailles. Il s’adresse plutôt aux codeurs, et à tous ceux qui s’intéressent au fonctionnement de leur CMS préféré 🙂

Création du menu avec register_nav_menu

Avant de pouvoir utiliser un menu, il faut dire à WordPress qu’il existe, cette étape est assez simple, une ligne dans functions.php suffit ex:

 

‘primary’ est le nom du menu, il doit être unique pour chaque menu, il servira à l’étape suivante

Affichage du menu avec wp_menu

Pour afficher le menu, rien de plus simple, il suffit d’ajouter ces lignes au code de votre thème (à l’endroit où vous voulez votre menu):

 

Vous obtiendrez un menu par défaut, mais c’est dans les multiples options qu’on s’aperçoit de la puissance du système de menu de WordPress 🙂

Les options de wp_menu

Lorsque vous n’indiquez aucun argument à la fonction wp_menu, WordPress utilise ces valeurs par défaut :

 

Voyons chaque option :

  • theme_location : il s’agit du nom que vous avez donner à l’étape précédente dans register_nav_menu
  • container : l’élément qui contiendra votre menu, par défaut WP créer une div , si vous ne voulez rien mettre, il faut choisir false
  • container_class, $container_id : classe et id du container.
  • menu_class : classe de la balise ul de votre menu, par défaut : menu
  • menu_id : Id de la balise ul de votre menu, par défaut : menu-{menu slug}
  • echo : 1 affiche le menu, 0 retourne un objet PHP , par défaut : 1
  • fallback_cb : fonction appelée si votre menu n’existe pas, permet de créer un menu par défaut pour éviter les bugs d’affichage par exemple…
  • before, after : avant et après la balise a du lien
  • link_before, link_after : avant et après le texte de votre lien
  • items_wrap : voir plus loin
  • depth : niveau de profondeur d’affichage. 1 n’affiche que le 1er niveau. 0 affiche tout. -1 permet de tout afficher sur un seul niveau. par défaut : 0
  • walker : voir plus loin

Sélectionner le menu « blog » pour un article

Avec le système de menu de WordPress, ce qui est très pratique, c’est système de classe automatique. La classe ‘current_page_item‘ est ajoutée à l’élément courant de votre site. Utile pour personnaliser l’affichage dans votre feuille de styles. Vous pouvez créer une page Blog avec les derniers articles de votre blog. Mais lorsque vous êtes sur un article, votre page Blog n’est plus votre page courante. Voici un hook pour corriger cela (à ajouter dans votre fichier functions.php comme toujours) :

 

Explication : is_single() permet de tester si nous somme bien dans un article. $item est l’élément du menu. Si nous sommes sur un article et que l’élément du menu est ‘blog’, alors ajouter la classe current_page_item. Un petit hook bien pratique pour pas mal d’utilisation !

Walker_Nav_Menu : prenez le controle de votre menu

Avec cette classe, on plonge au plus profond du codex de WordPress. Un peu ardu au premier abord, mais cela vaut vraiment le coup de s’y pencher. Cela ressemble à la manipulation à la volée du DOM avec jQuery, ou de fichier XML avec SAX.

Walker_Nav_Menu est un classe, qui contient des fonctions. Pour modifier le comportement de cette classe il suffit d’étendre cette classe, et réécrire les fonctions que l’on veut modifier. C’est ce que appelle surcharger une fonction en programmation orientée objet. (Pas de panique, je vais vous montrer des exemples concrets).

Un menu est une liste d’éléments, avec des sous listes pour les sous menus…

  • A chaque début de liste (niveau), la fonction start_lvl est appelée ( en génère un élément HTML <ul> )
  • A chaque fin de liste  (niveau), la fonction end_lvl est appelée ( en génère un élément HTML </ul> )
  • A chaque début d’élément, la fonction start_el est appelée ( en génère un élément HTML <li> )
  • A chaque fin d’élément, la fonction end_el est appelée ( en génère un élément HTML </li> )

Pour modifier votre menu, il faut surcharger une ou plusieurs de ces fonctions.Ce n’est pas la peine de réécrire une fonction si son comportement par défaut vous convient.

Voici 2 exemples que je suis en train de mettre en oeuvre sur mon dernier en construction.

Ajouter une description à un menu

Dans les propriétés avancées du menu, on peut ajouter une description, mais chose étonnante (cela va peut être changer dans une future version de WP), on ne peut pas afficher cette description sur notre page. Comme cela:

exemple-walker-menu-description

Pour arriver à mes fins il faut que je transforme

en

 

(J’ai simplifié le code réel, les classes, Ids nuisent à la lecture du code HTML).

On remarque que seul les éléments doivent être modifiés, il est inutile de ré-écrire start_lvl et end_lvl, de même pour end_el, le code de fin HTML est a laisser tel quel, seule la fonction  start_el est à écrire.

Pour ce faire, WordPress conseille de recopier le code de la classe Walker_Nav_Menu que l’on trouve ici.

Et voici le code modifié

La ligne importante est la ligne 21, qui ajoute la description dans les attributs du lien. J’aurai pu supprimer du code tout ce qui est inutile, mais je préfère garder un comportement le plus proche de l’original, on sait jamais si par la suite je veux ajouter d’autres choses dans les paramètres de wp_menu.

Il suffit ensuite d’indiquer le nom de ma fonction ‘description_walker‘ dans wp_menu.

Un menu simple

Dans mon template, j’ai des « top links », sans ul ou li, simplement une liste de liens comme ceci

Pour faire ceci, on va avoir besoin de 2 étapes :

mettre les paramètres adéquates dans wp_menu

  •  On supprime le ul avec items_wrap
  • On supprime la div qui entoure le menu

Coder le walker

Regardez la différence avec le 1er walker, tout le code du li et des classes a disparu, car devenu inutile.

A noter aussi, la fonction end_el, qui génère par défaut un /li , qui faut aussi enlever.

Voila maintenant vous savez tout sur les menus de WordPress ! 🙂

Si vous avez des questions, suggestions, idées à me soumettre.. n’hésitez pas !

Loading Facebook Comments ...

0 comments on “WordPress menu : Le guide completAdd yours →

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *