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

Le menu d'un site internet est souvent négligé lors de la conception d'un site. Cela peut être dû au fait qu'il a toujours été techniquement difficile de le personnaliser. Cela a maintenant changé avec WordPress 5.4 qui a introduit de nouveaux crochets qui vous permettront d'ajouter relativement facilement des champs personnalisés à un menu WordPress.

Les crochets en question sont les crochets d'action wp_nav_menu_item_custom_fields et wp_nav_menu_item_custom_fields_customize_template . Grâce à ceux-ci, vous pouvez désormais facilement ajouter vos propres champs personnalisés aux éléments de menu à la fois dans la page d'édition du menu Admin et dans le panneau des options de personnalisation.

Dans cet article, nous allons examiner quelques façons simples d'utiliser le crochet wp_nav_menu_item_custom_fields pour ajouter vos propres champs personnalisés aux éléments de menu, ainsi que jeter un œil à deux plugins qui peuvent également être utilisés pour ajouter des champs personnalisés sans avoir à coder .

Allons-y.

Le crochet de champ personnalisé du menu WordPress

Le crochet wp_nav_menu_item_custom_fields est spécifique à l'écran Menu et est décrit comme suit :

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );

• L'entier $id est l'ID de l'élément de menu
• L'objet $menu_item est l'objet de données de l'élément de menu
• L'entier $depth est la profondeur de l'élément de menu
• Le $args est l'objet des arguments des éléments de menu

Le hook se déclenche juste avant les boutons de déplacement d'un élément de menu de navigation dans l'éditeur de menu et est introduit dans le fichier wp-admin/includes/class-walker-nav-menu-edit.php autour de la ligne 242.

Vous pouvez le démontrer en pratique avec un exemple très simple. Ouvrez le fichier functions.php de votre thème actif et ajoutez ce morceau de code :

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

Maintenant, si vous allez dans la page d'administration de l'édition du menu, vous verrez la chaîne en écho sous chaque élément de menu, comme indiqué dans la capture d'écran ci-dessous.

Bien sûr, cela n'a aucune fonctionnalité mais montre comment il est possible de modifier le menu. Essayons maintenant quelque chose de plus utile en ajoutant quelques fonctionnalités simples sous la forme d'un champ personnalisé.

Ajouter un champ personnalisé d'élément de menu WordPress à l'aide de code

Dans cet exemple, nous allons créer un champ personnalisé de menu WordPress qui nous permet d'insérer une description dans n'importe quel élément de menu.

Première étape : ajouter la sortie

Pour commencer, nous allons d'abord créer la fonction de rappel qui affichera le champ de saisie où l'utilisateur administrateur pourra remplir la description. Voici le code pour faire ceci :

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

Ajoutez ce code à votre fichier functions.php et enregistrez-le. Maintenant, si vous vous reconnectez à la zone d'administration de votre site Web WordPress et ouvrez l'écran Menus, vous devriez voir votre champ affiché. Dans notre cas, nous l'avons appelé "Description de l'élément". Vous êtes bien sûr libre de modifier le code ci-dessus pour nommer votre champ comme bon vous semble. N'oubliez pas qu'il doit s'agir d'un nom unique.

Deuxième étape : enregistrer votre entrée

Ensuite, nous allons insérer le morceau de code ci-dessous qui mettra à jour la valeur du champ dans la méta-table de publication de la base de données, ce qui signifie que notre entrée sera enregistrée.

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

Avec ce code enregistré dans votre fichier functions.php , vous pouvez retourner dans votre administrateur WordPress, ouvrir un élément de menu et ajouter une description au champ. Ensuite, dirigez-vous vers votre base de données phpMyAdmin et vous devriez pouvoir voir l'entrée dans la table de la méta-base de données post.

Si vous modifiez la valeur dans l'administrateur du menu, cela devrait être reflété dans la base de données. De même, si vous supprimez la valeur, elle devrait disparaître complètement.

Troisième étape : afficher la valeur du champ de menu

Ensuite, nous montrerons comment nous pouvons récupérer nos données de champs de menu enregistrées et les afficher dans le menu frontal en utilisant la fonction get_post_meta et le crochet nav_menu_item_title . Ajoutez le code suivant ci-dessous à votre fichier functions.php .

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

Le crochet nav_menu_item_title filtre le titre d'un élément de menu et se trouve dans le fichier wp-includes/class-walker-nav-menu.php autour de la ligne 225.

Il accepte 4 paramètres, la chaîne de titre de l'élément de menu, l'élément de menu actuel, un objet d'arguments wp_nav_menu() et un entier qui est la profondeur de l'élément de menu.

Vous devriez maintenant voir la description sous le titre de l'élément de menu et, en utilisant le CSS approprié, vous pouvez bien sûr le personnaliser en fonction de votre site Web.

Ajouter un champ personnalisé d'élément de menu WordPress à l'aide d'un plugin

Si vous ne voulez pas vous perdre dans l'écriture de code afin d'ajouter un champ personnalisé à votre menu WordPress, alors bonne nouvelle… il existe des plugins qui peuvent le faire pour vous.

Champs personnalisés avancés

Le plugin Advanced Custom Fields extrêmement populaire et toujours polyvalent démontre une fois de plus sa puissance ici avec la possibilité d'ajouter des champs personnalisés au menu WordPress.

Après l'avoir installé et activé, ouvrez le plugin, puis cliquez sur le bouton "Ajouter un nouveau" pour ajouter vos champs. Sélectionnez « Élément de menu » sous les règles de localisation. Suivez les instructions et mettez à jour les champs si nécessaire.

Une fois que vous avez publié le champ, vous pouvez vous diriger vers votre menu WordPress depuis la zone d'administration pour voir le nouveau champ que vous avez créé. Plutôt facile!

Champs personnalisés du menu WP

Le plugin WP Menu Custom Fields est un plugin relativement nouveau qui, comme son nom l'indique, vous aidera à ajouter des champs personnalisés à vos éléments de menu. Vous pouvez ajouter un texte personnalisé, une image, un shortcode ou un code HTML personnalisé.

Plutôt que de créer des éléments de menu personnalisés via une interface de plug-in dédiée (comme vous le faites avec les champs personnalisés avancés), WP Menu Custom Fields ajoute à la place des options modifiables directement à n'importe quel élément de menu dans la zone d'édition du menu d'administration.

C'est assez explicite à utiliser et c'est un moyen simple et agréable d'ajouter des champs personnalisés et d'autres contenus à vos éléments de menu. La documentation du plugin fournit également les crochets du plugin que vous pouvez utiliser pour personnaliser davantage le code HTML généré pour chaque fonctionnalité.

Conclusion

L'ajout de champs personnalisés aux menus WordPress peut être très utile et peut vous aider à améliorer cette zone souvent négligée de votre site Web. Si vous êtes un codeur confiant, l'utilisation des nouveaux crochets fournis dans WordPress 5.4 devrait s'avérer relativement facile, tandis que les non-codeurs peuvent tirer le meilleur parti des plugins disponibles pour accomplir cette tâche.

Voir également

• Ajout de champs aux éléments de menu WordPress – Plugin personnalisé