Menu WordPress : Comment le personnaliser vous-même ?

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

emplacement menu personnalisable
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.

nouveau menu personnalisé

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 :

gestion emplacement menu

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;
}
[Total : 1    Moyenne : 5/5]

A propos de l'auteur(e)

Centre de préférences de confidentialité

Google Analytics

Google Analytics est un outil Google d'analyse d'audience Internet permettant aux propriétaires de sites Web et d'applications de mieux comprendre le comportement de leurs utilisateurs. Cet outil peut utiliser des cookies pour collecter des informations et générer des rapports sur les statistiques d'utilisation d'un site Web sans que les utilisateurs individuels soient identifiés personnellement par Google. Le cookie "__ga" est celui qui est le plus utilisé par Google Analytics.
En plus d’établir des rapports statistiques d’utilisation des sites web, Google Analytics peut également être utilisé, conjointement avec certains des cookies publicitaires décrits précédemment, pour proposer des publicités plus pertinentes sur les services Google (comme Google Search), sur l’ensemble d’Internet et pour mesurer votre interaction avec les publicités que nous affichons.

Google Analytics
_ga, _gid, _gat

Publicité Google

Google AdSense est un programme de monétisation proposé par Google aux éditeurs de sites web pour générer des revenus publicitaires à la performance. Un éditeur de site web peut adhérer gratuitement au programme et bénéficier d’affichages publicitaires sur son site en y plaçant des tags publicitaires correspondant aux formats de son choix par simple copier / coller d’un code fourni par le programme.
Google utilise des cookies pour rendre la publicité plus attractive pour les utilisateurs et plus rentable pour les éditeurs et les annonceurs. Les cookies servent ainsi également à sélectionner les publicités en fonction de leur pertinence pour l'utilisateur, à améliorer les rapports sur les performances des campagnes et à éviter la diffusion d'annonces que l'utilisateur a déjà vues.

Google AdSense
NID,SID,DSID, FLC, AID, TAID