Comment ajouter une logique conditionnelle aux menus dans WordPress (étape par étape)

Avez-vous déjà souhaité que votre menu WordPress soit plus intelligent ? Peut-être souhaitez-vous afficher différentes options de navigation aux membres connectés, ou afficher des éléments de menu spécifiques uniquement sur certaines pages.

Par défaut, WordPress affiche le même menu statique à tout le monde, ce qui peut donner à votre site une impression générique et peu utile. Nous avons travaillé avec de nombreux propriétaires de sites Web qui ont été confrontés à ce défi exact.

Heureusement, les menus conditionnels peuvent transformer complètement votre expérience utilisateur.

Lorsque votre navigation WordPress s'adapte à différents visiteurs et contextes, les gens trouvent plus rapidement ce dont ils ont besoin. Et vous pouvez les guider vers les actions qui comptent le plus pour votre entreprise.

Dans ce guide, nous vous expliquerons comment ajouter une logique conditionnelle à vos menus WordPress. Vous apprendrez à créer une navigation dynamique qui change en fonction des rôles des utilisateurs, des pages spécifiques ou de tout autre critère de votre choix.

Pourquoi ajouter une logique conditionnelle aux menus dans WordPress ?

Les menus de navigation donnent une structure à votre site Web et aident les visiteurs à trouver ce qu'ils cherchent.

Par défaut, votre site Web WordPress affichera le même menu de navigation à tous les utilisateurs et sur tous les articles et pages.

Cependant, il peut y avoir des moments où vous souhaitez afficher différents menus à différents utilisateurs ou sur différentes pages de votre site Web.

Avec la logique conditionnelle, vous pouvez aller plus loin en créant des menus personnalisés pour les utilisateurs connectés. Voici quelques exemples de cas d'utilisation sur différents types de sites :

• Boutique en ligne – Mettez en avant des produits ou des offres spéciales en fonction de l'historique de navigation ou d'achat d'un client.
• Site d'adhésion WordPress – Affichez des pages et des ressources exclusives uniquement aux membres connectés.
• Plateforme d'apprentissage en ligne – Affichez différentes catégories de cours ou leçons en fonction de la progression d'un étudiant.

Vous pouvez y penser comme un contrôle d'accès aux menus WordPress. 💡

Dans cet esprit, nous allons vous montrer comment ajouter une logique conditionnelle aux menus WordPress. Voici les sujets que nous aborderons dans ce tutoriel :

Prêt ? Commençons.

Créer 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é.

À partir de maintenant, nous vous montrerons comment ajouter des menus conditionnels à WordPress pour les éditeurs classiques et les éditeurs de blocs.

Créer de nouveaux menus de navigation dans WordPress à l'aide de l'éditeur classique

Cette méthode fonctionne pour les utilisateurs de thèmes classiques.

Pour créer de nouveaux menus de navigation, rendez-vous simplement sur la page Apparence » Menus dans le tableau de bord WordPress. Si vous avez déjà 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 devrez cliquer sur le lien « créer un nouveau menu » pour créer un nouvel élément de menu. Par exemple, vous pourriez créer un menu à afficher aux utilisateurs connectés et un autre à afficher sur une certaine page WordPress ou catégorie.

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 du 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 maintenant. Nous le ferons à l’étape suivante.

N'oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour sauvegarder vos modifications.

Pour plus de détails sur la création de menus, vous pouvez consulter notre guide pour débutants sur comment ajouter un menu de navigation dans WordPress.

Créer de nouveaux menus de navigation dans WordPress à l’aide de FSE

Pour créer de nouveaux menus de navigation dans un thème de bloc avec l'édition complète du site (FSE), vous devrez d'abord accéder à Apparence » Éditeur depuis votre tableau de bord WordPress.

Une fois à l'intérieur, vous pouvez cliquer sur l'onglet « Navigation » pour l'agrandir. Si vous vous demandez, nous utilisons le thème Twenty-Twenty Three pour ce guide.

Ensuite, cliquons sur « Modifier » à côté de l'étiquette « Navigation ».

Cela ouvrira l'éditeur complet du site sur votre écran.

