Blog / Code

Descriptions dans les menus WordPress

Descriptions dans les menus WordPress

Ce tutorial est la traduction d’un article qui a beaucoup servi aux développeurs WordPress anglophone.
Vous pourrez trouver l’original ici : http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Problématique

Comme vous pouvez le constater sur l’illustration ci-dessus, le menu, plutôt que d’afficher une simple liste des éléments qui le composent, est constitué du nom de l’élément et, en dessous de ce nom, d’une petite description de celui-ci.
Cette fonctionnalité n’est pas native dans WordPress.
Comme vous le savez sans doute déjà, une fois que vous avez créé un menu dans l’administration de votre site (Apparence > Menus) vous pouvez utiliser une fonction WordPress appelée wp_nav_menu() au sein de vos templates pour afficher ces menus.

En frontend, le code de base ressemblerait à quelque chose comme ceci :

<ul id="menu-main">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

Avec une telle liste non ordonnée, il est presque impossible de créer un menu tel qu’on voudrait l’obtenir. Nous avons donc besoin de modifier le code pour obtenir ceci:

<ul id="menu-main">
     <li><a href="#"><strong>Home</strong><span>Starting the journey</span></a></li>
     <li><a href="#"><strong>About</strong><span>What to expect</span></a></li>
     <li><a href="#"><strong>Contact</strong><span>Get in touch!</span></a></li>
     <li><a href="#"><strong>Blog</strong><span> Latest storys</span></a></li>
</ul>

Les éléments de menu sont entourés des balises  <strong> </strong> tandis que les descriptions le sont des balises  < span> < /span>
Cela permettra de les styliser dans le fichier CSS correspondant.

Préparation de l’administration

Préparation de l’administration
La première chose que nous devons faire est de configurer le menu correctement dans notre backend. WordPress est déjà fourni avec la possibilité d’ajouter une description à chaque élément de menu, mais il est caché par défaut.
Dans l’administration du site, lorsque vous vous trouvez dans Apparence > Menus, regardez en haut à droite de l’écran. Vous y verrez un onglet « Option de l’écran ». Cliquez dessus et vous obtiendrez la possibilité d’afficher plusieurs autres champs de saisie pour chaque élément de menu, parmi eux une case à cocher pour afficher la description.

Préparation de l’administration
Une fois que vous aurez coché cette case, si vous commencez à éditer vos éléments de menu, vous remarquerez que vous pouvez maintenant entrer dans une description.
Par défaut, WordPress ajoute une description assez longue des éléments de menu qui sont créés par les pages. Supprimez simplement ces romans et ajoutez quelques mots comme dans l’exemple ci-dessus.

Maintenant que nous avons mis en place dans le backend les données à afficher, il est temps pour préparer le frontend pour afficher ces données.

Modification de l’affichage en utilisant un custom walker

WordPress utilise une classe spéciale appelée « Walker » qui parcourt chaque enregistrement de données, puis affiche ces données.
Il suffit donc de créer notre propre custom walker qui permettra de manipuler cette classe PHP. De cette manière, nous n’aurons pas besoin de manipuler la base de données ou de préparer les données.
Nous avons seulement besoin d’étendre la partie du code wordpress qui génère la liste. Donc, ouvrez votre fichier functions.php et ajoutez le code suivant :

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        ) .'"' : '';

           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }

            $item_output = $args->before;
            $item_output .= '<a '. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;

            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
}

Que permet cette classe ?
Elle est basée sur celle utilisée par WordPress mais on y a ajouté quelques lignes de manière à étendre les possibilités d’affichage du menu.
Le walker vérifie maintenant si le champ description est renseigné et, si c’est le cas, il entoure la description de balises < span> et l’ajoute à l’élément de menu.
Le walker vérifie également si nous sommes en train d’itérer sur un élément de sous-menu ou un élément de niveau supérieur, puisque nos articles de sous-menu n’ont pas besoin d’afficher une description.

L’appel de fonction

Maintenant que nous avons créé un custom walker, nous avons seulement besoin de dire à WordPress qu’il doit utiliser ce custom walker au lieu de son propre walker. Ceci peut être facilement fait en appelant le wp_nav_menu() avec le paramètre walker :

wp_nav_menu( array(
 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'walker' => new description_walker())
 );

Voilà.
Votre menu s’affichera désormais avec une structure de code complètement différente et que vous pourrez facilement styliser via le fichier CSS pour répondre à vos besoins.
Par exemple :

.nav{
height:50px;
padding-left:13px;
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
}

.nav a{
display:block;
float:left;
line-height:18px;
outline:medium none;
padding:2px 10px;
text-decoration:none;
width:95px;
min-height: 35px;
}

.nav li a strong {
display:block;
font-size:14px;
font-weight:normal;
}

.nav li a span {
display:block;
font-size:10px;
line-height:14px;
}

En espérant que ce tutorial vous sera utile dans le développement de vos menus WordPress…

Articles qui pourraient vous intéresser