Ajouter des méta-paramètres personnalisés conviviaux aux éléments de menu WordPress

Dans une récente mise à jour de WordPress, il est désormais possible et assez simple d’ajouter des méta-champs personnalisés aux éléments de menu. Dans cet article, nous apprendrons comment ajouter nos paramètres personnalisés aux éléments de menu, mettre à jour leurs paramètres et enfin comment utiliser les métadonnées utilisées.

Récemment, WordPress a annoncé la prise en charge de l’ajout de champs personnalisés aux éléments de menu dans la version 5.4. Deux nouvelles actions ont été ajoutées qui permettent aux développeurs d’ajouter des champs personnalisés dans la page d’administration du menu WordPress et dans l’éditeur de menu de Customizer. Dans cet article, nous allons nous concentrer sur l’un d’entre eux, celui de la page d’administration du menu WordPress.

Avec ce changement, il n’est plus nécessaire de forcer les utilisateurs de thèmes ou de plug-ins à se souvenir et à taper les noms de classe pour activer les "paramètres" des éléments de menu. Cela a jusqu’à présent été un processus courant pour des choses comme faire en sorte qu’un élément de menu ressemble à un bouton ou un commutateur entre différentes conceptions de liste déroulante. Souvent en combinaison avec un menu déroulant personnalisé.

Gardez à l’esprit que pour que ce code fonctionne, la version minimale de WordPress 5.4.0 est requise.

Ce que nous allons faire dans ce tutoriel

Avec le nouveau crochet vers les éléments de menu et la prise en charge par WordPress de l’ajout de métadonnées aux éléments de menu, il n’y a vraiment aucune limite quant au type de paramètres que vous souhaitez. Le processus dépend de votre résultat final. Dans la plupart des cas, l’ajout d’une classe CSS personnalisée à l’élément de menu est suffisant.

Pour rester simple, nous ajouterons dans cet article une case à cocher intitulée "Afficher en tant que bouton". Dans notre thème, nous avons un CSS qui stylisera un élément de menu pour qu’il ressemble à un bouton (appel à l’action) si l’élément a une certaine classe. Au lieu de forcer l’utilisateur du thème à saisir la classe CSS "menu-item-button" dans le champ de classe CSS de l’élément de menu dans l’administration, nous lui proposons une case à cocher conviviale.

À la fin de cet article, vous trouverez quelques idées d’autres actions et filtres à utiliser si vous souhaitez faire plus que simplement ajouter une classe CSS.

Commençons!

Ajout de champs personnalisés aux éléments de menu

Le nouveau crochet récemment ajouté est [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). C’est un crochet qui se déclenche juste au-dessus des boutons de déplacement d’un élément de menu ;

Le crochet est livré avec pas moins de cinq paramètres. Dans cet article, nous ferons des choses qui ne nécessitent que les deux premiers.

• item_id: ID de l’élément de menu actuel
• item: objet de données d’élément de menu
• depth: profondeur de l’élément de menu dans le menu, exprimée sous la forme d’un nombre entier
• args: Un objet d’arguments d’élément de menu
• nav_id: L’identifiant du menu de navigation

Toutes les entrées ajoutées dans ce hook doivent avoir un nameattribut (car l’éditeur de menu est un formulaire). L’attribut name peut être nommé comme vous le souhaitez, mais il doit être unique et vous devez ajouter l’ID de l’élément de menu (premier paramètre) entre parenthèses. Par exemple name="my-custom-field[<item ID>]". C’est ainsi que procèdent les autres paramètres d’élément de menu standard.

Commençons par un exemple d’ajout d’une case à cocher pour faire ressembler l’élément de menu à un bouton lorsque le menu est placé en tant que menu principal. Nous nous accrocherons wp_nav_menu_item_custom_fieldsuniquement aux deux premiers paramètres et procéderons comme suit :

add_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {
    $show_as_button = get_post_meta($item_id, '_show-as-button', true);
    ?>
    <p class="awp-show-as-button description description-wide">
        <label for="awp-menu-item-button-<?php echo $item_id; ?>" >
            <input type="checkbox" 
                id="awp-menu-item-button-<?php echo $item_id; ?>" 
                name="awp-menu-item-button[<?php echo $item_id; ?>]" 
                <?php checked($show_as_button, true); ?> 
            /><?php _e('Show as a button', 'awp'); ?>
        </label>
    </p>
    <?php
}, 10, 2);

À la ligne, #2nous récupérons la valeur actuelle de notre élément de menu meta. Les éléments de menu utilisent la post-méta, nous utilisons donc [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()celle que vous connaissez probablement déjà. Nous stockons les métadonnées de l’élément de menu par la clé ‘ _show-as-button‘.

Ensuite, il s’agit de faire écho à du bon HTML. Le code ci-dessus utilise certaines des classes déjà utilisées pour les éléments de menu afin de le rendre agréable sans ajouter de style personnalisé (une pbalise avec les classes " description description-wide").

