WordPress affiche le même menu de navigation pour tout le monde. Cependant, vous pourriez vouloir personnaliser le menu selon qu’un client/cliente est connecté ou non.
Afficher des menus différents pour les utilisateurs/utilisatrices connectés dans WordPress est un excellent moyen de créer une expérience plus personnalisée. Il vous permet d’afficher un contenu pertinent uniquement à ceux qui sont connectés, comme les détails du compte ou des ressources exclusives.
Dans ce guide, nous allons expliquer comment configurer différents menus pour les utilisateurs/utilisatrices connectés en utilisant 2 méthodes.
Pourquoi afficher des menus différents pour les utilisateurs/utilisatrices connectés dans WordPress ?
Modifier les différentes zones de votre site WordPress en fonction de vos internautes et de leur activité donne à votre site une impression de personnalisation pour chaque compte.
Ce contenu personnalisé vous aide à améliorer l’expérience des utilisateurs sur votre site WordPress.
Si vous gérez un site web sur lequel les utilisateurs/utilisatrices n’ont pas besoin de s’inscrire ou de se connecter, vous pouvez probablement utiliser les mêmes menus de navigation sur l’ensemble de votre site. En revanche, d’autres sites peuvent tirer un grand profit de l’affichage de menus personnalisés pour les utilisateurs/utilisatrices connectés.
Par exemple, les sites web tels qu’un magasin en ligne, une plateforme d’apprentissage en ligne ou une communauté de sites d’adhésion WordPress, peuvent tous bénéficier de menus de navigation personnalisés.
Un menu de navigation personnalisé pour les utilisateurs/utilisatrices connectés les aide à trouver plus facilement ce pour quoi ils se sont inscrits.
Par exemple, un compte peut être géré par un utilisateur/utilisatrice sur une boutique en ligne, ou un membre d’une communauté payante peut facilement renouveler son abonnement ou voir les cours en ligne exclusifs qu’il a achetés.
Par défaut, WordPress vous permet de créer autant de menus de navigation que vous le souhaitez. Cependant, vous pouvez uniquement choisir d’afficher un seul menu à un Emplacement particulier dans votre thème WordPress.
Avant de définir des menus pour les utilisateurs connectés, vous devez d’abord créer deux menus de navigation distincts. L’un sera destiné aux utilisateurs/utilisatrices connectés, l’autre aux utilisateurs/utilisatrices déconnectés. Premiers pas.
Une petite note ! Les méthodes que nous partageons sont conçues pour les personnes utilisant des thèmes WordPress classiques. Si vous utilisez un thème basé sur blocs avec des fonctionnalités d’Éditeur de site complet (Éditeur de site) à partir de WordPress 5.8, cette méthode pourrait ne pas fonctionner.
Créer des menus pour les utilisateurs/utilisatrices connectés et non connectés dans WordPress
Pour créer des menus distincts pour les deux types d’utilisateurs, vous devez vous rendre 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 pour tous les utilisateurs/utilisatrices, celui-ci peut être votre menu par défaut.
Ensuite, vous pouvez cliquer sur le lien « créer un nouveau menu » pour créer un nouveau menu personnalisé pour vos utilisateurs/utilisatrices connectés.
Ici, vous pouvez ajouter les éléments de menu que vous souhaitez afficher aux utilisateurs/utilisatrices inscrits ou connectés. Par exemple, vous pouvez ajouter un lien de déconnexion à votre menu.
Sur le côté gauche de l’écran, vous pouvez voir une liste des pages de votre site. Il vous suffit de cocher la case située à côté de la page que vous souhaitez ajouter à votre menu et de cliquer sur le bouton « Ajouter au menu ».
Vous pouvez également faire glisser les éléments de menu sur le côté droit de l’écran pour les réorganiser.
Plus bas dans la page, vous pouvez choisir un Emplacement pour afficher votre menu. Mais il n’est pas nécessaire d’assigner un emplacement à ce menu pour l’instant. Nous le ferons ultérieurement dans cet article.
N’oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour stocker vos modifications.
Pour plus de détails sur la création de menus, consultez notre guide du débutant sur les menus de navigation WordPress.
Vous êtes maintenant prêt à afficher différents menus aux utilisateurs/utilisatrices connectés. Voici un aperçu rapide de toutes les méthodes que nous allons aborder dans ce guide :
Examinons la première méthode.
Méthode 1. Afficher des menus différents pour les utilisateurs/utilisatrices connectés dans WordPress à l’aide d’un plugin
La façon la plus simple d’afficher différents menus aux utilisateurs/utilisatrices connectés est d’utiliser le plugin Conditional Menus. Commençons donc par l’installer et l’activer.
Pour plus de détails, vous pouvez consulter notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois activé, vous devrez naviguer vers Apparence » Menus depuis votre Tableau de bord WordPress. Ensuite, passez à l’onglet » Gérer les emplacements « .
À partir de cette page, vous verrez la liste des Emplacements de menu disponibles définis dans votre thème WordPress et les menus qui s’affichent actuellement.
Par exemple, notre emplacement « Menu principal » affiche actuellement un « Menu principal ».
Nous devons maintenant demander à l’extension d’afficher un menu différent lorsqu’une certaine condition est remplie.
Pour ce faire, cliquez sur le lien « + Menu conditionnel ». Ensuite, vous pouvez sélectionner dans le menu déroulant le menu de navigation que vous souhaitez afficher aux utilisateurs/utilisatrices connectés.
Cliquez ensuite sur le lien « + Conditions ».
Une fenêtre surgissante s’affiche, dans laquelle vous pouvez choisir parmi plusieurs conditions.
Il suffit de cocher la case située à côté de l’option « Utilisateur connecté », puis de cliquer sur le bouton « Enregistrer ».
Vous pouvez maintenant visiter votre site pour voir le menu des utilisateurs/utilisatrices connectés en action. Vous pouvez également vous déconnecter de votre administration WordPress pour voir le menu de navigation qui sera affiché à tous les autres utilisateurs/utilisatrices.
Méthode 2. Sélectionner manuellement le menu des personnes connectées dans WordPress à l’aide d’un code
Cette méthode nécessite d’ajouter du code à votre site WordPress. Si vous ne l’avez jamais fait auparavant, consultez notre guide sur la manière de copier et coller des extraits de code dans WordPress.
En général, vous devez ajouter un extrait de code au fichier functions.php de votre thème ou à une extension spécifique à votre site. Cependant, nous ne recommandons pas cette méthode car elle peut potentiellement causer des problèmes avec votre site.
A la place, vous pouvez utiliser l’extension WPCode.
WPCode vous permet d’ajouter des extraits de code personnalisés à votre site sans modifier directement les fichiers du thème. Il aide également à gérer ces extraits et s’assure qu’ils sont exécutés en toute sécurité, minimisant ainsi le risque de casser votre site.
Pour Premiers pas, installons l’extension WPCode. Vous pouvez utiliser la version gratuite de WPCode, car elle contient tout ce dont vous avez besoin pour afficher différents menus aux utilisateurs/utilisatrices connectés.
Une fois installé, vous voudrez naviguer vers Extraits de code « + Ajouter des extraits.
La galerie d’extraits de code de WPCode s’ouvre alors.
À partir de là, vous pouvez cliquer sur le bouton « + Ajouter un extrait personnalisé ».
Vous arrivez alors dans l’éditeur de texte du WPCode.
L’étape suivante consiste à ajouter un titre à votre extrait de code et à choisir « Extrait HTML » dans le menu déroulant « Type de code ».
Une fois cela fait, il suffit de copier et de coller le code suivant dans le champ « Prévisualisation du code » :
function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
// Logged in menu to display
$args['menu'] = 43;
} else {
// Non-logged-in menu to display
$args['menu'] = 35;
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
Voici à quoi cela pourrait ressembler dans votre éditeur/éditrices WPCode :
Confirmez que vous remplacez 43 et 35 par les ID des menus de navigation que vous avez créés précédemment.
Vous pouvez trouver l’ID d’un menu de navigation en le sélectionnant sur la page « Menus ». Vous verrez le numéro d’ID du menu dans la barre d’adresse de votre navigateur.
Une fois que vous vous êtes assuré que tous les détails sont corrects, cliquez sur le bouton bleu « Enregistrer l’extrait ».
Et c’est tout ! Nous espérons que cet article vous a aidé à apprendre comment afficher facilement différents menus de navigation aux utilisateurs/utilisatrices connectés sur WordPress. Ensuite, vous pouvez également consulter notre guide sur la façon de permettre aux utilisateurs d’inviter leurs amis à s’inscrire dans WordPress et comment styliser les menus de navigation de WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Alex says
Thanks for the code – works as it should, appreciated
WPBeginner Support says
Glad our guide could be helpful!
Administrateur
Paul K says
Great! But where do I find my theme’s function.php?
WPBeginner Support says
It is in your theme’s folder, you can see more about it in our page below:
https://www.wpbeginner.com/glossary/functions-php/
Administrateur
Paul K says
OK, found it, thanks. But I’m puzzled where to put the additional code. I’m not familiar with PHP but I see the « » at the end.
WPBeginner Support says
For pasting code snippets, you want to take a look at our guide below that covers where to paste into your functions.php as well as where to past other code should you look at other code-based tutorials:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Administrateur
Clara says
Works great! I have the problem that I have to menus at the top: A headliner menu and the main menu. When I use the Code and the user is logged in bove menus switch to the logged-in menu. How can I adjust the code so that the headliner menu remains the same?
WPBeginner Support says
For what you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/
Administrateur
Sergio says
Thank you very much!
WPBeginner Support says
You’re welcome
Administrateur
Echo says
Would be much easier if you could do it for a specific menu item rather than an entire menu. What would someone with 499 menu items have to do?
WPBeginner Support says
We would not recommend that many menu items as that would be far too many for someone to navigate through which would likely cause an SEO issue if your menu links don’t add value for your visitors
Administrateur
Evaldo Santos says
100%. Just configured it with Sahifa Theme and works like a charm.
Keep up with this good work.
Jason says
Thank you!!
Bk Millanzi says
this is so helpful, but is there a way to display a username and avatar which can act as a container of other profile menu items, as a drop-down menu?
Amarnadh says
The path you showed is well and good only for just showing custom menus. But what if i want to show my content to a specific logged in user based on his interests. That is in detail, like various deals sites, when we login and save our interests, the next moment we see deals only on that specific topic. Can we make that possible using WordPress plugins.
Sam says
Hey there, thanks for the great work. I have a question about multiple user roles.
So I have two main menus, Menu 1 and Menu 2.
I would like all users (logged in or out) to see the main menu unless they have the userole of « Alt », in which case Menu 1 is replaced by Menu 2.
How would I go about doing that?
Tendai Mugoni says
It is working, thanks
Curtis says
@ERICLEE You can create a child theme to prevent that from happening. I just added this code and need to do the same thing.
shahzaib sarwer says
can it possible to add the menus in the subscriber profile accept than the home page these menu pages not show on the home page, just on the every subscriber profile. if it possible then please guide me, and tell me how use any pluging for this.
shahzaib sarwer says
can it possible to add the menus in profile of the subscriber in wp site , if it possible so please anyone guide me what i do and how use any pluging of this work.
Yuda says
How can the same be achieeved on a multi-language members site? For example show different menu for users logged in in english and a different menu for users logged in with german?
WPBeginner Support says
Hi Yuda,
If you are using a multilingual WordPress plugin then this should be handled by the plugin. You will essentially need to provide translations for your multilingual menus.
Administrateur
solomon says
i have added log in menu and logout menu, how do i configure the page for login and log out ???,,