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

Le système de menu WordPress possède 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'elles sont activées, leur affichage n'est pas pris en charge sans ajouter de code. La plupart des thèmes ne sont pas conçus avec des descriptions d'éléments de menu à l'esprit. 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 tutoriel nécessite une bonne compréhension du développement de thèmes HTML, CSS et WordPress..

Quand et pourquoi souhaiteriez-vous ajouter des descriptions de menus??

Certains utilisateurs pensent que l'ajout d'une description de menu aidera au référencement. Cependant, nous pensons que la raison principale pour laquelle vous voudriez 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 du menu. Une description intrigante incitera plus d'utilisateurs à cliquer sur les menus.

Étape 1: Activer les descriptions de menu

Aller à Apparence »Menus. Cliquer sur Options d'écran bouton en haut à droite de la page. Vérifier la Descriptions boîte.

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

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

Étape 2: Ajouter la classe de marcheur:

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

 class Menu_With_Description étend Walker_Nav_Menu function start_el (& $ sortie, $ item, $ profondeur, $ args) global $ wp_query; $ indent = ($ depth)? str_repeat ("\ t", $ depth): "; $ class_names = $ value ="; $ classes = vide ($ item-> classes)? array (): (array) $ item-> classes; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item)); $ class_names = ''; $ output. = $ indent. ''; $ attributs =! vide ($ item-> attr_title)? '': "; $ attributs. =! vide ($ item-> cible)? 'cible ="'. esc_attr ($ item-> target). '"':"; $ attributs. =! vide ($ item-> xfn)? 'rel = "'. esc_attr ($ item-> xfn). '"': "; $ attributs. =! empty ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> before; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ args-> link_after; $ item_output. = '
'. $ item-> description. ''; $ item_output. = ''; $ item_output. = $ args-> after; $ output. = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args);  

Étape 3. Activer 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 manière d’ajouter des menus de navigation personnalisés dans les thèmes WordPress. La plupart des thèmes WordPress ajoutent des menus dans header.php modèle. Cependant, il est possible que votre thème ait utilisé un autre fichier de modèle pour afficher les menus..

Ce que nous devons faire maintenant, c'est trouver wp_nav_menu () fonctionne dans votre thème (probablement dans header.php) et changez-le comme ceci.

   'primary', 'menu_class' => 'nav-menu', 'walker' => $ walker)); ?> 

Dans la première ligne, nous définissons $ marcheur d'utiliser la classe walker nous avons défini plus tôt dans functions.php. Dans la deuxième ligne de code, le seul argument supplémentaire à ajouter aux arguments wp_nav_menu existants est 'walker' => $ walker.

Étape 4. Styliser les descriptions

La classe de promeneur que nous avons ajoutée précédemment affiche la description des éléments à cette ligne de code:

 $ item_output. = '
'. $ item-> description. ''; 

Le code ci-dessus ajoute un saut de ligne à l'élément de menu en ajoutant un
tag et encapsule ensuite vos descriptions dans une étendue avec class sub. Comme ça:

 
Sur
Qui sommes nous?
 

Pour modifier l'apparence de vos descriptions sur votre site, vous pouvez ajouter du CSS dans la feuille de style de votre thème. Nous testions ceci sur Twenty Twelve et utilisions ce css.

 .menu-item border-left: 1px solid #ccc;  span.sub font-style: italic; taille de police: petit;  

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

Ressources supplémentaires

Comment styler les menus de navigation de WordPress

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

Bill Erickson's Menus with Description Class