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 ?

La logique conditionnelle dans les menus WordPress vous permet de modifier automatiquement la navigation de votre site en fonction de critères spécifiques.

Contrairement au comportement par défaut d'un site web WordPress, qui affiche le même menu statique à tout le monde, les menus conditionnels vous permettent d'afficher différents liens en fonction de l'utilisateur ou de la page.

Cela vous permet de guider plus efficacement les visiteurs en ne leur montrant que les liens pertinents pour leur contexte actuel.

Par exemple, vous pouvez utiliser des règles pour créer des menus personnalisés pour les utilisateurs connectés. Voici quelques exemples 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 WordPress d'adhésion – 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 considérer cela 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 allons vous montrer comment ajouter des menus conditionnels à WordPress pour les thèmes classiques et les thèmes 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, celui-ci 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 une 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 bloc avec l'édition complète du site (FSE), vous devrez d'abord accéder à Apparence » Éditeur depuis votre tableau de bord WordPress.

Cela ouvrira l'éditeur de site. Selon votre thème, vous pourriez voir une liste d'options de menu sur la gauche. Cliquez simplement sur « Navigation ».

Si vous vous demandez, nous utilisons le thème Twenty-Twenty Three pour ce guide.

Ici, vous pouvez voir tous vos menus existants.

Pour en ajouter un nouveau, cliquez simplement sur l'icône + (Plus) ou sur le bouton « Modifier » pour gérer vos menus visuellement. Vous verrez alors une invite affichant un menu déroulant où vous pouvez 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 Menus Conditionnels.

Rendez-vous sur Extensions » Ajouter depuis votre tableau de bord d'administration WordPress.

Sur la page suivante, utilisez la barre de recherche pour trouver le plugin.

Une fois qu'il apparaît dans les résultats, cliquez sur « Installer maintenant », puis sur « Activer » une fois l'installation terminée.

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 ».

L'onglet Gérer les emplacements est l'endroit où vous indiquez à votre thème quel menu doit apparaître dans des zones spécifiques de votre site. Ici, vous verrez une liste des emplacements de menu disponibles ainsi que les menus qui leur sont actuellement attribués.

Ces emplacements peuvent varier en fonction du thème WordPress que vous utilisez. Par exemple, sur notre site de démonstration, l'emplacement « Menu principal » affiche actuellement un menu de navigation appelé « Menu principal ».

Pensez à un « Emplacement de menu » comme à un cadre photo sur votre mur, et au « Menu » comme à la photo qu'il contient. Le plugin Conditional Menus vous permet d'échanger automatiquement la photo en fonction de la personne qui la regarde.

Pour afficher un menu différent lorsque certaines conditions sont remplies, cliquez sur le lien « + Menu conditionnel » et choisissez 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 bloc, vous aurez besoin du plugin Blocs Conditionnels.

Alors, installons et activons d'abord le plugin – vous pouvez aller dans Plugins » Ajouter pour commencer.

Ensuite, utilisez la boîte de recherche pour trouver le plugin.

Lorsqu'il apparaît dans les résultats, cliquez sur « Installer maintenant », et assurez-vous de cliquer sur « Activer » une fois l'installation terminée.

Si vous avez besoin d'aide supplémentaire, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

Après l'avoir activé, accédez à Apparence » Éditeur pour ouvrir l'éditeur de site.

Ensuite, vous voudrez 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 – selon votre thème actif.

Localisons la partie de modèle « En-tête ». Cliquez simplement sur l'icône du menu à trois points, puis sélectionnez « Modifier ».

Cela vous redirigera vers l'éditeur de blocs.

Cliquez sur le bloc de menu de navigation pour ajouter des conditions. Après cela, basculez vers l'onglet « Bloc » dans le panneau de droite 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 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 aurez besoin du plugin Menus Conditionnels. Pour des instructions détaillées, consultez notre guide sur comment installer un plugin WordPress.

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

Pour afficher un menu différent en fonction des rôles des utilisateurs dans FSE, vous utiliserez le plugin Contrôle de Contenu.

Pour ce faire, allez dans Plugins » Ajouter depuis votre tableau de bord WordPress.

Ensuite, utilisez le champ de recherche pour trouver rapidement le plugin.

Une fois qu'il apparaît dans les résultats, cliquez sur « Installer maintenant », et n'oubliez pas de cliquer sur « Activer » une fois l'installation terminée.

