Clicky

Comment styliser les commentaires de l'auteur du message dans Oxygen Builder ?

J'utilise le système de commentaires natif de WordPress. J'ai essayé d'utiliser d'autres systèmes comme JetPack, WPDiscuz, Disqus, CommentLuv, etc., mais je finis toujours par revenir aux commentaires natifs de WordPress.

Modifier les commentaires de WordPress

Les commentaires de WordPress sont un peu ennuyeux, c'est pourquoi j'y apporte de petites modifications CSS et de code pour les rendre un peu plus vivants. Par exemple,

  • Je pourrais changer le Laissez une réponse texte pour Vous avez aimé l'article ? Laissez un commentaire
  • Je vais peut-être faire en sorte que les avatars soient ronds au lieu d'être carrés.
  • et je pourrais styliser les commentaires des auteurs de billets pour qu'ils aient une ligne sur le côté gauche afin qu'ils se distinguent des commentaires des lecteurs.

Problèmes lors de la mise en forme des commentaires de l'auteur du message

Si vous avez beaucoup de commentaires sur un article particulier et que vous avez configuré ces commentaires pour qu'ils soient imbriqués, il y aura des commentaires et des sous-commentaires au fur et à mesure que les gens ajouteront leurs commentaires et que l'auteur de l'article répondra.

Ainsi, lorsque vous donnez un style aux commentaires de l'auteur du message, vous devez veiller à ne pas donner un style aux commentaires des lecteurs lorsqu'ils apparaissent en tant que sous-commentaires des commentaires de l'auteur du message. Votre CSS doit cibler les commentaires de l'auteur du message et pas ceux des autres.

Le CSS ci-dessous permet de mettre en évidence uniquement les commentaires de l'auteur du message.

CSS pour mettre en évidence les commentaires de l'auteur du message

Le CSS ci-dessous ajoute une ligne verticale à gauche du commentaire si celui-ci a été fait par un utilisateur connecté qui est également l'auteur du message.

Le CSS ci-dessous ajoute une couleur d'arrière-plan et une bordure au nom de l'auteur du commentaire et au texte du commentaire, si le commentaire a été fait par un utilisateur connecté qui est également l'auteur du message.

J'ajoute du code CSS supplémentaire en utilisant WPCodeBox parce que c'est fabuleux. Mais vous pouvez ajouter du code CSS comme bon vous semble.

Ce CSS fonctionne-t-il dans les sites non oxygénés ?

Si vous n'utilisez pas les commentaires natifs de WordPress sur Oxygen Builder, et que le code ne fonctionne pas dans votre thème WordPress, vérifiez peut-être l'orthographe précise des noms de classe sur votre thème, et modifiez le code en conséquence.

Un exemple

Je n'ai pas beaucoup de commentaires sur ce site, je ne peux donc pas démontrer le fonctionnement complet du CSS. Mais si vous visitez l'un de mes sites clients appartenant au Dr Susanna McIntyre, vous y trouverez de nombreux commentaires.

Dans le cas de cette cliente, la couleur de fond du contenu de son commentaire ainsi que son nom sont stylisés et une ligne est placée sur le côté gauche du contenu du commentaire.