Un de nos lecteurs nous a demandé s’il était possible de mettre en évidence le rôle de l’utilisateur à côté de chaque commentaire sur WordPress ? L’affichage du libellé du rôle de l’utilisateur donne du poids aux commentaires faits par les utilisateurs enregistrés sur votre site Web, en particulier les auteurs, les éditeurs et les administrateurs. Dans ce tutoriel, nous allons vous montrer comment ajouter facilement un libellé avec le rôle d’utilisateur à côté des commentaires sur WordPress.

ajouter un label sur le role d'utilisateur.png

Pourquoi afficher le libellé du rôle d’utilisateur à côté d’un commentaire sur WordPress ?

Si vous autorisez l’enregistrement des utilisateurs sur votre site Web ou si vous exécutez un site Web WordPress à plusieurs auteurs, les libellés d’utilisateur peuvent présenter les utilisateurs les uns aux autres en fonction de leurs rôles utilisateurs.

Par exemple, les utilisateurs avec le rôle d’utilisateur « Editeur » auront un badge à côté de leur nom dans les commentaires, ce qui permettra aux autres utilisateurs de savoir que ce commentaire a été fait par un éditeur.

Il renforce la confiance des utilisateurs et augmente l’engagement des utilisateurs dans les commentaires sur votre site Web.

De nombreux thèmes WordPress ne mettent en évidence que les commentaires faits par l’auteur de la publication. Ils ne présentent pas d’étiquettes pour les autres rôles d’utilisateur, même si d’autres commentaires sont faits par des utilisateurs enregistrés ou des administrateurs du site.

Cela étant dit, regardons comment ajouter facilement l’étiquette du rôle de l’utilisateur à côté des commentaires sur WordPress.

Ajout d’une étiquette du rôle d’utilisateur à côté d’un commentaire

Ce tutoriel vous oblige à ajouter du code à vos fichiers de thème WordPress. Si vous ne l’avez pas fait auparavant, alors jetez un œil sur comment personnaliser votre thème WordPress .

La première chose à faire est d’ajouter le code suivant au fichier functions.php de votre thème ou à un plugin actif sur le site.

if ( ! class_exists( 'BPC_Comment_Author_Role_Label' ) ) :
class BPC_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'bpc_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'bpc_comment_author_role' ) );
}
 
// Get comment author role 
function bpc_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Si l'utilisateur est inscrit
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// Contenu à ajouter près du nom
$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;
} 
 
// Afficher l'auteur du commentaire 
function bpc_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new BPC_Comment_Author_Role_Label;
endif;

Ce code de fonction ci-dessus se connecte aux filtres WordPress utilisés pour afficher le nom de l’auteur du commentaire afin d’inclure le libellé du rôle utilisateur.

Vous pouvez maintenant visiter n’importe quel article avec des commentaires pour le voir en action. Les commentaires faits 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.

exemple commentaire avec rôle d'utilisateur.png

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, donc nous pouvons utiliser ces classes CSS pour personnaliser chaque badge d’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 goût. Voici à quoi ressemblait notre site de démonstration:

résultat site de démonstration css.png

C’est tout pour ce tutoriel, j’espère qu’il vous permettra d’ajouter un badge à côté des textes des membres de votre staff.