À partir de là, il ne vous reste plus qu'à cliquer sur l'icône « + » pour ajouter un élément de menu de navigation. Vous verrez alors une invite affichant un menu déroulant où vous pourrez sélectionner une option.

Pour des instructions plus détaillées, vous pouvez consulter notre guide sur comment ajouter un menu de navigation dans WordPress.

Afficher un menu différent aux utilisateurs connectés dans WordPress

Il est souvent utile d'afficher différents menus de navigation aux utilisateurs en fonction de leur connexion à votre site ou non.

Par exemple, vous pouvez inclure des liens de connexion et d'inscription pour les utilisateurs déconnectés et ajouter un lien de déconnexion à votre menu pour les utilisateurs connectés.

Si vous gérez une boutique WooCommerce, vous pourriez inclure des articles pour vos clients qui sont cachés du grand public.

Afficher un menu différent aux utilisateurs connectés à l'aide de l'éditeur classique

Pour commencer, vous devez installer et activer le plugin Conditional Menus. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous voudrez naviguer vers Apparence » Menus et passer à l'onglet « Gérer les emplacements ».

À partir d'ici, vous verrez la liste des emplacements de menu disponibles et les menus qui sont actuellement affichés. Ceux-ci varieront en fonction du thème WordPress que vous utilisez.

Par exemple, sur notre site de démonstration, il est indiqué que notre emplacement « Menu principal » affiche un menu de navigation intitulé « Menu principal ».

Nous pouvons indiquer 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 tutoriel, nous sélectionnerons « Menu connecté ».

Ensuite, vous devez cliquer sur le lien « + Conditions ».

Cela ouvrira une fenêtre contextuelle où vous verrez un tas de conditions à 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 qui est affiché à tous les autres utilisateurs.

Pour des instructions plus détaillées et pour apprendre comment faire cela en utilisant du code, consultez notre guide sur comment afficher différents menus pour les utilisateurs connectés dans WordPress.

Afficher un menu différent aux utilisateurs connectés à l'aide de FSE

Si vous utilisez un thème basé sur des blocs, vous aurez besoin du plugin Conditional Blocks. Nous allons donc d'abord installer et activer le plugin. Si vous avez besoin d'aide, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

Une fois activé, vous pouvez ouvrir la fonctionnalité FSE en naviguant vers Apparence » Éditeur. Ensuite, vous devrez cliquer sur « Modèles » puis sur « Toutes les parties de modèle ».

Vous devriez maintenant voir toutes vos parties de modèle, qui peuvent inclure un pied de page, un en-tête et des commentaires. Cliquer sur les trois points dans la section « En-tête » puis sélectionner « Modifier ».

Cela vous redirigera vers l'éditeur de blocs.

Vous devrez maintenant cliquer sur le bloc de menu de navigation pour ajouter des conditions.

Après cela, basculez simplement vers l'onglet « Bloc » dans le panneau latéral droit pour commencer la personnalisation.

En faisant défiler l'onglet « Bloc », vous verrez la section « Blocs conditionnels ». Cliquez simplement dessus pour ouvrir les options de personnalisation.

Ensuite, cliquez sur le bouton « Modifier la visibilité ».

Une fenêtre contextuelle où vous pouvez définir les conditions pour votre menu de navigation choisi apparaîtra.

Ici, vous pouvez ouvrir le menu déroulant « CONDITION » et sélectionner l'option « Utilisateur connecté ».

Fermez simplement la fenêtre en cliquant sur le bouton « X » dans le coin supérieur droit.

Vous devriez alors voir une condition ajoutée à la section « Blocs conditionnels ». Cliquez sur « Enregistrer » pour mettre à jour vos menus de navigation.

Maintenant, si vous visitez votre site web, voici à quoi il pourrait ressembler pour les utilisateurs déconnectés et connectés :

Afficher un menu WordPress différent selon le 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 de l'utilisateur qui lui est attribué.

Par exemple, vous pourriez inclure des éléments de menu supplémentaires pour un administrateur et des éléments plus limités pour un contributeur. Sur un site d'adhésion, vous pourriez accorder différents niveaux d'accès à différents niveaux d'adhésion.

