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

Nous avons travaillé sur de nombreux sites WordPress où différents utilisateurs avaient besoin d'expériences différentes. Les membres peuvent avoir besoin de mises en page plus épurées, les auteurs pourraient bénéficier de moins de distractions, et les clients ne devraient souvent pas voir les mêmes éléments que les administrateurs.

Le défi est que WordPress n'inclut pas de moyen intégré pour styliser votre site en fonction des rôles des utilisateurs. Si vous souhaitez masquer des éléments, ajuster des mises en page ou modifier des conceptions pour des utilisateurs spécifiques, vous êtes généralement obligé de modifier les fichiers du thème ou d'ajouter du code personnalisé.

C'est là que les choses peuvent devenir risquées. Nous avons vu des utilisateurs casser accidentellement leur site simplement en ajoutant un petit extrait CSS au mauvais endroit, surtout lorsqu'ils travaillent dans les fichiers du thème ou les thèmes enfants.

La manière la plus sûre et la plus simple d'appliquer du CSS en fonction des rôles des utilisateurs est d'utiliser le plugin WPCode. Sa logique conditionnelle intégrée vous permet de cibler des rôles tels qu'Administrateurs, Éditeurs ou Abonnés sans toucher aux fichiers de votre thème.

Dans ce guide, nous vous montrerons comment appliquer du CSS personnalisé pour des rôles d'utilisateurs spécifiques à l'aide d'un outil convivial. C'est la même approche que nous utilisons sur nos propres sites lorsque nous avons besoin d'une solution rapide et sûre qui ne causera pas de problèmes plus tard.

Voici un aperçu rapide des sujets que nous aborderons dans ce guide :

Pourquoi et quand appliquer du CSS pour des rôles d'utilisateur spécifiques dans WordPress

Nous gérons divers sites Web pour nos entreprises qui nécessitent une connexion utilisateur. Nous trouvons souvent le besoin de personnaliser l'apparence pour différents rôles d'utilisateurs.

En effectuant des tests A/B sur ces sites, nous avons découvert que la personnalisation améliore considérablement l'expérience utilisateur. La recherche indique que les expériences Web personnalisées peuvent augmenter les taux de conversion jusqu'à 10-15%, faisant du style basé sur les rôles une stratégie précieuse.

Une meilleure expérience utilisateur conduit finalement à une plus grande satisfaction client et à des ventes accrues.

Que vous soyez propriétaire de site, développeur ou designer, avoir le contrôle sur l'apparence de votre site pour différents utilisateurs peut être très utile.

Voici quelques cas d'utilisation courants :

• Sites d'adhésion : Vous pouvez utiliser du CSS personnalisé pour offrir des expériences différentes aux membres premium.
• Boutiques e-commerce : Vous pouvez mettre en avant les paniers d'achat, retourner les réductions clients, et d'autres fonctionnalités pour les clients connectés.
• Blogs multi-auteurs : Gérer un blog avec plusieurs auteurs peut devenir compliqué. Avec le CSS personnalisé, vous pouvez créer une interface claire 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 avec du CSS personnalisé. Ceci est particulièrement utile pour simplifier l'interface client en masquant les widgets complexes du tableau de bord ou les notifications de plugins qui pourraient confondre les utilisateurs non techniques.

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

Comment appliquer du CSS personnalisé pour des rôles d'utilisateur spécifiques dans WordPress

La façon la plus simple de gérer du code personnalisé, y compris du CSS, dans WordPress est d'utiliser WPCode. C'est le meilleur plugin d'extraits de code pour WordPress et il 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 vous recommandons de passer à un plan payant pour débloquer plus de fonctionnalités.

Pourquoi nous recommandons WPCode :

• Il vous permet d'ajouter en toute sécurité tout code personnalisé, y compris du CSS, sans casser votre site web. Si un extrait de code ne fonctionne pas, vous pouvez facilement le désactiver.
• Il est livré avec de puissants outils d'insertion de code et de logique conditionnelle, vous permettant de n'exécuter un extrait que lorsque nécessaire.
• Vous avez accès à une immense bibliothèque de snippets utiles, vous évitant ainsi d'installer plusieurs plugins séparés.

Cela étant dit, examinons comment ajouter du CSS personnalisé pour un rôle d'utilisateur spécifique.

Ajout d'un extrait CSS personnalisé dans WPCode

Pour cet exemple, nous allons personnaliser le Tableau de bord d'administration WordPress pour un rôle spécifique (comme un Éditeur). Nous utiliserons du code qui met en surbrillance le menu « Articles » dans le backend pour vous montrer comment le processus fonctionne.

