Ajouter des menus personnalisés à WordPress

Lorsque vous utilisez WordPress pour créer un site internet ou un blog, vous pouvez être amené à créer des menus supplémentaires ou à en supprimer. Ces menus spécifiques vous permettent d’ajouter des navigations secondaires sur votre site.

Dans cet article, nous allons vous expliquer comment ajouter facilement des emplacements de menus personnalisés dans le fichier functions.php de votre thème WordPress.

Comprendre les menus dans WordPress

Le système de menus intégré à WordPress

WordPress dispose d’un système de menus intégré qui vous permet de créer des menus personnalisés et de les placer dans différents emplacements de votre thème. Ces emplacements sont définis dans le fichier functions.php. Ainsi, selon les thèmes, vous pouvez avoir différents menus qui sont appelés dans des parties spécifiques de votre thème (footer, header, etc.).

Les emplacements de menus prédéfinis dans les thèmes

Pour être affiché sur le site, un menu doit être rattaché à un ou plusieurs emplacements. On pourrait donc potentiellement rajouter 2 menus à l’emplacement « pied de page ».
Cependant, les emplacements de menus disponibles peuvent varier d’un thème à l’autre. Chaque thème peut avoir ses propres emplacements prédéfinis, tels que le menu principal, le menu du pied de page, le menu latéral, etc.

Ajouter des menus personnalisés à WordPress

Accéder à l’interface de gestion des menus

Pour commencer, accédez à l’interface d’administration de WordPress et rendez-vous dans « Apparence > Menus ».
Cette interface vous permet de créer et de gérer vos menus.

Sur cette interface, nous allons retrouver plusieurs parties

Créer un nouveau menu personnalisé

Pour créer un nouveau menu, cliquez sur « Créer un nouveau menu » (voir l’image ci-dessus, le point n°3).

Indiquez ensuite

• Donnez un nom à votre menu
• Attachez-le à un emplacement
• En option, vous pouvez indiquer que par défaut, chaque nouvelle page créée sera automatiquement ajoutée à ce menu
• Enregistrez le menu

Ajouter des éléments de menu

Maintenant, vous pouvez ajouter des éléments à votre menu. Vous pouvez choisir parmi différentes options, telles que les pages, les articles, les liens personnalisés, les catégories, etc. Cochez les éléments souhaités et ajoutez-les à votre menu.

Il peut arriver que tous vos « types d’articles » ou catégories n’apparaissent pas.

Pour régler ce problème, rendez-vous dans « Options de l’écran » (situé en haut à droite) et cochez les éléments souhaités.

Pour ajouter un élément, cliquez sur l’élément désiré pour qu’il soit inséré dans votre menu.

Dans l’onglet de menu que vous venez d’ajouter, vous pourrez modifier le texte qui apparaitra dans votre menu.

Ainsi, choisissez un texte plus intuitif, plus pertinent et court. N’oubliez pas qu’un élément de menu n’est pas une phrase.

Organiser la structure du menu (glisser-déposer, sous-menus)

Une fois que vous avez ajouté tous les éléments de menu, vous pouvez organiser la structure de votre menu. Utilisez la fonctionnalité glisser-déposer pour réorganiser les éléments et créer des sous-menus si nécessaire.

Les sous menu

Les sous-menus sont des menus qui apparaissent lorsque vous placez un élément de menu en dessous d’un autre élément. Cela permet de créer une structure hiérarchique dans votre menu.

Attention, dans le cadre des sous menus, il faut penser qu’en responsive le lien parent (ici l’intitulé « Ma page » dans l’image ci-dessus) ne servira qu’à ouvrir les sous menus, vous n’aurez pas accès au contenu de votre page.

Je vous conseille donc de faire un lien personnalisé où l’on va rendre inactif le lien :

Gestion des emplacements de menu

Les différents emplacements de menu dans les thèmes populaires

Comme je vous l’ai indiqué précédemment, les emplacements de menu disponibles peuvent varier en fonction du thème que vous utilisez. Cependant, certains emplacements sont couramment utilisés, tels que :

Menu principal (Primary menu) : C’est l’emplacement de menu le plus fréquemment utilisé. Il est généralement affiché en haut de la page et contient les liens vers les principales sections du site.

Le menu de pied de page (Footer): Ce menu est affiché en bas de chaque page, généralement dans le pied de page du site. Il est utilisé pour afficher des liens tels que les mentions légales, les conditions d’utilisation, etc.

