Comment créer un menu personnalisé où vous le souhaitez

WordPress intègre de nombreuses fonctionnalités pour la création de menus qui devraient convenir à la plupart des créations de sites. Cependant, dans certains cas, il est nécessaire d’aller plus loin, comme par exemple créer un menu uniquement visible pour les connectés ou selon le rôle ou groupe de l’utilisateur, voir même selon la page affichée. Vous pourrez, à l’issue de ce tutoriel, rapidement être capable de créer vos propres menus et personnaliser encore plus vos sites.

Avant toute chose, sachez qu’il est important, pour une pratique plus saine de la modification de votre WordPress, de travailler avec un thème enfant. Toutes les modifications doivent s’y dérouler.

1.  Créer un emplacement de menu
2. Créer plusieurs emplacements de menus
3.  Positionner le nouveau menu WordPress

Comment créer un emplacement de menu WordPress, la première étape !

Dans un premier temps, il va nous falloir créer un nouvel emplacement. Cette étape permet à notre site WordPress de reconnaître un nouveau positionnement fixe dans lequel il nous sera possible de créer un nouveau menu qui pourra ainsi varier du menu principal.

Rendez-vous dans votre fichier function.php de votre thème enfant et insérez cette fonction :

function register_my_menu() {
  register_nav_menu('nouveau-menu',__( 'Nouveau Menu' ));
}
add_action( 'init', 'register_my_menu' );

register_my_menu(); est une fonction native de WordPress qui permet d’enregistrer le nouvel emplacement. Dans cet exemple nous créons donc le menu nommé « Nouveau Menu », il nous apparaîtra sous ce nom, mais côté code, ce dernier sera identifié sous ne nom « nouveau-menu ». Seuls ces deux éléments peuvent être modifiés, vous permettant de donner le nom que vous désirez. Pour les plus curieux, la fonction add_action permet d’activer notre création d’emplacements au moment de l’initiation de notre site. Pour plus de détail, voyez le tuto sur les Hooks.

Pour voir à quoi sert ce code, allez jeter un œil dans les options de menu, vous verrez apparaître notre nouvel emplacement.

Créer plusieurs emplacements de menu WordPress en une seule fonction

Si vous avez dans l’idée de créer plusieurs emplacements de menu, ne dupliquez surtout pas la fonction utilisée ci-dessus. Php est un langage capricieux et déclarer plusieurs fois la même fonction entraîne un plantage pur et simple de votre affichage. Utilisez donc plutôt ceci :

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'nouveau-menu' => __( 'Nouveau Menu' ),
      'menu-plus' => __( 'Menu en plus' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Ce code compile les emplacements de menu dans un tableau, vous pouvez ajouter autant de lignes dans le array() à condition de respecter la même syntaxe pour ajouter encore plus d’emplacements.

Afficher un emplacement de menu WordPress personnalisé

Nous avons donc créé un emplacement, c’est bien beau, mais il va falloir le placer désormais. En général, les menus se trouvent dans le header. Nous allons continuer cette logique, mais sachez qu’il est possible de le mettre dans n’importe quelle autre partie du site comme le footer ou les sidebar. Allons donc dans header.php et ajoutons :

<?php
	wp_nav_menu( array( 
		'theme_location' => 'nouveau-menu', 
		'container_class' => 'class-nouveau-menu' ) ); 
?>

Ce code permet d’ajouter le nouveau menu et de lui associer une classe qui va nous permettre de plus facilement modifier son apparence en css. Pour l’instant voici à quoi cela ressemble si l’on ajoute notre menu sous celui déjà existant :

Il ne ressemble pas à grand-chose, nous allons donc lui donner une allure similaire au menu classique de ce thème. Dans style.css ajoutons :

.class-nouveau-menu ul{
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}

.class-nouveau-menu ul li{
	display: inline;
}

.class-nouveau-menu ul li a{
	padding: 1em 1.25em;
}