Comment ajouter des descriptions de menu dans vos thèmes WordPress

---

Le système de menu WordPress dispose d'une fonctionnalité intégrée dans laquelle vous pouvez ajouter des descriptions avec des éléments de menu. Cependant, cette fonctionnalité est masquée par défaut. Même lorsqu'ils sont activés, leur affichage n'est pas pris en charge sans ajouter du code. La plupart des thèmes ne sont pas conçus en pensant aux descriptions des éléments de menu. Dans cet article, nous allons vous montrer comment activer les descriptions de menu dans WordPress et comment ajouter des descriptions de menu dans vos thèmes WordPress.

Remarque : Ce didacticiel nécessite que vous ayez une bonne compréhension du développement de thèmes HTML, CSS et WordPress.

Quand et pourquoi voudriez-vous ajouter des descriptions de menu ?

Certains utilisateurs pensent que l’ajout d’une description du menu aidera au référencement. Cependant, nous pensons que la principale raison pour laquelle vous souhaiteriez les utiliser est d’offrir une meilleure expérience utilisateur sur votre site.

Les descriptions peuvent être utilisées pour indiquer aux visiteurs ce qu'ils trouveront s'ils cliquent sur un élément de menu. Une description intrigante incitera davantage d’utilisateurs à cliquer sur les menus.

Étape 1 : Activez les descriptions de menu

Accédez à Apparence » Menus. Cliquez sur le bouton Options d'écran dans le coin supérieur droit de la page. Cochez la case Descriptions.

Cela activera le champ de descriptions dans vos éléments de menu. Comme ça:

Vous pouvez désormais ajouter des descriptions de menu aux éléments de votre menu WordPress. Toutefois, ces descriptions n’apparaîtront pas encore dans vos thèmes. Pour afficher les descriptions des menus, nous devrons ajouter du code.

Étape 2 : Ajoutez la classe Walker :

La classe Walker étend la classe existante dans WordPress. En gros, il ajoute simplement une ligne de code pour afficher les descriptions des éléments de menu. Ajoutez ce code dans le fichier functions.php de votre thème.

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

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
		$item_output .= '</a>';
		$item_output .= $args->after;

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

Étape 3. Activez Walker dans wp_nav_menu

Les thèmes WordPress utilisent la fonction wp_nav_menu() pour afficher les menus. Nous avons également publié un tutoriel pour les débutants sur la façon d'ajouter des menus de navigation personnalisés dans les thèmes WordPress. La plupart des thèmes WordPress ajoutent des menus dans le modèle header.php. Cependant, il est possible que votre thème ait utilisé un autre fichier modèle pour afficher les menus.

Ce que nous devons faire maintenant, c'est trouver la fonction wp_nav_menu() dans votre thème (très probablement dans header.php) et la modifier comme ceci.

<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

Dans la première ligne, nous définissons $walker pour qu'il utilise la classe walker que nous avons définie précédemment dans functions.php. Dans la deuxième ligne de code, le seul argument supplémentaire que nous devons ajouter à nos arguments wp_nav_menu existants est 'walker' => $walker.

Étape 4. Styliser les descriptions

La classe Walker que nous avons ajoutée précédemment affiche les descriptions des éléments sur cette ligne de code :

$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

Le code ci-dessus ajoute un saut de ligne à l'élément de menu en ajoutant une balise
, puis encapsule vos descriptions dans un span avec class sub. Comme ça:

<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>

Pour modifier la façon dont vos descriptions apparaissent sur votre site, vous pouvez ajouter du CSS dans la feuille de style de votre thème. Nous testions cela sur Twenty Twelve et utilisions ce CSS.

.menu-item {
border-left: 1px solid #ccc;
}

span.sub { 
font-style:italic;
font-size:small;
}

Nous espérons que cet article vous sera utile et qu’il vous aidera à créer des menus sympas avec des descriptions de menu dans votre thème. Des questions? Laissez-les dans les commentaires ci-dessous.

Ressources additionnelles

Comment styliser les menus de navigation WordPress

Comment ajouter des éléments personnalisés à des menus WordPress spécifiques

Menus de Bill Erickson avec classe de description