WordPress CMS : les menus

Publié par Gui dans Tutoriels, Wordpress

Facile / Intermédiaire

Wordpress, PHP

La navigation est l’un des points les plus importants d’un bon CMS. Depuis la version 3.0, il n’a jamais été aussi facile d’utiliser les menus dans WordPress.

Il est possible de créer autant de menus qu’on veut et d’y insérer autant d’entrées que souhaitées.

Activer le support des menus

Premièrement, il faut activer l’utilisation des menus. Dans le fichier functions.php de votre thème, ajouter la ligne suivante :

add_theme_support( 'menus' );

Définir l’emplacement des menus

Première étape, il va s’agir de choisir où insérer nos menus. En règle générale, on ajoute un menu principal en haut de page, un deuxième sous menu dans une sidebar et peut être un dernier menu pour le footer.

Enregistrement d’un menu

Nous allons ensuite enregistrer nos différents menus auprès de WordPress. Toujours dans le fichier functions.php, insérez le code suivant :

register_nav_menu( 'main_navigation', 'Navigation principale' );
register_nav_menu( 'sidebar_navigation', 'Navigation secondaire' );
register_nav_menu( 'footer_navigation', 'Navigation tertiaire' );

Ceci nous permet de configurer trois zones de menus pour notre thème. On peut les visualiser dans Apparence Menus.

Insertion des menus dans le thème

Maintenant il ne reste plus qu’à insérer nos menus aux endroits où l’on souhaite les voir.

Prenons l’exemple du menu principal, nous allons l’insérer dans le fichier header.php.

<?php
if (has_nav_menu('main_navigation')){
	wp_nav_menu(
		array(
			'container' 		=> 'nav',
			'container_class' 	=> 'main-menu',
			'theme_location' 	=> 'main_navigation'
		)
	);
} else {
	// En cas d'absence de menu
}
?>

En premier lieu, nous vérifions que le menu a bien été déclaré, puis nous définissons les paramètres du menu :

  • container: définit le « wrapper » utilisé autour de la liste du menu (ie < nav >)
  • container_class : définit la classe à ajouter au container (pour le css)
  • theme_location : définit à quel zone de menu se rattacher

theme_location est l’option la plus importante, car c’est elle qui va définir la zone à laquelle rattacher ce menu (préalablement déclaré avec register_nav()).

Il en va de même pour les autres menus (sidebar et footer).

Créer les menus et ajouter des entrées

Nos menus bien enregistrés, il suffit de se rendre dans la page d’administration des menus pour créer les différents menus.

Pour cela il suffit de créer trois menus dans la zone de droite en spécifiant un nom puis de les associer aux zones que nous avons définies (Navigation Principale, Secondaire et Tertiaire), dans la zone de gauche.

Ensuite, il n’y a plus qu’à ajouter des entrées au menu via drag & drop.

Pour ajouter une description à un menu, pensez à afficher le champ description, caché par défaut, dans les options de l’écran.

Modifier le code html d’un menu

Il est possible de modifier le code HTML généré par WordPress par défaut pour un menu.

Pour cela, il faut rajouter une option lors de l’insertion du menu :

wp_nav_menu(
	array(
		'walker' => new description_walker()
	)
);

Ensuite il faut surcharger la classe description_walker avec la méthode start_el dans notre fichier functions.php, par exemple avec :

class description_walker extends Walker_Nav_Menu
{
	function start_el(&$output, $item, $depth, $args)
	{
		global $wp_query, $themename;
		$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        ) .'"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'><span class="icon"></span>';
		$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
		$item_output .= "</a>";
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Plus d’informations ici : http://codex.wordpress.org/Function_Reference/Walker_Class

Modifier les classes css du menu

Il est également possible d’ajouter des classes CSS à une entrée de menu en utilisant le hook nav_menu_css_class :

add_filter('nav_menu_css_class', 'add_custom_classes');

function add_custom_classes($classes, $item)
{
    if($item->title == "Blog")
	{
        $classes[] = "my_custom_class";
    }

    return $classes;
}

Conclusion

A partir de là, vous pouvez créer autant de menus que vous le souhaitez, et les placer à l’endroit que vous désirez dans votre thème.

14 commentaires

  1. Julien P.

    Merci pour ce très bon tuto qui m’a permis de bien démarrer un nouveau projet WordPress à l’agence 😉
    Je me permet de signaler une petite coquille qui m’a fait un joli bug quand j’ai copié/collé :
    wp_nav_menu(
    array(
    ‘container’ => ‘nav';
    ‘container_class’ => ‘main-menu’,
    ‘theme_location’ => ‘main_navigation’
    )
    );

    A+ 😉

    • kwykwy

      Bonjour,

      J’ai un bug à ce niveau là également mais je n’arrive pas à régler le problème … Quelle est l’erreur s’il vous plaît ?

      Merci d’avance pour votre aide.

      • samsoul

        Dans :
        ‘container’ => ‘nav’;

        tu enlèves le point virgule en fin de ligne et tu le remplace par une virgule

      • Gui
  2. Xavier

    Bonjour,
    Comment utiliser Walker menu dans un plugin, plutot qu’un theme ?
    Merci

  3. Marcel

    bonjour
    j’essaye de transformer mon site html en php avec wordpress
    j’ai un méga menu utilisant ul li avec du css. je débute avec wordpress est-il possible de transposé ce menu dans l’endroit du menu wordpress?
    mon site est http://www.vendee-courses.com
    je vais essayer de faire avec ton tuto mais je n’ai pas tout compris
    il faudrat que je teste pour voir ?
    merci pour cette explication qui me semble bien obscur pour l’instant

  4. Marine

    Bonjour, j’ai réussi à intégrer un footer menu dans mon thème qui n’en avait pas, super :-) Mais je n’arrive pas à ajouter WPML. Je voulais faire un top menu, mettre mes drapeaux de langues dedans mais je ne sais pas trop où intégrer le code php dans mon header (j’ai essayé pls endroits en vain).

    Voici le header, merci de votre aide !
    Bonne soirée
    Marine

    <?php
    /**
    * The Header for our theme.
    *
    * Displays all of the section and everything up till
    *
    * @package web2feel
    */
    ?>
    <html >

    <meta charset=" »>

    <link rel="pingback" href=" »>

    <body >

    optionsName . ‘_logo’,  ») !=  ») { ?>
    <a class="mylogo" rel="home" href="/ » title= » »><img relWidth="optionsName . ‘_maxWidth’, 0)); ?> » relHeight= »optionsName . ‘_maxHeight’, 0)); ?> » id= »ft_logo » src= »optionsName . ‘_logo’,  »); ?> » alt= » » />

    <a id="blogname" rel="home" href="/ » title= » »>

    ‘primary’ ) ); ?>

    ‘primary’ ) ); ?>

  5. Marine

    Ah le post est limité en caractères, voici juste la bonne zone :

    optionsName . ‘_logo’,  ») !=  ») { ?>
    <a class="mylogo" rel="home" href="/ » title= » »><img relWidth="optionsName . ‘_maxWidth’, 0)); ?> » relHeight= »optionsName . ‘_maxHeight’, 0)); ?> » id= »ft_logo » src= »optionsName . ‘_logo’,  »); ?> » alt= » » />

    <a id="blogname" rel="home" href="/ » title= » »>

    ‘primary’ ) ); ?>

    ‘primary’ ) ); ?>

  6. Marine

    Ca marche pas, comment puis je vous montrer le code, mon site est encore en local…

  7. sandrine

    Bonjour,

    Et merci pour votre article !
    J’ai un souci de menu sur un site que je développe. Le sous-menu reste constamment affiché au lieu de n’apparaitre qu’au survol.
    C’est un thème que je développe moir même, j’ai peut être oublié quelque chose ?

    C’est ici : http://www.brunothievet.com

    Merci encore

  8. Johnf634

    I’m pleased that I seen this website, precisely the proper information that I was trying to find! fbcfekeeecde

  9. پاپ آپ

    بهترین سایت پاپ آپ در ایران

  10. paris depannage

    Très bon tuto qui m’a aider !

  11. Fore Prime Seo

    It would be great if you could update it to 2017 wordpress

Laisser une réponse


Post shadow