1. Tout d'abord, installez et activez le plugin WPCode. Pour plus de détails, consultez notre tutoriel sur comment installer un plugin WordPress.
2. Après l'activation, allez à la page Extraits de code » + Ajouter un extrait.
3. Survolez ‘Ajouter votre code personnalisé (nouveau fragment)’ et cliquez sur ‘+ Ajouter un fragment personnalisé’.

4. Sur l’écran suivant, sélectionnez ‘Fragment CSS’ comme type de code dans le menu déroulant à droite (il est généralement défini par défaut sur Fragment HTML).

5. Entrez un titre pour votre fragment, tel que « Mise en surbrillance du menu d’administration pour les éditeurs ».
6. Collez votre CSS personnalisé dans la zone « Aperçu du code ».

Voici le code d’exemple que nous utilisons pour cet exemple de zone d’administration :

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

Important : Sélectionner le bon emplacement

Étant donné que ce code spécifique est destiné au tableau de bord d’administration, vous devez faire défiler vers le bas jusqu’à la section « Insertion » et choisir « En-tête d’administration » comme emplacement.

Si vous ajoutiez du CSS pour le front-end de votre site (comme pour une page membre), vous laisseriez simplement l’emplacement sur « En-tête de tout le site ».

Application de la logique conditionnelle

Maintenant, assurons-nous que ce code ne s’exécute que pour le rôle utilisateur souhaité.

7. Faites défiler vers le bas jusqu’à la zone « Logique conditionnelle intelligente » et activez le commutateur sur « Activer la logique ».
8. Définissez la « Condition » sur « Afficher » et cliquez sur « + Ajouter un nouveau groupe ».

9. Sélectionnez « Rôle utilisateur » dans la liste déroulante.

10. Choisissez le rôle spécifique que vous souhaitez cibler (par exemple, Éditeur, Abonné).

11. Enfin, cliquez sur « Enregistrer le snippet » en haut à droite et faites passer le commutateur de « Inactif » à « Actif ».

Ajouter du CSS personnalisé pour des rôles d'utilisateur spécifiques dans d'autres zones

La personnalisation du design sur les sites Web de commerce électronique améliore l'expérience utilisateur et a prouvé qu'elle diminue 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é pour les clients connectés sera utile.

WPCode vous permet de cibler facilement ces pages spécifiques. Bien que vous puissiez voir des options d'emplacement comme « WooCommerce », nous vous recommandons de laisser l'Emplacement d'insertion sur En-tête du site pour tout le CSS afin d'éviter les problèmes d'affichage.

Au lieu de modifier l'emplacement, utilisez la section Logique conditionnelle intelligente. Vous pouvez ajouter des règles pour afficher le CSS uniquement lorsque le « Type de page » est « Panier WooCommerce » ou « Paiement ».

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

Foire aux questions

Voici les réponses aux questions les plus fréquemment posées sur la personnalisation de WordPress pour différents rôles d'utilisateur.

Puis-je appliquer du CSS à des rôles d'utilisateur personnalisés dans WordPress ?

Oui. WPCode vous permet de cibler n'importe quel rôle utilisateur, y compris ceux personnalisés créés par des plugins d'adhésion, des outils LMS ou du code personnalisé. Il vous suffit de vous assurer que le rôle personnalisé apparaît dans les options de logique conditionnelle.

Et si les modifications CSS n'apparaissent pas pour certains utilisateurs ?

Cela peut se produire si votre site utilise une mise en cache agressive ou un CDN. Essayez de vider votre cache, et assurez-vous que le snippet WPCode est actif et cible le bon emplacement et le bon rôle.

Puis-je prévisualiser les modifications CSS avant de les mettre en ligne ?

WPCode n'a pas d'aperçu visuel, mais vous pouvez laisser le snippet inactif pendant les tests. Nous vous recommandons d'ouvrir une fenêtre Incognito ou Privée et de vous connecter avec le rôle utilisateur spécifique (par exemple, en tant qu'Abonné) pour inspecter les modifications à l'aide des outils de développement de votre navigateur.

Est-il sûr d'utiliser WPCode au lieu de modifier les fichiers du thème ?

Absolument. Chez WPBeginner, nous utilisons WPCode car il maintient tout notre code personnalisé séparé des fichiers du thème, de sorte que les modifications ne sont pas perdues lors des mises à jour. De plus, il est plus sûr et plus facile de gérer les snippets en un seul endroit.

Ressources supplémentaires

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 du contenu personnalisé à différents utilisateurs dans WordPress
• Comment personnaliser les couleurs de 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 du CSS pour des rôles d'utilisateurs spécifiques dans WordPress. Vous voudrez peut-être aussi consulter notre fiche de référence CSS générée par défaut par WordPress pour les débutants, ou consulter ces plugins et astuces pour améliorer la zone d'administration de WordPress.