Comment mettre en évidence les commentaires de l’auteur dans WordPress

Votre section de commentaires est l'endroit où votre communauté prend vie. C'est un espace important pour la connexion, la conversation et l'engagement des lecteurs.

En tant qu'auteur, vos réponses sont un élément clé de cette interaction. Vous voulez vous assurer que votre voix est facile à trouver pour les lecteurs afin d'encourager encore plus de discussions.

Mettre en évidence vos commentaires leur donne l'attention qu'ils méritent. Cette touche simple rend votre espace de discussion entier plus professionnel, organisé et engageant.

Nous pensons que de petits choix de conception peuvent avoir un impact important sur l'expérience utilisateur. Et c'est l'un des changements les plus faciles et les plus efficaces que vous puissiez faire.

Dans cet article, nous vous montrerons comment mettre facilement en évidence les commentaires de l'auteur dans WordPress.

Pourquoi mettre en évidence les commentaires de l'auteur dans WordPress ?

Les commentaires sont un excellent moyen de renforcer l'engagement des utilisateurs sur votre site Web. Si vous voulez obtenir plus de commentaires sur vos articles, vous pouvez l'encourager en participant activement aux discussions.

Pour un nouveau blog WordPress, vous pouvez facilement répondre aux commentaires et participer aux discussions avec vos lecteurs. Si vous gérez un blog multi-auteurs, vous pouvez encourager les auteurs à aider à la modération des commentaires également.

Cependant, la plupart des thèmes WordPress ne font pas de distinction entre les commentaires, et ils sont listés en utilisant le même style.

Un lecteur occasionnel peut parcourir les commentaires, sans réaliser le contenu supplémentaire apporté par l'auteur dans la discussion.

Mettre en évidence les commentaires de l'auteur vous aide à y remédier et rend les commentaires de l'auteur plus distincts et plus visibles.

L'objectif ultime ici est d'encourager les nouveaux utilisateurs à participer aux commentaires et, à terme, à s'abonner à votre newsletter ou à devenir un client.

Cela étant dit, examinons comment mettre facilement en évidence les commentaires de l'auteur dans WordPress.

• Mettre en évidence l'auteur des commentaires dans WordPress
• Mettre en évidence les commentaires par rôle utilisateur dans WordPress

Mettre en évidence l'auteur des commentaires dans WordPress

La façon la plus simple de mettre en évidence les commentaires de l'auteur d'un article est d'ajouter du CSS personnalisé à votre thème WordPress. Cela vous permet d'ajouter facilement le code nécessaire et de voir un aperçu en direct de son apparence sur votre site Web sans l'enregistrer.

Tout d'abord, vous devez visiter Apparence » Personnaliser dans la zone d'administration de WordPress. Cela lancera l'interface du personnaliseur de thème WordPress. Vous remarquerez un tas d'options dans une colonne sur votre gauche et un aperçu en direct de votre site Web.

À partir de là, vous devez cliquer sur l'onglet « CSS additionnel ».

Cela ouvrira une zone de texte où vous ajouterez le CSS personnalisé.

Cependant, vous voudrez voir à quoi ressemblera le CSS personnalisé une fois appliqué.

Pour ce faire, vous devez accéder à un article de blog qui contient des commentaires d'un auteur d'article.

Faites défiler jusqu'à la section des commentaires, puis ajoutez le CSS personnalisé suivant dans la boîte CSS personnalisée à gauche.

.bypostauthor { 
background-color: #e7f8fb;
}

Vous remarquerez immédiatement que le commentaire de l'auteur change pour correspondre au CSS personnalisé que vous avez saisi.

Alors, comment tout cela fonctionne-t-il ?

Vous voyez, WordPress ajoute des classes CSS par défaut à différentes zones de votre site Web. Ces classes CSS sont présentes quel que soit le thème WordPress que vous utilisez.

Dans cet exemple de code, nous avons utilisé la classe CSS .bypostauthor, qui est ajoutée à tous les commentaires postés par un auteur d'article.

