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:
register_nav_menu( 'primary', 'Primary Menu' );
‘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):
wp_nav_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 :
$defaults = array( 'theme_location' => '', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults );
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) :
//Filtering a Class in Navigation Menu Item
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if(is_single() && $item->title == 'Blog'){
$classes[] = 'current_page_item';
}
return $classes;
}
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:
Pour arriver à mes fins il faut que je transforme
<li ><a href="blog" >Blog</a></li>
en
<li ><a href="blog" data-description="Our Blog">Blog</a></li>
(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é
class description_walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$attributes .= ! empty( $item->description ) ? ' data-description="' . esc_attr( $item->description ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
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
<a href="/who-are-we/">Who are we?</a> | <a href="/faq/">FAQ</a> |
Pour faire ceci, on va avoir besoin de 2 étapes :
mettre les paramètres adéquates dans wp_menu
wp_nav_menu( array( 'container' =>false, 'theme_location' => 'top', 'menu_id' => '', 'echo' => true, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0, 'items_wrap' => '%3$s', 'walker' => new simple_walker()) );
- On supprime le ul avec items_wrap
- On supprime la div qui entoure le menu
Coder le walker
class simple_walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = '<a'. $attributes .'>';
$item_output .= apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= '</a> | ';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function end_el(&$output, $item, $depth=0, $args=array()) {
$output .= "";
}
}
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 !
Procédés d’installation de WordPress pour son site Internet
WordPress est un CMS ou outil de gestion de contenu pour site web ou blog. Avec cet outil, il vous est facile de créer des contenus, de les gérer et de les publier en ligne.
WordPress intègre également de nombreuses fonctionnalités pour l’optimisation de la visibilité de votre site web. Vous pouvez également gérer vos publications sur les réseaux sociaux depuis votre CMS WordPress. Il est recommandé de faire appel à une agence spécialisée pour l’apprentissage et la maîtrise des fonctionnalités avancées de ce CMS.
L’installation de WordPress est à la portée de tout webentrepreneur souhaitant faire du business sur la toile. Mais pour que cette opération soit parfaite et que l’outil fonctionne correctement, le mieux est de faire appel aux services d’une agence web experte en développement web et installation WordPress.
L’installation de cet outil peut se faire en local. Dans ce cas précis, le CMS est hébergé sur le disque dur d’un ordinateur. Dans le cas d’une installation sur serveur, WordPress est installé sur un serveur à distance ou dans le Cloud.
Avec l’installation en local, vous avez alors une copie du site et de l’ensemble des contenus sur votre ordinateur. Cette manœuvre vous permet également de réaliser des modifications hors-ligne en cas de nécessité.
0 comments on “WordPress menu : Le guide complet” Add yours →