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’eux ne donne une vraie méthode pour ajouter un vrai nouveau champ aux menus. Donc, aujourd’hui, nous allons créer un simple plugin qui ajoutera un champ «sous-titre» à n’importe quel menu WordPress.

Voici quel est le résultat final dans l’administration WordPress:

Étape 1: La création du plugin

Allons-y, comme nous l’avons vu dans l’un de mes articles précédents, 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 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 voulons inclure comme attribut de menu avancé. Pour ce faire, 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ées et la méthode post_meta. Donc, 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. Nous devons maintenant ajouter la fonction au hook 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 pas à pas ce tutoriel, 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 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 d’administration. 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';

}

et 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 par défaut du menu d’édition de l’administrateur 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 de 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. Vous pouvez voir le code complet ici. Le seul code que j’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 d’autres champs au menu, dupliquez simplement ces lignes et copiez-collez-les. Une fois cette étape effectué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 le tutoriel pas à pas. Il est maintenant temps de sortir la valeur des sous-titres sur le frontend.

Étape 5: Sortie de champ personnalisé

Si tout fonctionne correctement dans l’administration, vous souhaitez probablement maintenant afficher le sous-titre sur le frontend. Ouvrez custom_walker.php et ajoutez 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 la plupart du temps, le menu est appelé. Sinon, contactez le créateur du thème pour savoir où il est appelé.

Trouvez le wp_nav_menu () fonction.

Ensuite, ajoutez simplement le paramètre walker:

'walker' => new rc_scm_walker

C’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 les cases à cocher, sélectionner la liste déroulante, les 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 “Sweet Custom Menu Plugin” que j’ai créé pour vous aider à démarrer. Prendre plaisir!

Obtenez le plugin →

Share: