WordPress CMS : les menus

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.