Afficher un menu WordPress différent selon le rôle de l'utilisateur à l'aide de l'éditeur classique

Comme dans la section précédente, vous devrez installer et activer le plugin Conditional Menus .

Ensuite, vous pouvez aller à la page Apparence » Menus et passer à l'onglet « Gérer les emplacements ».

Vous devriez ajouter le menu conditionnel approprié pour votre rôle d'utilisateur sélectionné. Pour ce tutoriel, nous sélectionnerons le menu « Nav Menu Administrator ».

Après cela, vous pouvez cliquer sur le lien « + Conditions » pour choisir le rôle de l'utilisateur.

You will need to click on the ‘User Roles’ tab to see checkboxes for each user role on your website. Simply click the user roles that will see this menu, and then click the ‘Save’ button to store your changes.

Showing a Different WordPress Menu Depending on User Role Using FSE

To show a different menu depending on user roles in FSE, you’ll be using the Content Control plugin. If you need help installing and activating it, please refer to our guide on how to install a WordPress plugin.

Upon activation, you can navigate to Appearance » Editor » Patterns » All template parts. Then, simply click the three dots in the ‘Header’ section and then select ‘Edit.’

In the editor, you can select a navigation menu to add conditionals to.

For example, we’re going to make our ‘Blog’ page exclusive to our subscribers only. So, we’ll click ‘Blog’ to open its customization options.

From here, let’s head over to the right-hand panel and toggle the ‘Enable Controls’ switch in the ‘Block Controls’ section.

Then, you’ll want to scroll down to the ‘User Rules’ section to set up the conditions.

First, simply open the ‘WHO CAN SEE THIS CONTENT’ dropdown menu and choose ‘Logged In User.’

Then, for the ‘USER ROLE’ dropdown, you can choose ‘Matching.’ And in the ‘CHOSEN ROLES,’ let’s select ‘subscriber.’

Once done, you can go ahead and click the ‘Save’ button.

Showing a Different Menu for Different Pages in WordPress

You can display a different menu for different pages in WordPress.

Par exemple, vous pourriez afficher des éléments de menu supplémentaires sur votre page de politique de confidentialité, tels qu'un lien vers votre avis de cookies.

Afficher un menu différent pour différentes pages dans WordPress en utilisant l'éditeur classique

Pour ce faire, vous devez installer et activer le plugin Conditional Menus. Ensuite, vous devrez naviguer vers Apparence » Menus » Gérer les emplacements.

Après avoir choisi le menu de navigation approprié, vous pouvez cliquer sur le lien « + Conditions ». Cette fois, vous devriez cliquer sur l'onglet « Pages ». Vous verrez une liste de toutes les pages de votre site Web.

Vous devrez ensuite placer une coche à côté de chaque page où vous souhaitez afficher le menu de navigation. Une fois terminé, cliquez sur le bouton « Enregistrer ».

Afficher un menu différent pour différentes pages dans WordPress en utilisant FSE

Les utilisateurs de thèmes de blocs peuvent utiliser le plugin Block Visibility. Si vous avez besoin d'aide pour l'installation, veuillez consulter notre guide sur comment installer un plugin WordPress.

Une fois activé, naviguons vers Apparence » Éditeur » Modèles » Toutes les parties de modèle. Et après avoir ouvert l'éditeur de l'en-tête, vous pouvez vous rendre dans la section « Visibilité ».

À partir de là, vous pouvez ouvrir le menu déroulant et sélectionner « Chemin d'URL ».

Ensuite, vous pouvez ajouter le chemin d'URL de la page de politique de confidentialité à la zone « CHEMIN D'URL (CONTENIR) ».

Un chemin d'URL est la partie d'une adresse Web qui vient après le nom de domaine principal et qui indique une page ou un élément spécifique.

Par exemple, dans l'adresse https://example.com/about, la partie /about est le chemin d'URL.

Si vous ne savez pas quel est le chemin d'URL de votre page de politique de confidentialité, vous pouvez aller dans Pages » Toutes les pages. Ensuite, vous devrez trouver la page de politique de confidentialité et la survoler.

Cliquez simplement sur le bouton « Modification rapide », puis vous verrez la section « Slug ». Le chemin de l’URL doit être le symbole « / » suivi du slug de la page.

