Changer l'apparence de votre site pour différents rôles d'utilisateur peut vous aider à créer des expériences utilisateur personnalisées.
Nous avons constaté que de nombreux utilisateurs préfèrent les sites Web dotés d'interfaces personnalisées. Par exemple, vous souhaiterez peut-être afficher aux auteurs des éléments spécifiques qui sont masqués aux autres utilisateurs ou styliser certaines sections différemment pour les abonnés ou les clients.
Dans ce didacticiel, nous vous guiderons dans l'application de CSS pour des rôles d'utilisateur spécifiques dans WordPress. Cela vous aidera à personnaliser différentes zones en fonction des besoins spécifiques de vos utilisateurs.
Pourquoi et quand appliquer 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 constatons souvent le besoin de personnaliser l’apparence pour différents rôles d’utilisateur.
En effectuant des tests fractionnés sur ces sites, nous avons découvert que la personnalisation améliore considérablement l'expérience utilisateur. Une meilleure expérience utilisateur conduit finalement à plus de satisfaction client, de conversions et de ventes.
Que vous soyez propriétaire, développeur ou concepteur d'un site, contrôler l'apparence de votre site pour différents utilisateurs peut s'avérer très utile.
Voici quelques cas d’utilisation courants :
- Sites d'adhésion : Vous pouvez utiliser du CSS personnalisé pour offrir différentes expériences aux membres premium.
- Boutiques de commerce électronique : Vous pouvez mettre en évidence les paniers d'achat, les remises clients de retour et d'autres fonctionnalités pour les clients connectés.
- Blogs multi-auteurs : Gérer un blog avec plusieurs auteurs peut s'avérer compliqué. Avec du 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é.
Maintenant, le problème est de savoir comment indiquer à WordPress quel code CSS charger pour différents rôles d’utilisateur.
Application de CSS personnalisé pour des rôles d'utilisateur spécifiques dans WordPress
Le moyen le plus simple de gérer du code personnalisé, y compris CSS, dans WordPress consiste à utiliser Code WP. Il s’agit du meilleur plugin d’extraits de code pour WordPress et vous permet de gérer en toute sécurité votre CSS personnalisé en un seul endroit.
Note: UN version gratuite de WPCode est également disponible. Cependant, nous vous recommandons de passer à un forfait payant pour débloquer plus de fonctionnalités.
Pourquoi nous recommandons WPCode :
- Il vous permet d'ajouter en toute sécurité n'importe quel code personnalisé, y compris CSS, sans endommager 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 d'exécuter un extrait de code uniquement en cas de besoin.
- Vous avez accès à une vaste bibliothèque de codes d'extraits utiles, ce qui vous évite d'installer plusieurs plugins distincts.
Cela étant dit, ajoutons du CSS personnalisé et appliquons-le à des rôles d'utilisateur spécifiques.
Ajout de CSS personnalisé dans WPCode
Tout d'abord, vous devez installer et activer le Code WP plugin. Pour plus de détails, consultez notre tutoriel sur la façon d'installer un plugin WordPress.
Lors de l'activation, accédez au Extraits de code »+Ajouter un extrait page. Vous y verrez de nombreux extraits utiles pour diverses tâches.
Cependant, puisque vous ajoutez un code CSS personnalisé, vous devrez repartir de zéro en cliquant sur « + Ajouter un extrait personnalisé » sous la case « Ajouter votre code personnalisé (nouvel extrait) ».
Cela vous amènera à l'éditeur de code. Tout d'abord, vous devez saisir un titre pour votre extrait de code, puis sélectionner « Extrait CSS » sous Type de code.
Vous pouvez maintenant ajouter votre code CSS personnalisé à la zone Aperçu du code.
Pour les besoins de ce tutoriel, nous utilisons ce code, qui met en évidence le menu « Messages » 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 la logique conditionnelle du rôle utilisateur
Ensuite, faites défiler jusqu'à la case « Logique conditionnelle intelligente » et basculez le bouton à côté de l'option « Activer la logique ».
Après cela, choisissez 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 choisir.
Par exemple, vous pouvez sélectionner le statut de connexion, le rôle d'utilisateur, le type d'appareil, etc.
Sélectionnez « Rôle utilisateur » puisque vous souhaitez que ce code CSS personnalisé soit ajouté pour un rôle utilisateur particulier.
Après cela, vous pouvez sélectionner le rôle d'utilisateur auquel vous souhaitez l'appliquer.
Note: 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-le sur « Actif ».
WPCode affichera désormais votre CSS personnalisé à des rôles d'utilisateur spécifiques dans WordPress.
Ajoutez du CSS personnalisé pour des rôles d'utilisateur spécifiques dans la zone d'administration WordPress
Si vous souhaitez uniquement que votre CSS personnalisé soit ajouté dans la zone d'administration de WordPress, alors WPCode rend la tâche encore plus facile.
Sur l'écran d'édition du code, faites défiler jusqu'à l'option « Emplacement ». Cliquez sur le menu déroulant pour le développer et vous verrez de nombreux emplacements où vous pourrez charger automatiquement le CSS.
Maintenant, sélectionnez simplement l’option « En-tête d’administration » ou « Pied de page d’administration » pour charger votre code CSS dans la zone d’administration de WordPress.
Ajouter du CSS personnalisé pour des rôles d'utilisateur spécifiques dans d'autres domaines
La personnalisation de la conception sur les sites Web de commerce électronique améliore l'expérience utilisateur et il a été prouvé qu'elle réduit les ventes de paniers abandonnés.
Si vous gérez une boutique WooCommerce, vendez des cours en ligne ou vendez d'autres produits numériques, il sera utile d'ajouter du CSS personnalisé pour les clients connectés.
WPCode vous permet de choisir où ajouter du code personnalisé à un site de commerce électronique. Sous les paramètres de localisation, passez à l'onglet « Commerce électronique ».
Vous verrez plusieurs endroits où vous pourrez ajouter votre CSS personnalisé, comme avant le panier, avant le formulaire de paiement, sur les pages de produits, etc.
WPCode prend en charge WooCommerce, Easy Digital Downloads et MemberPress.
Conseils 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 CSS pour certaines de ces options :
Nous espérons que cet article vous a aidé à apprendre à appliquer CSS pour des rôles d’utilisateur spécifiques dans WordPress. Vous souhaiterez peut-être également consulter notre aide-mémoire CSS généré par WordPress par défaut pour les débutants ou consulter ces plugins et conseils pour améliorer la zone d'administration de WordPress.
Si vous avez aimé cet article, alors abonnez-vous à notre Chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Gazouillement et Facebook.
