Sommaire
Vous souhaitez créer une section de commentaires élégante pour votre site web ? La section de commentaires est l’endroit où tous vos visiteurs discuteront de votre contenu et laisseront des commentaires. La section de commentaires par défaut est extrêmement simple et n’a pas de style. C’est pourquoi il est important que les développeurs web prennent le temps de personnaliser entièrement leur section de commentaires.
Comme pour toutes les formes de stylisme dans WordPress, cette méthode tournera autour du CSS et du HTML, mais ne vous inquiétez pas, elle est également accessible aux débutants. Si vous avez désactivé votre section de commentaires, vous pouvez envisager de l’activer à nouveau. Aujourd’hui, je vais vous montrer comment styliser votre section de commentaires et les différents designs que vous pouvez utiliser dans WordPress.
Pourquoi la section commentaires est-elle importante ?
Vous êtes peut-être un nouveau site web qui n’a reçu que quelques commentaires et ne voit pas tout à fait l’intérêt de la section ou ne sait tout simplement pas comment les traiter. Vous pouvez également être l’un des nombreux sites web qui désactivent leur section de commentaires pour éviter les commentaires négatifs qui posent problème pour la plupart des sections de commentaires. Quoi qu’il en soit, les sections de commentaires constituent une partie importante de tout site web et contribuent à créer un environnement communautaire.
Si vous ne recevez pas de nombreux commentaires, cela peut être dû au fait que votre section de commentaires n’est pas très attrayante. Oui, les gens s’intéressent vraiment à l’aspect de la zone. Il est extrêmement important de créer un design qui s’harmonise avec le reste du site et qui aide à faire ressortir tous les commentaires. Non seulement le style est important, mais le fait d’autoriser plus d’avatars est une autre façon d’améliorer la section des commentaires.
Comment créer une section de commentaires élégante dans WordPress
Aujourd’hui, je vais vous montrer comment styliser votre section de commentaires et les différents modèles que vous pouvez utiliser dans WordPress. Les motifs que vous choisissez doivent s’harmoniser avec votre thème actuel et vous pouvez entièrement personnaliser les options de couleur. Gardez à l’esprit qu’il y a des centaines de modèles parmi lesquels vous pouvez choisir et je ne ferai que partager quelques modèles populaires du web.
Si vous n’avez pas d’expérience en matière de codage, ne vous inquiétez pas. Il y a deux choses à garder à l’esprit. La première est que le copier-coller de code qui n’est pas écrit pour votre thème ne fonctionnera probablement pas. Par exemple, prendre des styles de commentaires pour le thème Twenty Twelve et les utiliser sur un site web qui a Poséidon n’aura aucun résultat. En effet, chaque thème a des conventions d’appellation différentes. Vous devez connaître la convention d’appellation de votre thème. Ensuite, vous ne devrez modifier les options de couleur et de police que lorsque vous aurez réussi à le faire fonctionner.
Pour référence, tous les exemples seront écrits pour le thème des Vingt-Douze.
Alternance des couleurs de fond des commentaires
L’un des choix les plus populaires pour la conception des commentaires est l’alternance des couleurs en arrière-plan. Cela aide les visiteurs à distinguer les commentaires les uns des autres. C’est une bonne règle de base de choisir les couleurs qui sont présentes dans votre thème.
Dans le panneau d’administration de gauche, cliquez sur Apparence et sélectionnez l’option Modifier le CSS.
Cliquez sur l’option CSS supplémentaire.
Copiez et collez le code suivant dans la case appropriée texte :
.commentlist .even .comment {
background:#c0c0c0 ;
.commentlist .odd .comment {
background: #ffd700 ;
Gardez à l’esprit que si vous n’utilisez pas le même thème, cela ne fonctionnera pas. Si vous avez besoin d’une aide supplémentaire, consultez la page d’aide de votre thème. Vous devriez pouvoir voir les changements au fur et à mesure que vous ajoutez le code.
Vous pouvez changer les couleurs à votre guise. Voici une liste des codes de couleur CSS. Assurez-vous que vous pouvez toujours lire le commentaire après l’application de la couleur. Cliquez sur le bouton “Publier” pour enregistrer les modifications.
Définition du champ du nom de l’auteur
Une autre amélioration pour la section des commentaires est de permettre de savoir facilement qui a écrit le commentaire. L’ajout d’un arrière-plan de couleur différente pour les informations sur l’auteur du commentaire permet d’y parvenir.
Copiez et collez le code suivant dans la zone de texte appropriée :
.comments-area article header {
marge : 0 0 48px ;
Débordement : caché ;
position : relative ;
background: #006400 ;
couleur:#FFFFFF ;
padding: 10px ;
Une fois de plus, assurez-vous que le nom et les informations de l’auteur sont visibles. Cliquez sur le bouton “Publier” pour enregistrer votre travail.
Boutons de style sur vos commentaires
La plupart des sections de commentaires comportent plusieurs boutons. Ils comprennent généralement un bouton Modifier, Répondre et Annuler la réponse. Le bouton “Annuler la réponse” n’est visible que lorsque vous laissez une réponse.
Voici le code du bouton “Annuler la réponse” :
#cancel-comment-reply-link {
text-align:center ;
background: #000000 ;
border:1px solide #55737D ;
rayon-frontière:3px ;
rembourrage : 3px ;
largeur:50px ;
couleur:#FFFFFF ;
box-shadow : 1px 1px 2px 2px #4f4f4f ;
texte-décoration:aucun ;
Cliquez sur le bouton “Publier” pour enregistrer votre travail.
S’assurer que tout correspond
L’objectif de la section des commentaires est de la rendre plus attrayante. Le problème, c’est quand elle ne correspond pas au reste de votre site web. Elle peut sembler déplacée ou le reste de votre site doit être mis en valeur. Dans les deux cas, vous devez vous assurer que tout correspond et que rien ne se démarque ou ne semble mauvais.
Le plus grand facteur qui peut conduire à cela est le choix des couleurs. Je recommande de n’utiliser que des couleurs de votre thème ou des couleurs similaires. On n’insistera jamais assez sur ce point, assurez-vous que tout le texte est visible. C’est l’une des erreurs les plus courantes sur les sites web aujourd’hui et elle ne devrait pas se produire.
Quels sont les modèles que vous utilisez ? Pensez-vous que votre section de commentaires est plus attrayante maintenant ?
