Avec ce changement, il n’est plus n\u00e9cessaire de forcer les utilisateurs de th\u00e8mes ou de plug-ins \u00e0 se souvenir et \u00e0 taper les noms de classe pour activer les "param\u00e8tres" des \u00e9l\u00e9ments de menu. Cela a jusqu’\u00e0 pr\u00e9sent \u00e9t\u00e9 un processus courant pour des choses comme faire en sorte qu’un \u00e9l\u00e9ment de menu ressemble \u00e0 un bouton ou un commutateur entre diff\u00e9rentes conceptions de liste d\u00e9roulante. Souvent en combinaison avec un menu d\u00e9roulant personnalis\u00e9.<\/p>\n
Gardez \u00e0 l’esprit que pour que ce code fonctionne, la version minimale de WordPress 5.4.0 est requise.<\/p>\n
Ce que nous allons faire dans ce tutoriel<\/h2>\n
Avec le nouveau crochet vers les \u00e9l\u00e9ments de menu et la prise en charge par WordPress de l’ajout de m\u00e9tadonn\u00e9es aux \u00e9l\u00e9ments de menu, il n’y a vraiment aucune limite quant au type de param\u00e8tres que vous souhaitez. Le processus d\u00e9pend de votre r\u00e9sultat final. Dans la plupart des cas, l’ajout d’une classe CSS personnalis\u00e9e \u00e0 l’\u00e9l\u00e9ment de menu est suffisant.<\/p>\n
Pour rester simple, nous ajouterons dans cet article une case \u00e0 cocher intitul\u00e9e "Afficher en tant que bouton". Dans notre th\u00e8me, nous avons un CSS qui stylisera un \u00e9l\u00e9ment de menu pour qu’il ressemble \u00e0 un bouton (appel \u00e0 l’action) si l’\u00e9l\u00e9ment a une certaine classe. Au lieu de forcer l’utilisateur du th\u00e8me \u00e0 saisir la classe CSS "menu-item-button" dans le champ de classe CSS de l’\u00e9l\u00e9ment de menu dans l’administration, nous lui proposons une case \u00e0 cocher conviviale.<\/p>\n
\u00c0 la fin de cet article, vous trouverez quelques id\u00e9es d’autres actions et filtres \u00e0 utiliser si vous souhaitez faire plus que simplement ajouter une classe CSS.<\/p>\n
Commen\u00e7ons!<\/p>\n
Ajout de champs personnalis\u00e9s aux \u00e9l\u00e9ments de menu<\/h2>\n
Le nouveau crochet r\u00e9cemment ajout\u00e9 est Le crochet est livr\u00e9 avec pas moins de cinq param\u00e8tres. Dans cet article, nous ferons des choses qui ne n\u00e9cessitent que les deux premiers.<\/p>\n Toutes les entr\u00e9es ajout\u00e9es dans ce hook doivent avoir un Commen\u00e7ons par un exemple d’ajout d’une case \u00e0 cocher pour faire ressembler l’\u00e9l\u00e9ment de menu \u00e0 un bouton lorsque le menu est plac\u00e9 en tant que menu principal. Nous nous accrocherons \u00c0 la ligne, Ensuite, il s’agit de faire \u00e9cho \u00e0 du bon HTML. Le code ci-dessus utilise certaines des classes d\u00e9j\u00e0 utilis\u00e9es pour les \u00e9l\u00e9ments de menu afin de le rendre agr\u00e9able sans ajouter de style personnalis\u00e9 (une Les parties importantes se produisent \u00e0 la ligne [wp_nav_menu_item_custom_fields](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/)<\/code>. C’est un crochet qui se d\u00e9clenche juste au-dessus des boutons de d\u00e9placement d’un \u00e9l\u00e9ment de menu ;<\/p>\n![\"Ajouter](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e51560662d6.png\")
<\/a><\/p>\n\n
item_id<\/code>: ID de l’\u00e9l\u00e9ment de menu actuel<\/li>\nitem<\/code>: objet de donn\u00e9es d’\u00e9l\u00e9ment de menu<\/li>\ndepth<\/code>: profondeur de l’\u00e9l\u00e9ment de menu dans le menu, exprim\u00e9e sous la forme d’un nombre entier<\/li>\nargs<\/code>: Un objet d’arguments d’\u00e9l\u00e9ment de menu<\/li>\nnav_id<\/code>: L’identifiant du menu de navigation<\/li>\n<\/ul>\nname<\/code>attribut (car l’\u00e9diteur de menu est un formulaire). L’attribut name peut \u00eatre nomm\u00e9 comme vous le souhaitez, mais il doit \u00eatre unique et vous devez ajouter l’ID de l’\u00e9l\u00e9ment de menu (premier param\u00e8tre) entre parenth\u00e8ses. Par exemple name=\"my-custom-field[<item ID>]<\/code>". C’est ainsi que proc\u00e8dent les autres param\u00e8tres d’\u00e9l\u00e9ment de menu standard.<\/p>\nwp_nav_menu_item_custom_fields<\/code>uniquement aux deux premiers param\u00e8tres et proc\u00e9derons comme suit\u00a0:<\/p>\nadd_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {\n $show_as_button = get_post_meta($item_id, '_show-as-button', true);\n ?>\n <p class=\"awp-show-as-button description description-wide\">\n <label for=\"awp-menu-item-button-<?php echo $item_id; ?>\" >\n <input type=\"checkbox\" \n id=\"awp-menu-item-button-<?php echo $item_id; ?>\" \n name=\"awp-menu-item-button[<?php echo $item_id; ?>]\" \n <?php checked($show_as_button, true); ?> \n \/><?php _e('Show as a button', 'awp'); ?>\n <\/label>\n <\/p>\n <?php\n}, 10, 2);<\/code><\/pre>\n#2<\/code>nous r\u00e9cup\u00e9rons la valeur actuelle de notre \u00e9l\u00e9ment de menu meta. Les \u00e9l\u00e9ments de menu utilisent la post-m\u00e9ta, nous utilisons donc [get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>celle que vous connaissez probablement d\u00e9j\u00e0. Nous stockons les m\u00e9tadonn\u00e9es de l’\u00e9l\u00e9ment de menu par la cl\u00e9 ‘ _show-as-button<\/code>‘.<\/p>\np<\/code>balise avec les classes " description description-wide<\/code>").<\/p>\n#8<\/code>et #9<\/code>. Nous suivons la r\u00e8gle de l’attribut name, en ajoutant le $item_id<\/code>entre parenth\u00e8ses, et nous nous assurons que la valeur enregistr\u00e9e actuelle est refl\u00e9t\u00e9e dans la case \u00e0 cocher. Vous pouvez ajouter n’importe quel type d’entr\u00e9es, et m\u00eame plusieurs entr\u00e9es ici. N’oubliez pas de fournir l’ name<\/code>attribut appropri\u00e9 et de d\u00e9finir correctement leur valeur actuelle.<\/p>\n
![\"Ajouter](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e5156147558.png\")
<\/a><\/p>\n![\"Ajouter](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e515621cd00.png\")
<\/a><\/p>\n