Si vous souhaitez plus de conseils, vous pouvez vous référer à notre guide sur comment installer un plugin WordPress.

Une fois le plugin activé, accédez à Apparence » Éditeur depuis votre tableau de bord WordPress.

Ensuite, sélectionnez « Modèles » puis cliquez sur « Toutes les parties de modèle ».

Cela devrait vous montrer une liste des parties de modèle disponibles, telles que l'en-tête, le pied de page et les commentaires, en fonction de votre thème de blocs actif.

Vous pouvez localiser votre partie de modèle « En-tête », puis cliquer sur le menu à trois points et choisir « Modifier ».

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

Par exemple, nous masquerons le lien vers la page « Blog » afin que seuls les abonnés le voient dans le menu.

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 sur les cookies.

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

Pour ce faire, vous avez besoin du plugin Conditional Menus. Si vous avez besoin d’aide pour installer le plugin, consultez les étapes de notre section précédente ou notre guide sur comment installer un plugin WordPress.

Après l'activation, vous voudrez naviguer vers Apparence » Menus, puis sélectionner « Gérer les emplacements ».

Après avoir choisi le menu de navigation approprié, vous pouvez cliquer sur le lien « + Conditions ».

Cette fois, vous devez 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

Si vous utilisez un thème basé sur des blocs, nous vous recommandons d’utiliser le plugin gratuit Block Visibility. Il vous donne un contrôle précis sur qui voit vos menus.

Pour commencer, installez et activez le plugin en allant dans Extensions » Ajouter dans votre tableau de bord WordPress.

Ensuite, utilisez la boîte de recherche pour trouver le plugin.

Lorsqu'il apparaît dans les résultats, cliquez sur « Installer maintenant », et assurez-vous de cliquer sur « Activer » une fois l'installation terminée.

Si vous avez besoin d’aide pour l’installation, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après avoir activé le plugin, ouvrez Apparence » Éditeur dans votre tableau de bord WordPress.

Ensuite, cliquez sur « Modèles » puis sur « Parties de tous les modèles ».

Cela affichera toutes les parties de modèle disponibles, y compris l’en-tête, le pied de page et les commentaires, en fonction de votre thème actif.

À partir d'ici, cliquez sur votre en-tête ou sur la zone où se trouve votre menu de navigation pour le modifier.

Une fois dans l'éditeur, rendez-vous dans la section « Visibilité ».

Ensuite, recherchez les options « Emplacement » ou « 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 connaissez pas le chemin d’URL de votre page Politique de confidentialité, vous pouvez aller dans Pages » Toutes les pages. Ensuite, vous devrez trouver la page 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, copiez le texte après votre nom de domaine et collez-le ici. Assurez-vous d'inclure la barre oblique au début.

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 afficher aucun menu de navigation, telles que 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 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 que nous avons utilisé dans la section précédente.

Après avoir activé le plugin, vous pouvez naviguer vers Apparence » Menus et sélectionner « Désactiver le menu » dans le menu déroulant.

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

Vous devriez 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

Pour les thèmes basés sur des blocs, vous pouvez continuer à utiliser le plugin Block Visibility que nous avons mentionné précédemment. Mais cette fois, vous entrerez le chemin d’URL dans le champ « Chemin d’URL (Ne contient pas) ».

Une fois le plugin actif, allez dans Apparence » Éditeur dans votre tableau de bord d'administration.

De là, choisissez « Modèles », puis ouvrez « Toutes les parties de modèle ».

Vous verrez une liste de parties de modèle comme l'en-tête, le pied de page et les commentaires, en fonction de votre thème actif actuel. Par exemple, vous pouvez trouver « En-tête », ouvrir le menu à trois points et cliquer sur « Modifier ».

Une fois dans l'éditeur, trouvez 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 ».

Dépannage : Pourquoi mon menu ne change-t-il pas ?

Si vous avez configuré vos règles conditionnelles mais que le menu ne change pas lorsque vous le testez, la mise en cache en est généralement la raison.

De nombreux plugins de mise en cache WordPress stockent une version statique de vos menus pour améliorer les performances. Lorsque cela se produit, les modifications n’apparaissent pas immédiatement.

Pour résoudre ce problème, vous pouvez essayer de vider votre cache WordPress et de vérifier à nouveau.

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 basés sur des blocs, des outils comme Conditional Blocks ou Block Visibility vous offrent 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 en savoir tout sur ce plugin dans notre avis complet sur 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 modernes et plugins de menu 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 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

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.