Ajoutons quelques styles CSS supplémentaires pour le rendre encore plus visible. Voici un exemple de code qui ajoute une petite étiquette « Auteur » aux commentaires de l'auteur de la publication et une bordure autour de l'image d'avatar de l'auteur.

.bypostauthor:before { 
content:"Author";
float:right;
background-color:#FF1100;
padding:5px;
font-size:small;
font-weight:bold;
color:#FFFFFF;
}
.bypostauthor .avatar {
border:1px dotted #FF1100;
}

Voici à quoi cela ressemblait sur notre site de test.

Mettre en évidence les commentaires par rôle utilisateur dans WordPress

Désormais, de nombreux blogs WordPress ont des membres d'équipe responsables de répondre aux commentaires. Les sites Web populaires peuvent avoir l'auteur de la publication, l'administrateur et les modérateurs répondant tous aux commentaires pour stimuler l'engagement des utilisateurs.

Comment mettre en évidence un commentaire ajouté par un membre du personnel qui n'est pas l'auteur réel de la publication ?

Il existe une astuce facile pour y parvenir. Cependant, cela nécessite d'ajouter du code personnalisé à votre site Web WordPress. Si vous ne l'avez jamais fait auparavant, consultez notre article sur comment coller des extraits du Web dans WordPress.

Tout d'abord, vous devez ajouter le code suivant au fichier functions.php de votre thème ou dans un plugin d'extraits de code :

if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'wpb_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
}
  
// Get comment author role 
function wpb_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author name
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst($comment_user_role) . '</span>';
} else { 
$this->comment_user_role = '';
} 
return $author;
} 
  
// Display comment author                   
function wpb_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

Au lieu de modifier le fichier functions.php de votre thème, nous vous recommandons d'ajouter ce code avec WPCode.

Ce plugin d'extraits de code permet d'ajouter du code personnalisé dans WordPress de manière sûre et facile.

Pour commencer, vous devez installer et activer le plugin gratuit WPCode. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Une fois le plugin activé, accédez à Extraits de code » Ajouter un extrait depuis votre tableau de bord WordPress.

Ensuite, survolez l'option « Ajouter votre code personnalisé (Nouvel extrait) » avec votre souris et cliquez sur le bouton « Ajouter un extrait personnalisé ».

Ensuite, sélectionnez « Extrait PHP » comme type de code parmi les options qui apparaissent à l'écran.

Maintenant, vous pouvez ajouter un titre pour votre extrait et coller le code ci-dessus dans la boîte « Aperçu du code ».

Après cela, basculez simplement le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l'extrait » en haut de la page.

Ce code ajoute simplement l'étiquette du rôle utilisateur à côté du nom de l'auteur du commentaire. Voici à quoi cela ressemble sans aucun style personnalisé.

Rendons-le un peu plus joli en ajoutant du CSS personnalisé. Accédez à la page Apparence » Personnaliser et basculez vers l'onglet CSS additionnel.

Vous pouvez utiliser le CSS suivant pour styliser l'étiquette du rôle utilisateur dans les commentaires.

.comment-author-label {
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
}
  
.comment-author-label-editor {  
background-color:#efefef;
}
.comment-author-label-author {
background-color:#faeeee;
}
  
.comment-author-label-contributor {
background-color:#f0faee;   
}
.comment-author-label-subscriber {
background-color:#eef5fa;   
}
  
.comment-author-label-administrator { 
background-color:#fde9ff;
}

Voici à quoi cela ressemblait sur notre site de test. N'hésitez pas à modifier le code pour qu'il corresponde aux couleurs et au style de votre thème.

Pour plus de détails, vous voudrez peut-être lire notre article sur la façon d'ajouter des étiquettes de rôle utilisateur aux commentaires WordPress.

Nous espérons que cet article vous a aidé à apprendre comment mettre en évidence les commentaires de l'auteur dans WordPress. Vous pourriez également vouloir consulter notre tutoriel sur comment mettre en évidence les nouveaux articles pour les visiteurs récurrents dans WordPress et nos sélections d'experts des meilleurs plugins de boîte de biographie d'auteur pour WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.