Menu de navigation mobile (Mobile Navigation) : Certains thèmes proposent un emplacement spécifique pour le menu de navigation sur les appareils mobiles. Ce menu est conçu pour offrir une expérience de navigation optimisée sur les petits écrans.

Menu latéral (Sidebar) : Dans certains thèmes, vous pouvez placer un menu dans la barre latérale du site, généralement utilisé pour afficher des liens supplémentaires.

Ajouter des menus personnalisés à WordPress : créer ou supprimer un emplacement

Si vous souhaitez créer un nouvel emplacement de menu personnalisé, vous pouvez le faire en ajoutant du code dans le fichier functions.php de votre thème.

function inumedia_ajout_menu() {
   register_nav_menu( 'nom-emplacement-menu', 'Description de l\'emplacement du menu' );
}
add_action( 'after_setup_theme', 'inumedia_ajout_menu' );

De même, si vous souhaitez supprimer un emplacement prédéfini, vous pouvez également le faire en modifiant le code correspondant. Il va falloir repérer l’identifiant de l’emplacement.

Je vais faire un clic droit sur « Menu secondaire » et cliquer sur « Inspecter » et récupérer l’identifiant de l’emplacement de mon menu.

Ici, on voit « locations-footer », l’identifiant de l’emplacement de mon menu est « footer ».

function deregister_emplacement_menu() {
   unregister_nav_menu( 'identifiant-emplacement-menu' ); // Ici on indiquera " footer "
}
add_action( 'after_setup_theme', 'deregister_emplacement_menu' );

Affecter emplacement prédéfini dans son thème

Pour afficher un menu à un emplacement spécifique dans votre thème, vous pouvez utiliser la fonction wp_nav_menu(). Cette fonction vous permet de spécifier l’emplacement du menu dans le code de votre thème.

Choisissez tout d’abord l’élément désiré pour placer votre code :

• header.php : les entêtes
• footer.php : les pieds de pages
• page.php : le modèle de page. Ça ne s’affichera que dans vos pages.
• single.php : le modèle d’article. Ça ne s’affichera que dans vos articles.
• category.php /archive.php : le modèle catégories.
• sidebar.php : Les colonnes latérales de vos pages ou articles.

Puis indiquez ce code :

wp_nav_menu(array(
        'theme_location' => 'identifiant-emplacement-menu',
        'menu_class' => 'classe-du-menu',
        'container' => 'nav',
));

Explications :

• On crée la fontion wp_nav qui contient un tableau
• On indique l’identifiant de l’emplacement
• On peut ajouter une classe personnalisée à ce menu
• On indique que notre menu sera entre les balises “nav”

Si vous souhaitez utiliser 2 emplacements : 1 pour le mobile et un pour le desktop on peut utiliser cette fonctionnalité :

if (is_mobile()){ // Si c'est mobile ou tablette
wp_nav_menu(array(
        'theme_location' => 'identifiant-emplacement-menu-mobile', // On affiche cet emplacement
        'menu_class' => 'classe-du-menu',
        'container' => 'nav',
));
}else{ // sinon
wp_nav_menu(array(
        'theme_location' => 'identifiant-emplacement-menu-desktop', // On affiche celui-ci 
        'menu_class' => 'classe-du-menu',
        'container' => 'nav',
));
}

L’option « is_mobile() » n’est pas préconisé par le support de WordPress pour ce type d’utilisation, mais ça fonctionne parfaitement.

Si vous n’utilisez pas le php ou le JS mais que vous cachez votre menu inutilisé en CSS, cela chargera quand même ce dernier, il ne sera pas visible, mais chargé.
Cacher un élément par CSS, n’est pas idéal, car vous pouvez rapidement augmenter le nombre de requêtes et donc alourdir votre temps de chargement.
Cela serait un peu cacher les choses sous le tapis, ce n’est pas parce que vous ne les voyez pas qu’ils ne sont pas là.
Malheureusement, beaucoup de constructeurs de pages fonctionnent sur ce principe. C’est pourquoi l’optimisation d’un site fait avec un builder peut être problématique.

En conclusion

Les menus jouent un rôle essentiel dans la navigation et l’expérience utilisateur de votre site, en permettant aux visiteurs de trouver facilement le contenu qu’ils recherchent. Ce tutoriel vous a appris à appréhender les bases nécessaires à la maitrise des menus sur WordPress.

Dans un prochain tutoriel, nous irons plus loin dans la personnalisation de vos menus