Les parties importantes se produisent à la ligne #8et #9. Nous suivons la règle de l’attribut name, en ajoutant le $item_identre parenthèses, et nous nous assurons que la valeur enregistrée actuelle est reflétée dans la case à cocher. Vous pouvez ajouter n’importe quel type d’entrées, et même plusieurs entrées ici. N’oubliez pas de fournir l’ nameattribut approprié et de définir correctement leur valeur actuelle.

Avec ce code dans le code de votre thème functions.phpou plugin, vous devriez maintenant obtenir une nouvelle case à cocher pour tous les éléments de menu :

Actuellement, cela ne sauve pas notre champ. C’est la prochaine étape.

Mise à jour des champs personnalisés

Afin de mettre à jour les champs personnalisés sur les éléments de menu, nous utilisons le hook [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Il est livré avec trois arguments mais nous n’avons besoin que du second qui est l’ID de l’élément de menu.

La manière dont vous gérez la sauvegarde de la valeur de vos entrées dépend de vous. J’ai choisi d’enregistrer simplement ‘ _show-as-button‘ comme vrai ou faux. Utilisez simplement [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()et/ou [delete_post_meta](https://developer.wordpress.org/reference/functions/delete_post_meta/)().

add_action('wp_update_nav_menu_item', function($menu_id, $menu_item_db_id) {
    $button_value = (isset($_POST['awp-menu-item-button'][$menu_item_db_id]) && $_POST['awp-menu-item-button'][$menu_item_db_id] == 'on')? true: false;
    update_post_meta($menu_item_db_id, '_show-as-button', $button_value);
}, 10, 2);

Dans le code ci-dessus, je récupère la valeur du champ personnalisé par son nom dans le $_POSTtableau. Puisqu’il s’agit d’une case à cocher, soit elle n’existera pas dans le $_POSTtableau (non cochée), soit elle sera renvoyée sous la forme ‘ on‘. Je mets ensuite à jour la clé méta ‘ _show-as-button‘ comme vraie ou fausse.

Avec le code ci-dessus, vous devriez voir que votre champ se met à jour correctement lors de l’enregistrement du menu.

La prochaine étape consiste à faire quelque chose à propos de nos métadonnées personnalisées. Et la façon dont vous vous y prenez dépend de votre résultat final. Comme pour notre exemple, tout ce que nous devons faire est d’ajouter une classe personnalisée à l’élément de menu.

Mettre à jour la classe CSS de l’élément de menu

WordPress propose un filtre sur les classes de l’élément de menu: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Tout ce que nous avons à faire est d’ajouter une classe personnalisée au tableau par ce filtre si notre méta personnalisée est true. Nous utilisons [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()pour obtenir la valeur de ‘ _show-as-button‘ et si c’est vrai, nous ajoutons la classe CSS ‘ menu-item-button‘ :

add_filter('nav_menu_css_class', function($classes, $menu_item) {
    $show_as_button = get_post_meta($menu_item->ID, '_show-as-button', true);
    if ($show_as_button) {
        $classes[] = 'menu-item-button';
    }
    return $classes;
}, 10, 2);

Le nav_menu_css_classfiltre est livré avec un total de quatre arguments, y compris les arguments de menu et la profondeur de l’élément de menu. Si nécessaire, vous pouvez faire en sorte que les noms de classe soient affectés par ces valeurs. Par exemple, cela n’aurait généralement pas de sens de transformer un élément de menu en bouton à moins qu’il ne se trouve au niveau supérieur (et non à l’intérieur d’un menu déroulant).

Avec le code ci-dessus, vous devriez maintenant voir que tout élément de menu qui a coché "Afficher en tant que bouton" obtiendra la classe ‘ menu-item-button‘.

Gardez à l’esprit: vous pouvez constater que le nav_menu_css_classfiltre n’est pas appliqué si le menu utilise un explorateur de menu personnalisé qui contient par exemple la méthode start_el(). Le marcheur doit appliquer le nav_menu_css_classfiltre sur les classes de l’élément de menu (en utilisant apply_filters()) pour que le filtre ci-dessus fonctionne !

Autres utilisations des champs méta personnalisés des éléments de menu

Comme mentionné, le processus d’utilisation des champs personnalisés dépend du résultat final. Il est difficile de faire un post qui couvre toutes les possibilités. Mais cela devrait au moins vous donner des idées. L’exemple ci-dessus montre comment ajouter simplement une classe personnalisée à l’élément de menu.

Dans d’autres cas, vous voudrez peut-être prendre l’avance des métadonnées dans un menu déroulant. Dans la plupart des fonctions d’un navigateur de menu, vous avez accès à l’ID de l’élément de menu et vous pouvez ainsi facilement récupérer les métadonnées.

Une alternative à l’utilisation d’un explorateur de menu personnalisé, vous pouvez utiliser le filtre [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)pour plus de contrôle sur l’objet de l’élément de menu.

Ou vous pouvez utiliser le filtre [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/)pour exclure, par exemple, des éléments de menu, si votre paramètre est de limiter la visibilité des éléments de menu.