Ou visitez simplement la page et copiez-collez la partie après le nom de domaine.

C'est tout ! Cliquez sur « Enregistrer » pour sauvegarder les modifications.

Masquer le menu de navigation sur les pages de destination dans WordPress

Il peut y avoir des pages sur votre site Web où vous ne souhaitez pas afficher de menu de navigation du tout, 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 voudrez minimiser les distractions et fournir aux utilisateurs toutes les informations dont ils ont besoin pour entreprendre une action spécifique.

Dans notre guide sur comment augmenter vos conversions de pages de destination de 300 %, nous vous suggérons de minimiser les distractions en supprimant les menus de navigation et autres liens de la page.

Masquer le menu de navigation sur les pages de destination dans WordPress à l'aide de l'éditeur classique

Vous pouvez le faire en utilisant le plugin Conditional Menus. Cette fois, vous choisirez « Désactiver le menu » dans le menu déroulant lors de la sélection du menu conditionnel.

Ensuite, cliquons sur le lien « + Conditions » pour choisir quand afficher le menu.

Vous devez cliquer sur l'onglet « Pages » et cocher la case à côté de l'élément « Ma page de destination ».

N'oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder et appliquer vos paramètres.

Masquer le menu de navigation sur les pages de destination dans WordPress avec FSE

Désormais, pour les utilisateurs de thèmes de blocs, vous pouvez utiliser le plugin Block Visibility, mais cette fois, vous saisirez le chemin d'URL dans le champ « Chemin d'URL (Ne contient pas) ».

Alors, installons et activons le plugin. Si vous avez besoin d'aide, n'hésitez pas à consulter notre guide sur comment installer un plugin WordPress.

Une fois activé, vous pouvez vous rendre dans Apparence » Éditeur » Modèles » Toutes les parties de modèle. Une fois dans l'éditeur d'en-tête, trouvons la section « Visibilité ».

À partir de là, vous pouvez choisir « Chemin d'URL » et entrer le chemin de votre page de destination dans le champ « Chemin d'URL (Ne contient pas) ».

Une fois terminé, cliquez simplement sur le bouton « Enregistrer ».

Questions fréquemment posées sur les menus conditionnels

Vous avez des questions sur la configuration ou la personnalisation des menus conditionnels dans WordPress ? Voici quelques réponses rapides pour vous aider à démarrer.

Quel est le meilleur plugin de menu conditionnel pour WordPress ?

Si vous utilisez un thème classique, le plugin Conditional Menus est un choix simple et fiable. Pour les thèmes de blocs, des outils comme Conditional Blocks ou Block Visibility vous donnent un contrôle puissant directement dans l'éditeur.

Puis-je ajouter une logique conditionnelle aux menus sans plugin ?

Oui, mais cela implique d'ajouter du code personnalisé aux fichiers de votre thème, ce qui est préférable de laisser aux utilisateurs avancés car une petite erreur peut casser votre site.

Pour la plupart des gens, un plugin comme WPCode est un moyen beaucoup plus sûr et plus facile d'ajouter et de gérer des extraits de code. Vous pouvez tout savoir à son sujet dans notre revue complète de WPCode.

Puis-je appliquer des conditions à un seul élément de menu au lieu de l'ensemble du menu ?

Absolument. De nombreux thèmes WordPress et plugins de menu modernes le permettent. Dans l'éditeur de menu classique (Apparence » Menus), vous pouvez souvent définir des règles de visibilité pour des éléments individuels. Dans l'éditeur de blocs, vous pouvez appliquer des conditions à des blocs de liens de navigation spécifiques.

Lecture complémentaire : Faire plus avec les menus de navigation WordPress

Navigation menus are powerful web design tools. They allow you to direct users to the most important sections of your WordPress blog or website.

Now that you are showing different navigation menus on different pages and for various user roles, you may wonder how to customize them further.

To improve the functionality of your navigation menus, be sure to check out these tutorials:

• 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
• How to Add a Mega Menu to Your WordPress Site
• Comment styliser les menus de navigation WordPress
• Comment afficher les liens de navigation fil d'Ariane dans WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.