Comment mettre en évidence les commentaires des auteurs/autrices dans WordPress

Voulez-vous mettre en évidence les commentaires de l’auteur/autrice dans les publications WordPress de votre site ?

Mettre en évidence les commentaires de l’auteur/autrice dans votre blog WordPress peut vous aider à susciter l’engagement. Les utilisateurs/utilisatrices sont plus susceptibles de laisser un commentaire lorsqu’ils/elles voient que l’auteur/autrice participe activement à la discussion.

Dans cet article, nous allons vous afficher comment mettre facilement en avant les commentaires de l’auteur/autrice dans WordPress pour booster l’engagement.

Pourquoi mettre en évidence les commentaires des auteurs/autrices dans WordPress ?

Les commentaires sont un excellent moyen de susciter l’engagement des utilisateurs/utilisatrices sur votre site. Si vous souhaitez obtenir plus de commentaires sur vos articles, alors vous pouvez encourager cela en participant activement aux discussions.

Pour un nouveau blog WordPress, vous pouvez facilement répondre aux commentaires et prendre part aux discussions avec vos lecteurs. Si vous gérez un blog à plusieurs auteurs/autrices, vous pouvez également encourager les auteurs/autrices à vous aider à modérer les commentaires.

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

Un lecteur occasionnel peut défiler à travers les commentaires, sans se rendre compte du contenu supplémentaire apporté par l’auteur/autrice dans la discussion.

Le fait de mettre en évidence les commentaires de l’auteur/autrice vous aide à y remédier et permet de faire ressortir les commentaires de l’auteur/autrice et de les rendre plus visibles.

Le but ultime ici est d’encourager les nouveaux utilisateurs à se joindre aux commentaires et finalement à s’abonner à votre newsletter ou à devenir client/cliente.

Ceci étant dit, voyons comment mettre facilement en avant les commentaires des auteurs/autrices dans WordPress.

Mise en évidence de l’auteur/autrice d’un commentaire dans WordPress

La façon la plus simple de mettre en évidence les commentaires par auteur/autrice de l’article est d’ajouter une CSS personnalisée à votre thème WordPress. Cela vous permet d’ajouter facilement le module nécessaire et de voir une prévisualisation en direct de ce que cela donnerait sur votre site sans l’enregistrer.

Tout d’abord, vous devez visiter Apparence  » Personnalisation dans la zone d’administration de WordPress. Cela lancera l’interface du personnalisateur de thème WordPress. Vous remarquerez un tas d’options dans une colonne sur votre gauche et une prévisualisation en direct de votre site.

À partir de là, vous devez cliquer sur l’onglet « Additional CSS ». Cela ouvrira une zone de texte dans laquelle vous ajouterez le CSS personnalisé.

Cependant, vous souhaitez voir à quoi ressemblera le CSS personnalisé une fois appliqué. Pour ce faire, vous devez naviguer vers un article de blog qui contient des commentaires d’une auteur/autrice de l’article.

Faites défiler la page jusqu’à la section des commentaires, puis ajoutez le CSS personnalisé suivant dans le champ CSS personnalisé situé à gauche.

.bypostauthor { 
background-color: #e7f8fb;
}

Vous remarquerez immédiatement que le commentaire de l’auteur est modifié en fonction du CSS personnalisé que vous avez saisi/saisie.

Comment cela fonctionne-t-il ?

WordPress ajoute des classes CSS par défaut à différentes parties de votre site. 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 ajoutés par l’auteur/autrice d’une publication.

Ajoutons quelques styles CSS supplémentaires pour la mettre encore plus en évidence. Voici un exemple de code qui ajoute un petit libellé « Auteur » aux commentaires de l’auteur/autrice de la publication et une bordure autour de l’image de l’avatar de l’auteur/autrice.

.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 ce que cela donne sur notre site de test.

Mise en évidence des commentaires en fonction du rôle de l’utilisateur dans WordPress

Aujourd’hui, de nombreux blogs WordPress disposent d’une équipe chargée de répondre aux commentaires. Sur les sites populaires, l’auteur/autrice de la publication, l’administrateur/administratrice et les modérateurs répondent tous aux commentaires afin de stimuler l’engagement des utilisateurs/utilisatrices.

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

Il existe un moyen simple d’y parvenir. Cependant, il est nécessaire d’ajouter un code personnalisé à votre site WordPress. Si vous n’avez jamais fait cela auparavant, consultez notre article sur la façon de 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 une extension 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. Cette extension d’extraits de code permet d’ajouter facilement et en toute sécurité du code personnalisé dans WordPress.

Pour Premiers pas, vous devez installer et activer l’extension gratuite WPCode. Si vous avez besoin d’aide, consultez notre guide sur l’installation d’une extension WordPress.

Une fois l’extension activée, rendez-vous dans la rubrique Code Snippets  » Add Snippet de votre Tableau de bord WordPress.

Ensuite, survolez l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l’extrait ».

Ensuite, ajoutez un titre à votre extrait, collez le code ci-dessus dans le champ « Prévisualisation du code » et sélectionnez « PHP Snippet » comme type de code dans le menu déroulant.

Ensuite, il suffit de permuter le commutateur de « Inactif » à « Actif » et de cliquer sur le bouton « Enregistrer l’extrait » en haut de la page.

Ce code ajoute simplement le libellé du rôle de l’utilisateur à côté du nom de l’auteur/autrice du commentaire. Voici à quoi cela ressemblerait sans aucun style personnalisé.

Rendons-le un peu plus joli en ajoutant quelques CSS personnalisés. Allez dans Apparence  » Personnaliser la page et passez à l’onglet CSS supplémentaires.

Ensuite, vous pouvez utiliser le CSS suivant pour styliser le libellé du rôle du compte de l’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 ce que cela donne 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 pouvez consulter notre article sur l’ajout de libellés de rôles d’utilisateurs dans les commentaires WordPress.

Nous espérons que cet article vous a aidé à apprendre comment mettre en évidence les auteurs/autrices dans WordPress. Vous pouvez également consulter notre tutoriel sur la façon de mettre en évidence les nouvelles publications pour les visiteurs de retour dans WordPress et nos choix d’experts des meilleures extensions de boîte de bio d’auteur pour WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.