Comment appliquer le CSS pour des rôles d’utilisateur spécifiques dans WordPress (méthode facile)

Modifier l’apparence de votre site en fonction des différents rôles des utilisateurs peut vous aider à créer des expériences personnalisées.

Nous avons constaté que de nombreux utilisateurs préfèrent les sites dotés d’interfaces personnalisées. Par exemple, vous pourriez vouloir afficher des éléments spécifiques aux auteurs qui sont cachés aux autres utilisateurs ou styliser certaines sections différemment pour les abonnés ou les clients.

Dans ce tutoriel, nous vous guiderons dans l’application de CSS pour des rôles d’utilisateurs spécifiques dans WordPress. Cela vous aidera à personnaliser différentes zones en fonction des besoins spécifiques de vos utilisateurs.

Pourquoi et quand appliquer les CSS pour des rôles d’utilisateurs spécifiques dans WordPress

Nous gérons plusieurs sites pour nos entreprises qui nécessitent une connexion de l’utilisateur. Nous constatons souvent qu’il est nécessaire de personnaliser l’apparence pour différents rôles d’utilisateurs.

En effectuant des tests fractionnés sur ces sites, nous avons découvert que la personnalisation améliore considérablement l’expérience de l’utilisateur. Une meilleure expérience utilisateur se traduit en fin de compte par une plus grande satisfaction des clients, des conversions et des ventes.

Que vous soyez propriétaire d’un site, développeur ou concepteur, il peut être très utile de pouvoir contrôler l’apparence de votre site pour différents utilisateurs.

Voici quelques cas d’utilisation courants :

• Sites d’adhésion : vous pouvez utiliser des feuilles de style CSS personnalisées pour offrir différentes expériences aux membres premium.
• Magasins de commerce électronique : vous pouvez mettre en évidence les paniers d’achat, les remises pour les clients qui reviennent et d’autres caractéristiques pour les clients connectés.
• Blogs à auteurs multiples : La gestion d’un blog à auteurs multiples peut s’avérer compliquée. Avec un CSS personnalisé, vous pouvez créer une interface propre et efficace pour les éditeurs tout en gardant les choses simples pour les contributeurs et les abonnés.
• Sites clients : vous pouvez créer une zone d’administration simplifiée pour les clients en masquant certains éléments à l’aide d’une feuille de style CSS personnalisée.

Maintenant, le problème est de savoir comment indiquer à WordPress quel code CSS charger pour les différents rôles d’utilisateur.

Appliquer des CSS personnalisés pour des rôles d’utilisateurs spécifiques dans WordPress

La façon la plus simple de gérer le code personnalisé, y compris le CSS, dans WordPress est d’utiliser WPCode. C’est la meilleure extension d’extraits de code pour WordPress et vous permet de gérer en toute sécurité votre CSS personnalisé en un seul endroit.

Remarque : une version gratuite de WPCode est également disponible. Cependant, nous recommandons de passer à un plan payant pour déverrouiller plus de fonctionnalités.

Pourquoi nous recommandons WPCode :

• Il vous permet d’ajouter en toute sécurité n’importe quel code personnalisé, y compris des CSS, sans casser votre site. Si un extrait de code ne fonctionne pas, vous pouvez facilement le désactiver.
• Il est doté de puissants outils d’insertion de code et de logique conditionnelle, ce qui vous permet de n’exécuter un extrait que lorsque c’est nécessaire.
• Vous avez accès à une vaste bibliothèque de codes contenant des extraits utiles, ce qui vous permet d’enregistrer plusieurs extensions distinctes.

Ceci étant dit, ajoutons quelques CSS personnalisés et appliquons-les à des rôles d’utilisateurs spécifiques.

Ajout de CSS personnalisés dans WPCode

Tout d’abord, vous devez installer et activer l’extension WPCode. Pour plus de détails, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Après l’activation, rendez-vous sur la page  » +Ajouter un extrait de code « . Vous y trouverez de nombreux snippets utiles pour diverses tâches.

Cependant, étant donné que vous ajoutez un code CSS personnalisé, vous devrez repartir de zéro en cliquant sur « + Add Custom Snippet » (Ajouter un extrait personnalisé) dans la case « Add Your Custom Code (New Snippet) » (Ajouter votre code personnalisé (nouvel extrait)).

