Comment ajouter une logique conditionnelle aux menus dans WordPress
Voulez-vous afficher différents éléments du menu de navigation pour différentes pages dans WordPress ? Ou afficher un menu différent pour les utilisateurs connectés ?
WordPress vous permet d'afficher un menu de navigation à un emplacement spécifique de votre thème, mais par défaut, il affichera toujours le même menu.
Dans cet article, nous allons vous montrer comment ajouter une logique conditionnelle aux menus dans WordPress.
Pourquoi ajouter une logique conditionnelle aux menus dans WordPress ?
Les menus de navigation donnent la structure à votre site Web WordPress et aident les visiteurs à trouver ce qu'ils recherchent. Par défaut, votre site Web WordPress affichera le même menu de navigation à tous les utilisateurs et sur toutes les publications et pages.
Cependant, il peut arriver que vous souhaitiez afficher différents menus à différents utilisateurs ou sur différentes pages de votre site Web.
Les sites Web tels qu'une boutique en ligne, une communauté de sites d'adhésion WordPress ou une plateforme d'apprentissage en ligne peuvent tous bénéficier de menus de navigation personnalisés.
En utilisant une logique conditionnelle, vous pouvez ajouter des éléments de menu supplémentaires pour les utilisateurs connectés afin qu'ils puissent gérer leurs comptes, renouveler leurs abonnements ou consulter les cours en ligne qu'ils ont achetés. Vous pouvez le considérer comme un contrôle d’accès aux menus WordPress.
Cela étant dit, voyons comment ajouter une logique conditionnelle aux menus dans WordPress. Voici les sujets que nous aborderons dans ce tutoriel :
Création de nouveaux menus de navigation dans WordPress
Afficher un menu différent pour les utilisateurs connectés dans WordPress
Affichage d'un menu WordPress différent en fonction du rôle de l'utilisateur
Afficher un menu différent pour différentes pages dans WordPress
Masquer le menu de navigation sur les pages de destination dans WordPress
Faire plus avec les menus de navigation WordPress
Création de nouveaux menus de navigation dans WordPress
La première étape consiste à créer les menus de navigation supplémentaires que vous souhaitez afficher dans WordPress. Après cela, vous pouvez utiliser la logique conditionnelle pour décider quand chaque menu sera affiché.
Rendez-vous simplement sur la page Apparence » Menus dans le tableau de bord WordPress. Si vous disposez déjà d'un menu de navigation que vous utilisez sur votre site Web pour tous les utilisateurs, cela peut être votre menu par défaut.
Ensuite, vous devez cliquer sur le lien « Créer un nouveau menu » pour créer un nouveau menu. Par exemple, vous pouvez créer un menu à afficher aux utilisateurs connectés et un autre à afficher sur une certaine page ou catégorie WordPress.
Sur le côté gauche de l'écran, vous pouvez voir une liste des pages de votre site Web. Cochez simplement la case à côté de toute page que vous souhaitez ajouter à votre menu et cliquez sur le bouton « Ajouter au menu ».
Vous pouvez également faire glisser et déposer les éléments de menu sur le côté droit de l'écran pour les réorganiser.
Plus bas sur la page, vous pouvez choisir un emplacement pour afficher votre menu. Mais vous n’avez pas besoin d’attribuer un emplacement à ce menu pour le moment. Nous le ferons à l’étape suivante.
N'oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour enregistrer vos modifications.
Pour plus de détails sur la création de menus, vous pouvez consulter notre guide du débutant sur la façon d'ajouter un menu de navigation dans WordPress.
Afficher un menu différent pour les utilisateurs connectés dans WordPress
Il est souvent utile d’afficher différents menus de navigation aux utilisateurs selon qu’ils sont connectés ou non à votre site.
Par exemple, vous pouvez inclure des liens de connexion et d'enregistrement pour les utilisateurs déconnectés et ajouter un lien de déconnexion à votre menu pour votre menu connecté.
Ou si vous exploitez une boutique WooCommerce, vous pouvez inclure des articles pour vos clients qui sont cachés au grand public.
Tout d'abord, vous devez installer et activer le plug-in Menus conditionnels . Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.
Lors de l'activation, vous devez visiter la page Apparence » Menus et passer à l'onglet « Gérer les emplacements ».
À partir de là, vous verrez la liste des emplacements de menu disponibles et les menus actuellement affichés. Ceux-ci varient en fonction du thème WordPress que vous utilisez.
Par exemple, sur notre site Web de démonstration, il est indiqué que l'emplacement de notre menu principal affiche un menu de navigation intitulé « Menu principal ».
Nous pouvons demander au plugin d'afficher un menu différent lorsqu'une certaine condition est remplie en cliquant sur le lien « + Menu conditionnel » et en sélectionnant un autre menu dans le menu déroulant. Pour ce didacticiel, nous sélectionnerons « Menu connecté ».
Ensuite, vous devez cliquer sur le lien « + Conditions ».
Cela fera apparaître une fenêtre contextuelle dans laquelle vous verrez un certain nombre de conditions parmi lesquelles choisir.
Cochez simplement la case à côté de l’option « Utilisateur connecté », puis cliquez sur le bouton « Enregistrer ».
Vous pouvez maintenant visiter votre site Web pour voir le menu utilisateur connecté en action. Vous pouvez vous déconnecter de votre site Web pour voir le menu de navigation présenté à tous les autres utilisateurs.
Pour des instructions plus détaillées et pour savoir comment procéder à l'aide de code, consultez notre guide sur la façon d'afficher différents menus aux utilisateurs connectés dans WordPress.
Affichage d'un menu WordPress différent en fonction du rôle de l'utilisateur
Une fois qu'un utilisateur s'est connecté, vous pouvez également afficher un menu de navigation différent en fonction du rôle utilisateur que vous lui avez attribué.
Par exemple, vous pouvez inclure des éléments de menu supplémentaires pour un administrateur et des éléments plus limités pour un contributeur. Ou sur un site d'adhésion, vous pouvez accorder différents niveaux d'accès à différents niveaux d'adhésion.
Comme dans la section précédente, vous devez installer et activer le plug-in Menus conditionnels , puis visiter la page Apparence » Menus et passer à l'onglet « Gérer les emplacements ».
Vous devez ajouter le menu conditionnel approprié pour le rôle d'utilisateur que vous sélectionnerez. Pour ce didacticiel, nous avons sélectionné le menu « Nav Menu Administrator ».
Après cela, vous devez cliquer sur le lien « + Conditions » pour pouvoir choisir le rôle d'utilisateur.
Vous devrez cliquer sur l'onglet « Rôles d'utilisateur » pour voir les cases à cocher pour chaque rôle d'utilisateur sur votre site Web. Cliquez simplement sur les rôles d'utilisateur qui verront ce menu, puis cliquez sur le bouton « Enregistrer ».
Afficher un menu différent pour différentes pages dans WordPress
Vous pouvez afficher un menu différent pour différentes pages dans WordPress. Par exemple, vous pouvez afficher des éléments de menu supplémentaires sur votre page de politique de confidentialité, comme un lien vers votre avis sur les cookies.
Pour ce faire, vous devez installer et activer le plugin Conditional Menus, comme indiqué ci-dessus, puis choisir le menu de navigation approprié et cliquer sur le lien « + Conditions ».
Cette fois, vous devez cliquer sur l'onglet « Pages ». Vous verrez une liste de chaque page de votre site Web.
Vous devez cocher chaque page sur laquelle vous souhaitez afficher le menu de navigation, puis cliquer sur le bouton « Enregistrer ».
Masquer le menu de navigation sur les pages de destination dans WordPress
Il peut y avoir des pages de votre site Web sur lesquelles vous ne souhaitez pas du tout afficher de menu de navigation, comme vos pages de destination.
Une page de destination est conçue pour augmenter les ventes ou générer des prospects pour une entreprise. Sur ces pages, vous souhaiterez minimiser les distractions et fournir aux utilisateurs toutes les informations dont ils ont besoin pour entreprendre une action spécifique.
Dans notre guide sur la façon d'augmenter les conversions de votre page de destination de 300 %, nous vous suggérons de minimiser les distractions en supprimant les menus de navigation et autres liens de la page.
Vous pouvez le faire en utilisant le plugin Conditional Menus. Lors de la sélection du menu conditionnel, vous devez cette fois choisir « Désactiver le menu » dans le menu déroulant.
Ensuite, vous devez cliquer sur le lien « + Conditions » pour choisir quand afficher le menu.
Vous devez cliquer sur l'onglet « Pages » et placer des coches à côté de vos pages de destination.
N'oubliez pas de cliquer sur le bouton « Enregistrer » pour stocker vos paramètres.
Faire plus avec les menus de navigation WordPress
Les menus de navigation sont un puissant outil de conception Web. Ils vous permettent de diriger les utilisateurs vers les sections les plus importantes de votre site Web.
Maintenant que vous affichez différents menus de navigation sur différentes pages et pour différents utilisateurs, vous vous demandez peut-être comment les personnaliser davantage.
Essayez ces didacticiels utiles pour étendre les fonctionnalités des menus de navigation sur votre site Web WordPress.
Comment ajouter des éléments personnalisés à des menus WordPress spécifiques
Comment ajouter des menus de navigation personnalisés dans les thèmes WordPress
Comment ajouter un menu réactif plein écran dans WordPress
Comment créer un menu de navigation vertical dans WordPress
Comment ajouter un méga menu à votre site WordPress
Comment styliser les menus de navigation WordPress
Nous espérons que ce didacticiel vous a aidé à apprendre à ajouter une logique conditionnelle aux menus dans WordPress. Vous souhaiterez peut-être également apprendre à créer des flux de travail automatisés ou consulter notre liste des meilleurs plugins de preuve sociale pour WordPress et WooCommerce.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.