Ajouter une nouvelle zone de menu à un thème WordPress

Vous avez enfin trouvé le thème WordPress idéal mais une ombre se dessine au tableau : il vous permet de créer seulement un menu (une seule navigation). Vous auriez bien aimé pouvoir ajouter un nouveau menu à votre thème, par exemple dans le footer de votre site ?

Pas de problème, le CMS WordPress permet de faire cela aisément. Voyons ensemble comment ajouter une nouvelle zone de menu à votre thème…

 

Pourquoi ajouter une nouvelle zone de menu à WordPress ?

Il est certain que vous pourriez tout à fait modifier l’apparence d’un fichier de votre thème avec du code écrit en dur et des liens que vous insèreriez dans une zone propice comme dans le footer, si on reprend cet exemple. Cette méthode peut faire l’affaire mais signifie également que ce code ne pourra pas être accessible depuis l’administration de votre site, si vous avez des changements à effectuer, vous devrez alors éditer le fichier en question.

L’option d’ajouter une nouvelle zone de menu dans votre thème vous permettra de modifier les éléments qui composent la navigation par un simple glissé-déposé directement depuis l’onglet adéquat (Apparence > Menu). Cette méthode sera alors plus saine et surtout pourra être accessible par d’autres administrateurs de votre site.

 

Comment ajouter une nouvelle zone de menu ?

Cela n’est pas très compliqué, nous avions déjà abordé le sujet lors d’un précédent article concernant la création de pages personnalisées… Revenons sur cette méthode plus en détails et pour cela vous aurez besoin:

• de créer un thème enfant, si ce n’est pas déjà le cas,
• d’avoir un accès aux fichiers du thème parent,
• d’un éditeur de texte,
• d’un FTP.

 

1. Enregistrez votre nouvelle navigation dans le fichier functions.php

Pour commencer, vous devrez éditer le fichier functions.php contenu dans le dossier de votre thème enfant. Vous le trouverez dans les dossiers de votre site à www > wp-content > themes > votre-theme-enfant > functions.php

Ouvrez ce fichier et ajoutez le code ci-dessous :

//ajouter une nouvelle zone de menu à mon thème
function register_my_menu() {
  register_nav_menu('footer-menu',__( 'Menu Footer' ));
}
add_action( 'init', 'register_my_menu' );

Ce morceau de code va permettre à votre thème d’enregistrer et de faire apparaitre un nouvel emplacement de menu dans le back-office, c’est à dire à l’onglet Apparence > Menu. Pour cet exemple, ce nouveau menu s’appellera Menu Footer.

Toutefois, ce code n’est valable que si vous souhaitez ajouter une seule nouvelle navigation, si vous ajoutez plusieurs menus à la suite avec une succession de ce même code, vous aurez obtiendrez une erreur.

 

Donc, si vous souhaitez ajouter plusieurs nouvelles navigations, vous devrez passer par la création d’un “tableau” (array) avec le code suivant :

// s'il y a plusieurs menus à rajouter, voici le code :
function register_my_menus() {
 register_nav_menus(
 array(
 'private-menu' => __( 'Menu Privé' ),
 'footer-menu' => __( 'Menu Footer' ),
 )
 );
}
add_action( 'init', 'register_my_menus' );

Avec ce nouveau code, votre thème enregistrera deux nouvelles zones de menus : l’une nommée Menu Privé et l’autre nommée Menu Footer. Avec cette méthode, vous pouvez créer autant de menus que vous le souhaitez et vous pourrez les nommer comme bon vous semble.

À présent, vous pouvez sauvegarder votre fichier functions.php et le renvoyer par FTP dans le dossier de votre thème enfant.

 

2. Créez votre nouveau menu.

 

Comme à votre habitude, rendez-vous à l’onglet Apparence > Menu pour créer un nouveau menu et y ajouter les éléments qui le composeront (pages, catégories, liens etc.). Avant de sauvegarder, veillez à bien assigner l’emplacement de cette nouvelle navigation : pour mon exemple, ce sera le Menu Footer (celui créé à l’étape 1).

 

3. Faites apparaitre votre nouvelle navigation.

En effet, pour l’instant, votre thème a bien pris en compte votre nouvelle navigation, vous avez bien créé votre nouveau menu mais il va falloir que ce dernier apparaisse.

L’idée est que ce menu pourrait s’afficher n’importe où, c’est vous qui décidez : au dessus du header, sur une page spécifique, dans vos articles, dans le footer, dans la sidebar etc. Il faudra simplement modifier le fichier désiré.

Pour mon exemple, j’ai décidé de faire apparaitre ma nouvelle navigation dans le footer de mon site. J’ai donc dupliqué le fichier footer.php du thème parent pour l’ajouter dans le dossier de mon thème enfant.

 

Pour faire apparaitre la nouvelle navigation, vous devrez ajouter ce code à l’endroit désiré dans le fichier à modifier :

<?php 
 wp_nav_menu ( array (
 'theme_location' => 'footer-menu' ,
 'menu_class' => 'my-footer-menu', 
 ) ); ?>

Ce simple bout de code fonctionne mais vous pourriez très bien aller plus loin en ajoutant une condition telle que “si le Menu Footer existe, alors, affiche-le”. Le code utilisé serait alors :

 <?php
 if ( has_nav_menu( 'footer-menu' ) ) : ?>
 <?php 
 wp_nav_menu ( array (
 'theme_location' => 'footer-menu' ,
 'menu_class' => 'my-footer-menu', // classe CSS pour customiser mon menu
 ) ); ?>
 <?php endif;
 ?>

 

4. Personnalisez l’apparence du nouveau menu.

À la fin de l’étape 3, vous devriez voir apparaitre votre nouveau menu dans le footer (celui qui a été créé à l’étape 2), par contre, il n’est certainement pas à la hauteur de vos espérances : il est sous forme de liste à puces et n’est pas du tout gracieux…

C’est à ce moment-là que vous devrez faire intervenir votre créativité en ajoutant du CSS dans le fichier style.css du thème enfant.

Vous pourrez facilement agir sur votre nouveau menu grâce à la classe CSS ajoutée dans le code php un peu plus tôt :

'menu_class' => 'my-footer-menu'

Voici le CSS que j’ai ajouté afin d’obtenir l’apparence finale de ma nouvelle navigation en footer :

/* personnaliser le visuel de mon nouveau menu footer */

.my-footer-menu{
 margin-top: 10px;
}

.my-footer-menu li{
 display: inline;
 padding: 10px 10px 0 10px;
}

.my-footer-menu li a:hover{
 color: orange;
 border-bottom: solid 2px black;
}

Et voici le résultat :

 

En conclusion…

Vous avez vu qu’il est très facile d’ajouter un nouveau menu dans son thème WordPress, vous pouvez même en ajouter plusieurs… Toutefois, les vraies questions que vous devez vous poser sont :

• est-ce que mon projet a besoin d’une nouvelle navigation ?
• est-ce vraiment pertinent ?
• qu’elle est la plus-value pour mon visiteur ?

Pour aller plus loin, je vous propose de visiter les pages officielles du codex de WordPress concernant l’ajout d’une seule navigation ou bien de plusieurs navigations.