5 à 6 minutes Niveau : Intermédiaire
Objectif de cette astuce
Savoir renseigner et afficher une courte description sous chaque lien de menu, pour donner au visiteur un contexte immédiat sur la destination avant même qu’il clique — particulièrement utile sur les sites avec plusieurs offres ou catégories.
Pourquoi ajouter une description ?
Un menu textuel seul demande au visiteur de deviner ce qu’il va trouver. Une description courte sous chaque lien supprime cette hésitation : le visiteur comprend en un coup d’œil à quoi correspond chaque section. C’est particulièrement efficace dans les menus déroulants style mega-menu, ou sur les sites proposant plusieurs services distincts.
Cette fonctionnalité existe nativement dans WordPress mais elle est masquée par défaut dans l’interface. Et son affichage dépend du thème actif.
Pour les thèmes blocs FSE : le champ Description existe dans les réglages d’un lien de navigation dans la sidebar, mais là aussi le thème doit le prendre en charge.
Étape 1 — Activer le champ Description dans l’interface
Dans Apparence → Menus, le champ Description n’est pas visible par défaut. Il faut l’activer manuellement.
Cliquer sur Options de l’écran en haut à droite de la page, puis cocher la case “Description” dans la section “Afficher les propriétés avancées des éléments de menu”.
Le champ Description apparaît maintenant sous chaque élément déplié de la structure du menu. Saisir une courte phrase descriptive (idéalement moins de 60 caractères), puis Enregistrer le menu.
Étape 2 — Forcer l’affichage si le thème ne le gère pas
Le champ est enregistré dans la base de données, mais son affichage sur le front-end dépend du thème. La plupart des thèmes standards n’affichent pas la description. Pour la forcer, il faut ajouter un walker personnalisé dans le functions.php du thème enfant.
Le walker étend la classe Walker_Nav_Menu de WordPress et y ajoute la description après chaque lien, uniquement si elle est renseignée. Il s’applique ensuite à tous les menus du site via le filtre wp_nav_menu_args.
Copier et coller ce code dans le functions.php de votre thème enfant :
// =====================================================
// Walker personnalisé pour afficher la description
// des items de menu sous le lien
// =====================================================
class Mon_Walker_Menu extends Walker_Nav_Menu {
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
// Appeler la méthode parent pour le rendu standard
parent::start_el( $output, $item, $depth, $args, $id );
// Si une description est renseignée, l'ajouter après le lien
if ( ! empty( $item->description ) ) {
$output .= '<span class="menu-item-description">'
. esc_html( $item->description )
. '</span>';
}
}
}
// =====================================================
// Appliquer le walker à tous les menus du site
// =====================================================
add_filter( 'wp_nav_menu_args', 'appliquer_walker_description' );
function appliquer_walker_description( $args ) {
$args['walker'] = new Mon_Walker_Menu();
return $args;
}Puis ajouter ce CSS dans le style.css du thème enfant pour mettre en forme la description sous le lien de menu (style Méga-menu) :
.menu-item-description {
display: block;
font-size: 12px;
color: #6b7280;
margin-top: 2px;
}Pour un affichage au survol uniquement, on n’a pas besoin de modifier le walker — on garde le même HTML, et c’est le CSS seul qui gère la visibilité. Voici la correction :
/* Description cachée par défaut */
.menu-item-description {
display: block;
font-size: 12px;
color: #6b7280;
margin-top: 2px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.2s ease, max-height 0.2s ease;
}
/* Description visible au survol de l'item parent */
.menu-item:hover .menu-item-description {
opacity: 1;
max-height: 40px;
}Choix éditorial : l’affichage permanent convient bien à un menu vertical ou un mega-menu avec peu d’items. L’affichage au survol est plus adapté à une barre de navigation horizontale classique où l’espace est contraint.
Thème enfant obligatoire : ne jamais modifier lefunctions.phpdu thème parent — il serait écrasé à la prochaine mise à jour du thème.
Vérifier d’abord : certains thèmes gèrent déjà nativement les descriptions (Astra, GeneratePress avec modules activés…). Dans ce cas le walker n’est pas nécessaire — tester d’abord en saisissant une description et en consultant le front-end.
Le résultat
Et pour les thèmes blocs FSE
En FSE avec un thème bloc, le walker ne fonctionne pas — WordPress ne passe plus par wp_nav_menu() et son système de walkers pour générer le HTML. Le bloc Navigation utilise son propre rendu via l’API des blocs, complètement indépendant.
En FSE, la description est gérée nativement par le bloc Navigation lui-même, et le span généré est :
<span class="wp-block-navigation-item__description">votre description</span>Le CSS à utiliser en FSE est donc différent , la classe à utiliser est : .wp-block-navigation-item__description
Le CSS est à ajouter dans le CSS additionnel Apparence → Éditeur → Styles (l’icône cercle noir/blanc) → les 3 points → CSS additionnel
Récapitulatif
| Étape | Thème classique | FSE |
|---|---|---|
| Saisir la description | Apparence → Menus → Options de l’écran → cocher “Description” | Apparence → Éditeur → Navigation → sidebar du lien |
| Walker nécessaire ? | Oui si le thème ne le gère pas nativement, à coller dans le fichier functions.php du thème enfant | Non — rendu natif FSE |
| Styliser | style.css thème enfant · sélecteur .menu-item-description | |
| Survol | CSS sur .menu-item:hover .menu-item-description | CSS sur .wp-block-navigation-item:hover .wp-block-navigation-item__description |
Ce qu’il faut retenir
La description de menu est une fonctionnalité discrète mais efficace, surtout sur les sites avec plusieurs offres ou catégories. Elle s’active en deux clics dans WordPress mais nécessite souvent un walker côté thème pour s’afficher réellement. C’est un ajout à réserver aux menus riches — inutile sur un menu de 3 liens, précieux sur un mega-menu de 6 services.