WordPress permet d’utiliser des classes dites Walker pour parcourir et afficher des éléments dans une structure hiérarchique. Dans cet article, nous apprendrons comment créer, implémenter et personnaliser notre propre classe de marcheur pour personnaliser la sortie de notre menu.
L’utilisation la plus connue de la personnalisation avec les classes Walker dans WordPress concerne les menus, mais en réalité, WordPress utilise les classes Walker pour tout un tas de cas, par exemple la sortie de hiérarchies de taxonomie, de hiérarchies de commentaires [wp_list_pages](https://developer.wordpress.org/reference/functions/wp_list_pages/)()et de fichiers [wp_list_categories](https://developer.wordpress.org/reference/functions/wp_list_categories/)(). Ils étendent tous une Walkerclasse générale. Nous allons étendre le Walker_Nav_Menuqui est utilisé pour les menus dans WordPress.
Parce que nous étendons une autre classe, nous n’avons qu’à ajouter les fonctions que nous souhaitons remplacer. Si une fonction n’existe pas dans notre classe, WordPress exécutera la fonction de la classe parente (la classe que nous étendons) à la place.
Préparation
Vous pouvez ajouter votre classe de marcheur dans vos fichiers de plug-in, vos thèmes function.phpou tout fichier PHP inclus par functions.php(pour un code plus propre). Vous commencez par définir votre classe par un nom de votre choix (assurez-vous que le nom de la classe est unique, et cela inclut les noms de classe possibles dans le noyau WordPress !) en étendant Walker_Nav_Menu:
class AWP_Menu_Walker extends Walker_Nav_Menu {
}Afin de dire à WordPress d’utiliser notre marcheur, nous le définissons dans nos [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()appels. Cette fonction est responsable de la sortie d’un menu et vous en avez probablement au moins un dans votre thème pour le menu principal.
Dans le tableau d’arguments, wp_nav_menu()ajoutez un nouvel élément avec la clé ‘walker’ et créez une nouvelle instance de votre classe walker comme ceci :
Si vous actualisez votre site, vous ne devriez voir aucun changement. En effet, notre classe ne remplace aucune des fonctions du parent, et donc WordPress exécute simplement les fonctions normales du marcheur de menu lors de la sortie du menu, tout comme avant nous lui avons dit d’utiliser notre marcheur.
Voici les fonctions que vous pouvez ajouter à votre classe de marcheur personnalisée pour remplacer les fonctions de la classe parentaleWalker_Nav_Menu :
Les quatre premières sont des fonctions qui sont simplement responsables de la sortie, et elles nécessitent toutes que vous ajoutiez à une chaîne – la première variable de paramètre. Il est important de savoir que vous ne faites echorien ici, tout est censé être construit comme une chaîne.
niveau_début
La fonction start_lvlest responsable de la sortie du HTML pour le début d’un nouveau niveau. En bref, il devrait sortir le fichier <ul>.
function start_lvl(&$output, $depth=0, $args=null) { }Le premier paramètre, $output– passé par référence, est la chaîne à laquelle vous ajouterez votre sortie. $depthest un nombre entier indiquant à quel niveau vous vous trouvez ; 0 pour le niveau supérieur, 1 pour l’enfant direct du niveau supérieur, etc. $argsest un objet de tous les arguments fournis dans wp_nav_menu().
end_lvl
La end_lvlfonction est responsable de la sortie du HTML pour la fin d’un niveau. Ce n’est généralement que la fermeture </ul>.
function end_lvl(&$output, $depth=0, $args=null) { }Les paramètres sont exactement les mêmes que ci- start_lvldessus.
start_el
Cette fonction est responsable de la sortie du code HTML de chaque élément. En bref, il devrait afficher le début <li>et la <a>balise avec le titre du lien à l’intérieur.
function start_el(&$output, $item, $depth=0, $args=null, $id=0) { }Le premier argument, $output, est comme d’habitude la chaîne à laquelle vous ajouterez la sortie. Le deuxième argument, $item, est l’objet de l’élément de menu – et c’est là que vous récupérerez la plupart des données pour afficher l’élément de menu. Si le lien de menu est un élément de menu de publication, vous obtiendrez l’objet de publication ici. Quel que soit le type de menu, vous obtiendrez également des éléments utiles supplémentaires ; tels que classes, url, titleet description.
Le troisième argument, $depth, est un entier vous indiquant à quel niveau nous sommes. Le niveau 0 est le niveau supérieur, le niveau 1 est l’enfant direct du niveau supérieur, et ainsi de suite. Le quatrième argument, $args, est un objet de tous les arguments fournis à wp_nav_menu(). Le cinquième paramètre, $id, est l’ID de l’élément de menu actuel.
end_el
La end_elfonction est responsable de la sortie de la fermeture d’un élément. Habituellement, il ne sortirait que la </li>balise.
function end_el(&$output, $item, $depth=0, $args=null) { }Les arguments pour end_elsont les mêmes que start_elci-dessus sauf que la fonction n’a pas le cinquième paramètre, $id.
display_element
La fonction display_elementest une fonction héritée de la Walkerclasse générale et est la fonction responsable de la traversée. C’est la fonction qui appelle tour à tour toutes les fonctions ci-dessus.
J’inclus ceci ici parce que dans certains cas, par exemple si vous voulez empêcher de traverser une branche entière, vous utiliserez cette fonction pour cela.
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }Le premier argument, $element, est l’objet de l’élément de menu – c’est ce qui est transmis comme $itemdans les fonctions ci-dessus. Le deuxième argument, $children_elements– passé par référence, contient tous les éléments enfants que cette fonction traversera. $max_depth, le troisième argument, est un entier qui signale la profondeur à laquelle nous devons traverser, et le quatrième argument, $depth, est la profondeur à laquelle nous nous trouvons actuellement. Le cinquième argument, $args, est les arguments passés à la fonction qui a appelé le marcheur (pour les menus, ce seraient les arguments fournis à wp_nav_menu()), et le dernier argument, $output– passé par référence, est la sortie qui est transmise comme premier argument dans tous des fonctions ci-dessus.
Modification de la sortie de chaque élément
Dans l’aperçu ci-dessus, vous devriez voir que la fonction start_el()est responsable de la sortie du HTML pour un seul élément de menu. Commençons par remplacer cette fonction dans notre classe walker avec un exemple simple.
Exemple: empêcher l’ajout de liens pour les éléments ‘#’
Assurons-nous que tous les #liens ‘ ‘ obtiennent un <span>élément au lieu d’une balise de lien, pour éviter de rafraîchir la page.
Nous allons commencer l’élément en ajoutant une <li>balise à $output. Nous voulons nous assurer que les classes par défaut de WordPress (par exemple ‘menu-item’, ‘menu-item-has-children’ etc.), ainsi que les classes saisies manuellement dans l’éditeur de menu sont ajoutées à notre élément de liste. Nous collons les classes fournies sous forme de tableau en $item->classesutilisant la fonction PHP [implode](https://www.php.net/manual/en/function.implode.php)()séparant chaque élément par un espace.
Aux lignes #5-9 et #13-17, nous traitons la sortie conditionnelle de l’élément d’emballage. Nous produisons une <a>balise, sauf si l’URL de l’élément est ‘ #‘, auquel cas nous fournissons une <span>balise à la place. À la ligne 11, nous sortons simplement le texte du lien, qui réside dans $item->title.
C’est tout ce dont nous avons besoin pour nous assurer que tous les éléments de menu qui ont ‘ #‘ comme URL ne sont pas cliquables !
Si vous faites cela dans un thème stylisé, gardez à l’esprit que vous risquez de perdre du style si le thème a <a>directement stylisé la balise. Vous pouvez résoudre ce problème en modifiant le style et éventuellement en ajoutant une classe à l’élément span.
Par exemple, une autre chose que vous pouvez faire ici est de sortir la description du menu. Cela existe, mais n’est pas activé par défaut. Dans l’éditeur de menu WordPress, vous devez cliquer sur "Options d’écran" en haut à droite et cocher pour afficher "Description":
Cela permet à l’utilisateur d’entrer une description pour chaque élément. Vous pouvez afficher cette description dans votre classe de marcheur. Supposons que vous souhaitiez uniquement afficher la description des éléments de niveau supérieur, car cela fait partie de la conception de votre thème. Vous pouvez simplement vérifier si le $itema une description et si $depthest 0, comme ceci :
Exemple : Ajouter des carets déroulants
Un exemple plus courant et utile consiste à ajouter un "caret", une icône qui signale que cet élément de menu a un menu déroulant (a des éléments enfants).
Exemple de carets en action – derrière "Blog" et "Actualités"
Vous aurez besoin de comprendre votre sortie HTML caret. Dans mon cas, je produis un <i>élément avec des classes spécifiques pour une belle flèche vers le bas disponible par la bibliothèque Fontawesome qui fournit des milliers d’icônes. Vous voulez également vous assurer que ce caret ne sort que sur les éléments qui ont des enfants. Le meilleur moyen que j’ai trouvé pour déterminer si l’élément actuel a des enfants est de référencer l’objet walker (oui, qui est notre walker lui-même, mais aussi les classes qu’il étend !) dans $args, et de vérifier le boolean has_children. La sortie d’un signe d’insertion est aussi simple que :
La classe de marcheur complète ressemblerait à ceci :
Et c’est tout ce dont vous avez besoin pour vous assurer que votre menu reçoit de belles icônes de caret sur les éléments parents et que #les liens ‘ ‘ ne seront pas cliquables.
Si vous souhaitez que l’icône caret change, par exemple en une flèche vers le haut lorsque la liste déroulante est active, vous devrez l’ajouter avec Javascript à votre thème.
Comme le suggèrent les exemples ci-dessus, vous pouvez manipuler la sortie comme vous le souhaitez, en fonction de toutes les conditions. Vous pouvez par exemple modifier la sortie en fonction de la présence d’une certaine classe (par exemple une classe entrée manuellement dans l’éditeur de menu) en recherchant la classe dans $item->classes, ou vous pouvez manipuler (par exemple mettre en majuscule) le texte de l’élément fourni dans $item->title.
Je voudrais mentionner une autre chose utile. N’oubliez pas que $args contient tous les arguments fournis à wp_nav_menu(). Cela inclut par exemple theme_locationet d’autres, donc si vous ne pouvez modifier la sortie que pour des emplacements de thème spécifiques – par exemple le menu principal. Mais vous pouvez en fait fournir n’importe quel argument personnalisé !
Supposons que vous produisiez le même menu plusieurs fois, par exemple une pour le bureau et une autre pour le mobile. Ou vous voulez que votre marcheur manipule les éléments uniquement lorsqu’ils sont affichés wp_nav_menu()dans votre thème, et non lorsque le menu est ajouté via un widget ? Peut-être souhaitez-vous que votre déambulateur gère la sortie différemment dans ces cas ?
Vous pouvez fournir n’importe quel argument personnalisé à wp_nav_menu(). Comme exemple simple, j’ajouterai un booléen ‘ show_carets‘ aux arguments pour m’assurer que les carets ne sont ajoutés que dans les cas où je les veux – au lieu que ma classe de marcheur ajoute des carets à tous les menus.
Ensuite, je peux simplement changer mon morceau de code d’ajout de caret ci-dessus (ligne # 19-21) en vérifiant si oui ou non show_caretsest présent et vrai dans $args, comme ceci:
Vous pouvez ajouter tous les arguments que vous souhaitez pour vous assurer que votre déambulateur ne personnalise que les menus que vous souhaitez. Par exemple, des booléens simples pour différents cas, par exemple is_mobile_menu, ou tout ce dont vous avez besoin.
Et c’est à peu près tout. N’hésitez pas à expérimenter et faites-moi savoir si vous avez des questions ou des suggestions ci-dessous !