Il y a tellement de tutoriels sur le web pour expliquer « comment ajouter un champ personnalisé aux menus WordPress » mais la plupart d’entre eux traitent de la façon d’utiliser le champ CSS par défaut du champ Description par défaut. Aucun d’entre eux ne donne une vraie méthode pour ajouter un vrai nouveau champ aux menus. Donc, aujourd’hui, nous allons créer un plugin simple qui ajoutera un champ « sous-titre » à n’importe quel menu WordPress.
Voici le résultat final dans l’administration WordPress :
Étape 1 : La création du plugin
Allons-y, comme nous l’avons vu dans un de mes précédents post, créer un plugin n’est pas complexe. Il vous suffit de créer un nouveau dossier sous wp-content/plugins et de l’appeler « sweet-custom-menu », et de créer à l’intérieur de celui-ci un fichier appelé « sweet-custom-menu.php ». Ensuite, ouvrez ce fichier et ajoutez ce code :
<?php
/*
Plugin Name: Sweet Custom Menu
Plugin URL: http://remicorson.com/sweet-custom-menu
Description: A little plugin to add attributes to WordPress menus
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
Text Domain: rc_scm
Domain Path: languages
*/Ce code est tout ce dont nous avons besoin pour définir un nouveau plugin. Nous allons maintenant créer une classe PHP personnalisée contenant un constructeur et les fonctions dont nous aurons besoin pour que le plugin fonctionne correctement.
Voici comment créer la classe :
class rc_sweet_custom_menu {
/*--------------------------------------------*
* Constructor
*--------------------------------------------*/
/**
* Initializes the plugin by setting localization, filters, and administration functions.
*/
function __construct() {
} // end constructor
/* All functions will be placed here */
}
// instantiate plugin's class
$GLOBALS['sweet_custom_menu'] = new rc_sweet_custom_menu();La dernière ligne instancie la classe et ajoute la classe entière dans une variable globale.
Étape 2 : Ajout d’un filtre de champs personnalisés
Maintenant que nous avons notre classe, nous allons créer des fonctions personnalisées. La première fonction à ajouter est celle qui enregistrera le champ personnalisé « sous-titre » que nous souhaitons inclure en tant qu’attribut de menu avancé. Pour cela, voici la fonction à créer, placez ce code à la place de /* Toutes les fonctions seront placées ici */ :
/**
* Add custom fields to $item nav object
* in order to be used in custom Walker
*
* @access public
* @since 1.0
* @return void
*/
function rc_scm_add_custom_nav_fields( $menu_item ) {
$menu_item->subtitle = get_post_meta( $menu_item->ID, '_menu_item_subtitle', true );
return $menu_item;
}Ensuite, nous devons dire à WordPress de prendre en compte notre fonction, alors placez le code ci-dessous dans la fonction __construct() :
// add custom menu fields to menu
add_filter( 'wp_setup_nav_menu_item', array( $this, 'rc_scm_add_custom_nav_fields' ) );Étape 3 : Enregistrement des champs personnalisés
Même si le champ « sous-titre » personnalisé n’existe pas vraiment, nous devons créer une fonction qui enregistrera sa valeur lors de l’édition du menu. Les éléments de menu sont dans deux types de publication personnalisés, nous pouvons donc utiliser les API de type de publication personnalisée et la méthode post_meta. Ainsi, pour enregistrer la valeur du champ de menu personnalisé, ajoutez cette fonction sous rc_scm_add_custom_nav_fields() :
/**
* Save menu custom fields
*
* @access public
* @since 1.0
* @return void
*/
function rc_scm_update_custom_nav_fields( $menu_id, $menu_item_db_id, $args ) {
// Check if element is properly sent
if ( is_array( $_REQUEST['menu-item-subtitle']) ) {
$subtitle_value = $_REQUEST['menu-item-subtitle'][$menu_item_db_id];
update_post_meta( $menu_item_db_id, '_menu_item_subtitle', $subtitle_value );
}
}Dans cette fonction, nous vérifions si la valeur du champ personnalisé est envoyée depuis le formulaire que nous sommes sur le point de créer, puis nous stockons simplement sa valeur. Maintenant, nous devons ajouter la fonction au crochet approprié. Pour ce faire, ajoutez ces lignes à __construct() :
// save menu custom fields
add_action( 'wp_update_nav_menu_item', array( $this, 'rc_scm_update_custom_nav_fields'), 10, 3 );Étape 4 : Le formulaire
Si vous avez suivi ce tutoriel pas à pas, vous devinerez probablement que nous n’avons pas créé le formulaire qui doit contenir notre champ de sous-titre. Cette partie est un peu plus complexe que les précédentes. Cette fois, nous devons faire face Marcheur. Je vous encourage vraiment à lire le codex sur la classe marcheur, cela vous aidera vraiment à comprendre ce que c’est et ce qu’il fait. Au fait, il existe de nombreux excellents tutoriels partout sur Internet pour vous donner plus de détails sur ce cours, alors n’hésitez pas à les consulter ! La plupart du temps, les marcheurs sont utilisés pour modifier la sortie HTML d’un menu. Ici, nous travaillons sur le formulaire de sortie du menu admin. Ajoutez simplement cette fonction à votre classe principale :
/**
* Define new Walker edit
*
* @access public
* @since 1.0
* @return void
*/
function rc_scm_edit_walker($walker,$menu_id) {
return 'Walker_Nav_Menu_Edit_Custom';
}puis ceci au constructeur :
// edit menu walker
add_filter( 'wp_edit_nav_menu_walker', array( $this, 'rc_scm_edit_walker'), 10, 2 );Cela remplace le formulaire de menu d’édition d’administration par défaut par un formulaire personnalisé. Maintenant que le filtre est ajouté, copiez ces deux lignes en bas du fichier sweet-custom-menu.php, en dehors de la classe rc_sweet_custom_menu :
include_once( 'edit_custom_walker.php' );
include_once( 'custom_walker.php' );Nous sommes sur le point d’inclure deux fichiers. Le premier « edit_custom_walker.php » est celui qui modifiera le formulaire par défaut pour éditer le menu. C’est dans ce fichier que nous allons ajouter le champ sous-titre.
Le second est le welker utilisé sur le frontend du site, c’est le fichier qui modifiera la sortie du menu pour vos visiteurs.
Comme le « edit_custom_walker.php » est un peu long, je ne vais pas coller tout le code. Tu peux voir tout le code ici. Le seul code que j’y ai ajouté est de la ligne 174 à la ligne 185. Voici le code ajouté :
<p class="field-custom description description-wide">
<label for="edit-menu-item-subtitle-<?php echo $item_id; ?>">
<?php _e( 'Subtitle' ); ?><br />
<input type="text" id="edit-menu-item-subtitle-<?php echo $item_id; ?>" class="widefat code edit-menu-item-custom" name="menu-item-subtitle[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->subtitle ); ?>" />
</label>
</p>Si vous souhaitez ajouter des champs supplémentaires au menu, dupliquez simplement ces lignes et copiez-les-collez. Une fois cette étape terminée, le menu devrait fonctionner dans l’administration. Vous devriez maintenant pouvoir voir le nouveau champ « sous-titre » lors de l’ajout d’un nouvel élément à un menu. Si ce n’est pas le cas, faites vous suivre pas à pas le tutoriel. Il est maintenant temps de sortir la valeur des sous-titres sur le frontend.
Étape 5 : sortie de champ personnalisé
Si tout fonctionne bien dans l’administration, vous souhaiterez probablement maintenant afficher le sous-titre sur le frontend. Ouvrez custom_walker.php et ajoutez-y ce code :
<?php
/**
* Custom Walker
*
* @access public
* @since 1.0
* @return void
*/
class rc_scm_walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$prepend = '<strong>';
$append = '</strong>';
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
if($depth != 0)
{
$description = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= ' '.$item->subtitle.'</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}Ce code est assez standard. La seule chose importante ici est cette ligne:
$item_output .= ' '.$item->subtitle.'';Étape 6 : Appelez le marcheur !
Dans la dernière étape, vous devrez ouvrir le fichier header.php dans votre dossier de thème. C’est là que le menu est appelé la plupart du temps. Sinon, contactez le créateur du thème pour savoir où il s’appelle.
Trouvez le wp_nav_menu() une fonction.
Ensuite, ajoutez simplement le paramètre walker :
'walker' => new rc_scm_walkerC’est ça ! J’espère que vous avez apprécié l’ajout d’un champ personnalisé à un menu WordPress. Vous pouvez maintenant modifier un peu ce code pour ajouter d’autres champs tels que des cases à cocher, des listes déroulantes, des zones de texte etc… N’hésitez pas à ajouter un commentaire dans la section commentaires. Si vous avez trouvé un bug, si vous l’améliorez etc…
Plugin de menu personnalisé doux
Si vous cherchez à mettre en œuvre ce didacticiel, vous pouvez télécharger le « plugin Sweet Custom Menu » que j’ai créé pour vous aider à démarrer. Profitez!
