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

L'un de nos lecteurs nous a récemment demandé s'il était possible de mettre en évidence les rôles des utilisateurs à côté de chaque commentaire dans WordPress. C'est une question courante, et elle est logique car les commentaires peuvent rapidement devenir difficiles à suivre, surtout sur les blogs très fréquentés ou les sites communautaires.

Afficher une étiquette de rôle utilisateur à côté de chaque commentaire aide vos visiteurs à voir instantanément quels commentaires proviennent d'utilisateurs de confiance tels que les auteurs, les éditeurs ou les administrateurs. Cela ajoute du contexte, renforce la crédibilité et peut même encourager des interactions plus significatives au sein de votre communauté.

Nous avons aidé de nombreux propriétaires de sites à ajouter cette fonctionnalité, et c'est un moyen simple de rendre votre section de commentaires plus organisée et professionnelle.

Dans cet article, nous vous montrerons comment ajouter facilement une étiquette de rôle utilisateur à côté des commentaires dans WordPress, afin que vos lecteurs puissent rapidement reconnaître qui contribue.

Pourquoi afficher l'étiquette du rôle 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, l'affichage des étiquettes de rôle utilisateur peut aider les visiteurs à comprendre rapidement qui commente et quel est leur rôle utilisateur.

Par exemple, un utilisateur ayant le rôle d'éditeur peut avoir un badge à côté de son nom dans les commentaires, signalant aux autres que le commentaire provient d'un éditeur.

Cela renforce non seulement la confiance de votre public, mais encourage également des interactions et un engagement plus significatifs sur votre site.

De nombreux thèmes WordPress ne mettent en évidence que les commentaires faits par l'auteur de la publication. Ils n'affichent pas d'étiquettes pour les autres rôles d'utilisateur, même si d'autres commentaires sont faits par des utilisateurs enregistrés, des administrateurs ou des éditeurs. L'ajout de ces étiquettes garantit que tous les contributeurs clés de votre site sont facilement reconnus.

Maintenant que vous comprenez les avantages, examinons comment ajouter facilement une étiquette de rôle d'utilisateur à côté des commentaires dans WordPress.

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

Ce tutoriel nécessite que vous ajoutiez du code aux fichiers de votre thème WordPress. Si vous ne l'avez jamais fait auparavant, veuillez consulter notre guide sur la façon de copier et coller des extraits de code dans WordPress.

La première chose à faire est d'ajouter le code suivant au fichier functions.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'accroche aux filtres WordPress utilisés pour afficher le nom de l'auteur du commentaire afin d'inclure l'étiquette du rôle de l'utilisateur.

Chez WPBeginner, nous recommandons toujours d'ajouter ce code en utilisant WPCode, le meilleur plugin d'extraits de code pour WordPress.

L'utilisation de WPCode est plus sûre et plus facile que la modification directe du fichier functions.php de votre thème. Il évite les erreurs qui pourraient casser votre site, maintient vos personnalisations organisées et garantit que vos modifications ne sont pas perdues lors de la mise à jour 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 comment 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 « + Ajouter un snippet personnalisé » sous l'option « Ajouter votre code personnalisé (Nouveau snippet) ».

Ensuite, vous devez sélectionner « Extrait PHP » comme type de code dans la liste des options qui apparaissent à l'écran.

Cela vous amènera à la page Créer un extrait personnalisé.

À partir de là, vous devez ajouter un titre à votre extrait de code. Cela peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.

Ensuite, collez le code ci-dessus dans la zone « Aperçu du code ».

Après cela, déplacez simplement le commutateur de « Inactif » à « Actif » en haut de la page.

Enfin, cliquez sur le bouton « Enregistrer le snippet ».

Vous pouvez maintenant visiter n'importe quel article avec des commentaires pour le voir en action.

Les commentaires des 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 n'affichera que 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 le rendre propre.

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 d'utilisateur différemment (c'est-à-dire utiliser des couleurs différentes, etc.)

Vous pouvez utiliser le CSS d'exemple 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 comment 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 aussi consulter notre guide sur comment charger paresseusement les Gravatars dans les commentaires WordPress et nos meilleurs choix d'experts des meilleurs plugins pour améliorer les commentaires 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.