Vous accédez alors à l’éditeur de code. Tout d’abord, vous devez saisir un titre pour votre extrait de code et sélectionner « CSS Snippet » sous Code Type.

Vous pouvez maintenant ajouter votre code CSS personnalisé à la boîte de prévisualisation du code.

Pour les besoins de ce tutoriel, nous utilisons ce code, qui met en évidence le menu « Publications » dans la zone d’administration en changeant sa couleur d’arrière-plan. Vous pouvez utiliser votre propre code CSS ici :

li#menu-posts {
    background-color: #bf0505;
}

Choisir le rôle de l’utilisateur Logique conditionnelle

Ensuite, descendez jusqu’à la case « Logique conditionnelle intelligente » et activez le commutateur situé à côté de l’option « Activer la logique ».

Choisissez ensuite la « condition » (Afficher ou Masquer), puis cliquez sur « Ajouter un nouveau groupe ».

Cliquez sur la première case de la règle pour la développer. Vous verrez une liste de règles parmi lesquelles vous pourrez choisir.

Par exemple, vous pouvez sélectionner le statut de connexion, le rôle de l’utilisateur, le type d’appareil, etc.

Sélectionnez « Rôle de l’utilisateur » si vous souhaitez que ce code CSS personnalisé soit ajouté pour un rôle d’utilisateur particulier.

Ensuite, vous pouvez sélectionner le rôle de l’utilisateur auquel vous souhaitez l’appliquer.

Remarque : vous pouvez ajouter plusieurs règles de logique conditionnelle en cliquant sur le bouton « + Ajouter un nouveau groupe ».

Une fois que vous avez terminé, cliquez sur « Enregistrer l’extrait » dans le coin supérieur droit de l’écran, puis passez à « Actif ».

WPCode affichera désormais votre CSS personnalisé pour des rôles d’utilisateurs spécifiques dans WordPress.

Ajouter des CSS personnalisés pour des rôles d’utilisateurs spécifiques dans la zone d’administration de WordPress

Si vous souhaitez uniquement que votre CSS personnalisé soit ajouté dans la zone d’administration de WordPress, alors WPCode rend les choses encore plus faciles.

Dans l’écran d’édition du code, descendez jusqu’à l’option « Emplacement ». Cliquez sur le menu déroulant pour le développer, et vous verrez un tas d’emplacements où vous pouvez charger automatiquement le CSS.

Il vous suffit maintenant de sélectionner l’option « Admin header » ou « Admin footer » pour charger votre code CSS dans la zone d’administration de WordPress.

Ajouter des CSS personnalisés pour des rôles d’utilisateurs spécifiques dans d’autres domaines

La personnalisation du design sur les sites de commerce électronique permet de prospecter une meilleure expérience utilisateur et il a été prouvé qu’elle diminuait les ventes de paniers abandonnés.

Si vous gérez une boutique WooCommerce, vendez des cours en ligne ou d’autres produits numériques, l’ajout de CSS personnalisés pour les clients connectés sera utile.

WPCode vous permet de choisir l’endroit où ajouter un code personnalisé à un site de commerce électronique. Dans les paramètres d’emplacement, passez à l’onglet « eCommerce ».

Vous verrez plusieurs endroits où vous pouvez ajouter votre CSS personnalisé, notamment avant le panier, avant le formulaire de validation de la commande, sur les pages de produits, etc.

WPCode prend en charge WooCommerce, Easy Digital Downloads et MemberPress.

Conseils sur les bonus

Voici quelques ressources supplémentaires pour vous aider à concevoir des expériences utilisateur personnalisées dans WordPress. Vous n’avez même pas besoin d’apprendre le CSS pour certaines de ces options :

• Comment afficher un contenu personnalisé pour différents utilisateurs dans WordPress
• Comment personnaliser les couleurs sur votre site WordPress
• Comment personnaliser et styliser vos formulaires WordPress (2 méthodes faciles)
• Comment créer une page d’accueil personnalisée dans WordPress (3 méthodes)

Nous espérons que cet article vous a aidé à apprendre comment appliquer le CSS pour des rôles d’utilisateurs spécifiques dans WordPress. Vous pouvez également consulter notre antisèche CSS générée par défaut par WordPress pour les débutants ou consulter ces extensions et astuces pour améliorer la zone d’administration 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.