Comment ajouter une étiquette de rôle utilisateur à côté des commentaires dans WordPress

Un de nos lecteurs a demandé s’il était possible de mettre en évidence le rôle de l’utilisateur à côté de chaque commentaire dans WordPress ?

L'affichage du libellé du rôle de l'utilisateur donne du poids aux commentaires formulés par les utilisateurs enregistrés sur votre site Web, en particulier les auteurs, les éditeurs et les administrateurs.

Dans cet article, nous allons vous montrer comment ajouter facilement une étiquette de rôle utilisateur à côté des commentaires dans WordPress.

Pourquoi afficher l’étiquette du rôle de l’utilisateur à côté du nom de l’auteur du commentaire dans WordPress ?

Si vous autorisez l’enregistrement des utilisateurs sur votre site Web ou si vous gérez un site Web WordPress multi-auteurs, les étiquettes d’utilisateurs peuvent présenter les utilisateurs les uns aux autres en fonction de leurs rôles d’utilisateur.

Par exemple, les utilisateurs dotés du rôle d'utilisateur éditeur afficheront un badge à côté de leur nom dans les commentaires, indiquant aux autres utilisateurs que ce commentaire a été rédigé par un éditeur.

Cela renforce la confiance des utilisateurs et augmente leur engagement dans les commentaires sur votre site Web.

De nombreux thèmes WordPress ne mettent en évidence que les commentaires rédigés par l’auteur de la publication. Ils n'affichent aucune étiquette pour les autres rôles d'utilisateur, même si d'autres commentaires sont faits par des utilisateurs enregistrés ou des administrateurs de site.

Cela étant dit, voyons comment ajouter facilement une étiquette de rôle utilisateur à côté des commentaires dans WordPress.

Ajout d'une étiquette de rôle d'utilisateur à côté du nom de l'auteur du commentaire dans WordPress

Ce tutoriel vous oblige à ajouter du code à vos fichiers de thème WordPress. Si vous ne l’avez jamais fait auparavant, consultez notre guide sur la façon de copier et coller des extraits de code dans WordPress.

La première chose que vous devez faire est d’ajouter le code suivant au fichier function.php de votre thème, dans un plugin spécifique au site 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;

Ce code de fonction ci-dessus s'intègre aux filtres WordPress utilisés pour afficher le nom de l'auteur du commentaire afin d'inclure l'étiquette du rôle utilisateur.

Nous vous recommandons d'ajouter ce code à l'aide de WPCode, le meilleur plugin d'extraits de code pour WordPress. C’est le moyen le plus sûr et le plus simple d’ajouter du code sans modifier le fichier function.php de votre thème.

Pour commencer, vous devez installer et activer le plugin gratuit WPCode. Pour des instructions détaillées, consultez ce tutoriel sur la façon d'installer un plugin WordPress.

Une fois le plugin activé, accédez à Extraits de code » + Ajouter un extrait depuis le tableau de bord WordPress. À partir de là, cliquez sur le bouton « Utiliser l’extrait » sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».

Ensuite, ajoutez un titre pour votre extrait de code en haut de la page. Cela peut être n'importe quoi pour vous aider à vous rappeler à quoi sert le code.

Ensuite, collez le code ci-dessus dans la zone « Aperçu du code » et sélectionnez « Extrait PHP » comme type de code dans la liste déroulante à droite.

Après cela, déplacez simplement le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l'extrait ».

Vous pouvez désormais visiter n’importe quelle publication avec des commentaires pour la voir en action. Les commentaires formulés par les utilisateurs enregistrés afficheront leur rôle d'utilisateur à côté du nom de l'auteur du commentaire. Tout commentaire fait par des utilisateurs non enregistrés affichera uniquement le nom de l'auteur du commentaire.

Maintenant que nous avons ajouté le rôle d’utilisateur, il est temps de le styliser et de lui donner un aspect épuré.

Dans notre code, nous avons ajouté une classe CSS pour chaque rôle d'utilisateur, afin que nous puissions utiliser ces classes CSS pour personnaliser chaque badge utilisateur différemment (c'est-à-dire utiliser des couleurs différentes, etc.)

Vous pouvez utiliser l’exemple CSS suivant comme point de départ :

.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;
}

N'hésitez pas à ajuster le CSS à votre guise. Voici à quoi cela ressemblait sur notre site de démonstration :

Pour plus de détails, consultez notre guide sur la façon d’ajouter facilement du CSS personnalisé à votre site WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une étiquette de rôle utilisateur à côté des commentaires dans WordPress. Vous voudrez peut-être également consulter notre guide sur la façon de charger paresseusement les gravatars dans les commentaires WordPress et nos sélections d'experts des meilleurs plugins pour améliorer les commentaires WordPress.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.