Voici un petit article pour vous expliquer comment changer de menu dynamiquement dans WordPress sans appliquer de changements dans votre Template. Cette article s’adresse à des gens ayant déjà des connaissances en PHP, il faut savoir ce que l’on fait avant de modifier les fichiers PHP du thème, au risque de tout casser 😉
Le contexte
J’ai un site qui présente trois activité bien distinctes, et j’aimerais que pour chacune de ces activités le dit site affiche un menu principal différent. J’ai malgré tout quelques pages qui sont communes à toutes les activités (comme la page à propos de nous, ou encore la page contact). Le petit plus ? je ne veux faire qu’un seul site avec un seul et unique Template… Et si en plus c’était simple à mettre en place sur n’importe quel thème, ce serait top !
Challenge accepté !
La réalisation
Pour que le système fonctionne il faut utiliser les menus WordPress et pas les mettre en dur dans le Template (Surprenant, non ?). Pour cela, on va aller modifier quelques fichiers dans le thème (Adaptez les lignes proposées à vos besoins bien évidemment).
Etape 1 : Déclaration & Affichage du menu principal
Pour que votre thème WordPress connaisse l’existence du menu principal, il faut lui dire où et comment l’afficher.
Dans votre fichier functions.php
|
1 2 3 4 5 6 7 |
add_action( 'after_setup_theme', 'my_theme_setup' ); function my_theme_setup() { register_nav_menus( array( 'primary-menu' => esc_html__( 'Menu Principal', 'my_theme' ) )); } |
Vous serez à même, après cette modification, de créer un menu dans l’espace d’administration et de l’associer à l’emplacement « Menu Principal ».
Dans le fichier header.php (dans de rares cas, ça peut varier)
|
1 2 3 4 5 6 |
wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', [...] )); |
Insérez les lignes précédentes à l’endroit où vous voulez que le menu s’affiche dans le flux HTML de votre page. Pour plus d’info sur l’utilisation et le paramétrage de cette fonction, vous pouvez consulter la page du codex (https://developer.wordpress.org/reference/functions/wp_nav_menu/).
Nota Bene : Si votre thème utilise déjà un système de menu avec emplacement, vous pouvez ignorer cette première étape. Vous devrez cependant noter l’identifiant du menu que vous voulez rendre dynamique (ici primary-menu).
Etape 2 : Création des menus
On va maintenant créer plusieurs menus dans l’administration, un pour chaque variation souhaitée, dans mon cas trois menu : Un général, un pour le concours et un dernier pour les escales. A ce moment le menu que vous avez assigné à l’emplacement « Menu Principal » dans l’administration de WordPress n’a pas vraiment d’importance.
Etape 3 : Dynamisation du menu
On arrive au point crucial de cet article, le comment ça marche. On va simplement utiliser le système de filtres fourni par WordPress comme suit :
De nouveau dans le fichier functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//**************************************************************** // CHANGEMENT DE MENU POUR LES SECTIONS //**************************************************************** add_filter( 'wp_nav_menu_args', function($args){ if(isset($args['theme_location']) && $args['theme_location'] == 'primary-menu') { unset($args['theme_location']); if(strpos($_SERVER['REQUEST_URI'], '/le-concours') === 0) { $args['menu'] = "Concours - Menu Principal"; } elseif(strpos($_SERVER['REQUEST_URI'], '/les-escales') === 0) { $args['menu'] = "Escales - Menu Principal"; } elseif(strpos($_SERVER['REQUEST_URI'], '/evenements') === 0) { $args['menu'] = "Escales - Menu Principal"; } else { $args['menu'] = "General - Menu Principal"; } } return $args; }); |
Explication : Je fais passer ce filtre sur l’affichage de chacun des menus affichés par WordPress, si jamais il s’avère que je suis en train d’afficher le menu correspondant à l’emplacement « Menu Principal » alors, je précise à la fonction que je ne veux plus afficher le menu associé à l’emplacement, mais celui de mon choix.
Pour mes besoins je me base sur l’URL de la page pour choisir le menu à afficher.
- Si l’URL commence par /le-concours alors j’affiche le menu Concours – Menu Principal
- Si l’URL commence par /les-escales ou /evenements alors j’affiche le menu Escales – Menu Principal
- Sinon dans tous les autres cas j’affiche le menu General – Menu Principal
Adaptez les conditions d’affichage à votre cas, rien de bien compliqué
Etape bonus
Votre œil de lynx ne vous a pas trompé, en plus du changement de menu, il y a aussi un changement de couleur, sur les mêmes règles de filtrages j’ai ajouté une classe à chaque page avec le filtre ‘body_class’… simple mais efficace.
