[wp_list_pages](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_pages\/)()<\/code>et de fichiers [wp_list_categories](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_categories\/)()<\/code>. Ils \u00e9tendent tous une Walker<\/code>classe g\u00e9n\u00e9rale. Nous allons \u00e9tendre le Walker_Nav_Menu<\/code>qui est utilis\u00e9 pour les menus dans WordPress.<\/p>\nParce que nous \u00e9tendons une autre classe, nous n’avons qu’\u00e0 ajouter les fonctions que nous souhaitons remplacer. Si une fonction n’existe pas dans notre classe, WordPress ex\u00e9cutera la fonction de la classe parente (la classe que nous \u00e9tendons) \u00e0 la place.<\/p>\n
Pr\u00e9paration<\/h2>\n
Vous pouvez ajouter votre classe de marcheur dans vos fichiers de plug-in, vos th\u00e8mes function.php<\/code>ou tout fichier PHP inclus par functions.php<\/code>(pour un code plus propre). Vous commencez par d\u00e9finir 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 \u00e9tendant Walker_Nav_Menu<\/code>:<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n}<\/code><\/pre>\nAfin de dire \u00e0 WordPress d’utiliser notre marcheur, nous le d\u00e9finissons dans nos [wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>appels. Cette fonction est responsable de la sortie d’un menu et vous en avez probablement au moins un dans votre th\u00e8me pour le menu principal.<\/p>\nDans le tableau d’arguments, wp_nav_menu()<\/code>ajoutez un nouvel \u00e9l\u00e9ment avec la cl\u00e9 ‘walker’ et cr\u00e9ez une nouvelle instance de votre classe walker comme ceci\u00a0:<\/p>\nwp_nav_menu([\n 'theme_location' => 'primary',\n 'menu_class' => 'main-menu',\n 'container' => 'nav',\n 'container_class' => 'header__main-nav',\n 'walker' => new AWP_Menu_Walker()\n]);<\/code><\/pre>\nSi 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\u00e9cute 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.<\/p>\n
Vue d’ensemble des fonctions que nous pouvons remplacer dansWalker_Nav_Menu<\/code><\/h2>\nVoici les fonctions que vous pouvez ajouter \u00e0 votre classe de marcheur personnalis\u00e9e pour remplacer les fonctions de la classe parentaleWalker_Nav_Menu<\/code>\u00a0:<\/p>\nLes quatre premi\u00e8res sont des fonctions qui sont simplement responsables de la sortie, et elles n\u00e9cessitent toutes que vous ajoutiez \u00e0 une cha\u00eene – la premi\u00e8re variable de param\u00e8tre. Il est important de savoir que vous ne faites echo<\/code>rien ici, tout est cens\u00e9 \u00eatre construit comme une cha\u00eene.<\/p>\nniveau_d\u00e9but<\/h3>\n
La fonction start_lvl<\/code>est responsable de la sortie du HTML pour le d\u00e9but d’un nouveau niveau. En bref, il devrait sortir le fichier <ul><\/code>.<\/p>\nfunction start_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nLe premier param\u00e8tre, $output<\/code>\u2013 pass\u00e9 par r\u00e9f\u00e9rence, est la cha\u00eene \u00e0 laquelle vous ajouterez votre sortie. $depth<\/code>est un nombre entier indiquant \u00e0 quel niveau vous vous trouvez\u00a0; 0 pour le niveau sup\u00e9rieur, 1 pour l’enfant direct du niveau sup\u00e9rieur, etc. $args<\/code>est un objet de tous les arguments fournis dans wp_nav_menu()<\/code>.<\/p>\nend_lvl<\/h3>\n
La end_lvl<\/code>fonction est responsable de la sortie du HTML pour la fin d’un niveau. Ce n’est g\u00e9n\u00e9ralement que la fermeture <\/ul><\/code>.<\/p>\nfunction end_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nLes param\u00e8tres sont exactement les m\u00eames que ci- start_lvl<\/code>dessus.<\/p>\nstart_el<\/h3>\n
Cette fonction est responsable de la sortie du code HTML de chaque \u00e9l\u00e9ment. En bref, il devrait afficher le d\u00e9but <li><\/code>et la <a><\/code>balise avec le titre du lien \u00e0 l’int\u00e9rieur.<\/p>\nfunction start_el(&$output, $item, $depth=0, $args=null, $id=0) { }<\/code><\/pre>\nLe premier argument, $output<\/code>, est comme d’habitude la cha\u00eene \u00e0 laquelle vous ajouterez la sortie. Le deuxi\u00e8me argument, $item<\/code>, est l’objet de l’\u00e9l\u00e9ment de menu – et c’est l\u00e0 que vous r\u00e9cup\u00e9rerez la plupart des donn\u00e9es pour afficher l’\u00e9l\u00e9ment de menu. Si le lien de menu est un \u00e9l\u00e9ment de menu de publication, vous obtiendrez l’objet de publication ici. Quel que soit le type de menu, vous obtiendrez \u00e9galement des \u00e9l\u00e9ments utiles suppl\u00e9mentaires\u00a0; tels que classes<\/code>, url<\/code>, title<\/code>et description<\/code>.<\/p>\nLe troisi\u00e8me argument, $depth<\/code>, est un entier vous indiquant \u00e0 quel niveau nous sommes. Le niveau 0 est le niveau sup\u00e9rieur, le niveau 1 est l’enfant direct du niveau sup\u00e9rieur, et ainsi de suite. Le quatri\u00e8me argument, $args<\/code>, est un objet de tous les arguments fournis \u00e0 wp_nav_menu()<\/code>. Le cinqui\u00e8me param\u00e8tre, $id<\/code>, est l’ID de l’\u00e9l\u00e9ment de menu actuel.<\/p>\nend_el<\/h3>\n
La end_el<\/code>fonction est responsable de la sortie de la fermeture d’un \u00e9l\u00e9ment. Habituellement, il ne sortirait que la <\/li><\/code>balise.<\/p>\nfunction end_el(&$output, $item, $depth=0, $args=null) { }<\/code><\/pre>\nLes arguments pour end_el<\/code>sont les m\u00eames que start_el<\/code>ci-dessus sauf que la fonction n’a pas le cinqui\u00e8me param\u00e8tre, $id<\/code>.<\/p>\ndisplay_element<\/h3>\n
La fonction display_element<\/code>est une fonction h\u00e9rit\u00e9e de la Walker<\/code>classe g\u00e9n\u00e9rale et est la fonction responsable de la travers\u00e9e. C’est la fonction qui appelle tour \u00e0 tour toutes les fonctions ci-dessus.<\/p>\nJ’inclus ceci ici parce que dans certains cas, par exemple si vous voulez emp\u00eacher de traverser une branche enti\u00e8re, vous utiliserez cette fonction pour cela.<\/p>\n
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }<\/code><\/pre>\nLe premier argument, $element<\/code>, est l’objet de l’\u00e9l\u00e9ment de menu – c’est ce qui est transmis comme $item<\/code>dans les fonctions ci-dessus. Le deuxi\u00e8me argument, $children_elements<\/code>\u2013 pass\u00e9 par r\u00e9f\u00e9rence, contient tous les \u00e9l\u00e9ments enfants que cette fonction traversera. $max_depth<\/code>, le troisi\u00e8me argument, est un entier qui signale la profondeur \u00e0 laquelle nous devons traverser, et le quatri\u00e8me argument, $depth<\/code>, est la profondeur \u00e0 laquelle nous nous trouvons actuellement. Le cinqui\u00e8me argument, $args<\/code>, est les arguments pass\u00e9s \u00e0 la fonction qui a appel\u00e9 le marcheur (pour les menus, ce seraient les arguments fournis \u00e0 wp_nav_menu()<\/code>), et le dernier argument, $output<\/code>– pass\u00e9 par r\u00e9f\u00e9rence, est la sortie qui est transmise comme premier argument dans tous des fonctions ci-dessus.<\/p>\nModification de la sortie de chaque \u00e9l\u00e9ment<\/h2>\n
Dans l’aper\u00e7u ci-dessus, vous devriez voir que la fonction start_el()<\/code>est responsable de la sortie du HTML pour un seul \u00e9l\u00e9ment de menu. Commen\u00e7ons par remplacer cette fonction dans notre classe walker avec un exemple simple.<\/p>\nExemple: emp\u00eacher l’ajout de liens pour les \u00e9l\u00e9ments ‘#’<\/h3>\n
Assurons-nous que tous les #<\/code>liens ‘ ‘ obtiennent un <span><\/code>\u00e9l\u00e9ment au lieu d’une balise de lien, pour \u00e9viter de rafra\u00eechir la page.<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n function start_el(&$output, $item, $depth=0, $args=[], $id=0) {\n $output .= \"<li class='\". implode(\" \", $item->classes). \"'>\";\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<a href=\"'. $item->url. '\">';\n } else {\n $output .= '<span>';\n }\n\u00a0\n $output .= $item->title;\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<\/a>';\n } else {\n $output .= '<\/span>';\n }\n }\n}<\/code><\/pre>\nNous allons commencer l’\u00e9l\u00e9ment en ajoutant une <li><\/code>balise \u00e0 $output<\/code>. Nous voulons nous assurer que les classes par d\u00e9faut de WordPress (par exemple ‘menu-item’, ‘menu-item-has-children’ etc.), ainsi que les classes saisies manuellement dans l’\u00e9diteur de menu sont ajout\u00e9es \u00e0 notre \u00e9l\u00e9ment de liste. Nous collons les classes fournies sous forme de tableau en $item->classes<\/code>utilisant la fonction PHP [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>s\u00e9parant chaque \u00e9l\u00e9ment par un espace.<\/p>\nAux lignes #5-9 et #13-17, nous traitons la sortie conditionnelle de l’\u00e9l\u00e9ment d’emballage. Nous produisons une <a><\/code>balise, sauf si l’URL de l’\u00e9l\u00e9ment est ‘ #<\/code>‘, auquel cas nous fournissons une <span><\/code>balise \u00e0 la place. \u00c0 la ligne 11, nous sortons simplement le texte du lien, qui r\u00e9side dans $item->title<\/code>.<\/p>\nC’est tout ce dont nous avons besoin pour nous assurer que tous les \u00e9l\u00e9ments de menu qui ont ‘ #<\/code>‘ comme URL ne sont pas cliquables\u00a0!<\/p>\nSi vous faites cela dans un th\u00e8me stylis\u00e9, gardez \u00e0 l’esprit que vous risquez de perdre du style si le th\u00e8me a <a><\/code>directement stylis\u00e9 la balise. Vous pouvez r\u00e9soudre ce probl\u00e8me en modifiant le style et \u00e9ventuellement en ajoutant une classe \u00e0 l’\u00e9l\u00e9ment span.<\/p>\nExemple: affichage des descriptions des \u00e9l\u00e9ments de menu<\/h3>\n
Par exemple, une autre chose que vous pouvez faire ici est de sortir la description du menu. Cela existe, mais n’est pas activ\u00e9 par d\u00e9faut. Dans l’\u00e9diteur de menu WordPress, vous devez cliquer sur "Options d’\u00e9cran" en haut \u00e0 droite et cocher pour afficher "Description":<\/p>\n
![\"Apprenez](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd7d3371.png\")
<\/a><\/p>\nCela permet \u00e0 l’utilisateur d’entrer une description pour chaque \u00e9l\u00e9ment. Vous pouvez afficher cette description dans votre classe de marcheur. Supposons que vous souhaitiez uniquement afficher la description des \u00e9l\u00e9ments de niveau sup\u00e9rieur, car cela fait partie de la conception de votre th\u00e8me. Vous pouvez simplement v\u00e9rifier si le $item<\/code>a une description et si $depth<\/code>est 0, comme ceci :<\/p>\n ...\n $output .= $item->title;\n\u00a0\n if ($depth == 0 && !empty($item->description)) {\n $output .= '<span class=\"description\">'. $item->description. '<\/span>';\n }\n ...<\/code><\/pre>\nExemple\u00a0: Ajouter des carets d\u00e9roulants<\/h3>\n
Un exemple plus courant et utile consiste \u00e0 ajouter un "caret", une ic\u00f4ne qui signale que cet \u00e9l\u00e9ment de menu a un menu d\u00e9roulant (a des \u00e9l\u00e9ments enfants).<\/p>\n
![\"Apprenez](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd965e21.png\")
<\/a><\/p>\nExemple de carets en action – derri\u00e8re "Blog" et "Actualit\u00e9s"<\/p>\n