Categories 教程

如何添加用户角色标签在WordPress的评论旁边

我们的一位读者问，是否可以在WordPress的每个评论旁边突出显示用户角色？ 显示用户角色标签会加重注册用户在您网站上发表的评论，这些用户包括作者，编辑和管理员。 在本文中，我们将向您展示如何在WordPress中的评论旁边轻松添加用户角色标签。

在WordPress中的评论旁添加用户角色

为什么显示用户角色标签旁边评论WordPress的作者名？

如果您允许用户在您的网站上注册或运行多作者WordPress网站，则用户标签可以根据用户的角色将用户介绍给对方。

例如，具有编辑者用户角色的用户将在评论中显示他们名字旁边的徽章，让其他用户知道该评论是由编辑者完成的。

它建立用户信任并增加用户对您网站上的评论的参与度。

许多WordPress主题只突出显示作者发表的评论。 即使注册用户或站点管理员进行了其他评论，他们也不会显示任何其他用户角色的标签。

话虽如此，让我们来看看如何轻松添加WordPress的评论旁边的用户角色标签。

在WordPress中评论作者名称旁边添加用户角色标签

本教程要求您将代码添加到您的WordPress主题文件。 如果您之前没有这样做，那么请参阅我们的指南，了解如何在WordPress中轻松复制和粘贴代码。

你需要做的第一件事是将下面的代码添加到你的主题的functions.php文件或特定于网站的插件。 

if（！class_exists（'WPB_Comment_Author_Role_Label'））：
 WPB_Comment_Author_Role_Label类{
 公共职能__construct（）{
 add_filter（'get_comment_author'，数组（$ this，'wpb_get_comment_author_role'），10，3）;
 add_filter（'get_comment_author_link'，数组（$ this，'wpb_comment_author_role'））;
 }

 //获取评论作者角色
 函数wpb_get_comment_author_role（$ author，$ comment_id，$ comment）{
 $ authoremail = get_comment_author_email（$ comment）;
 //检查用户是否已注册
 如果（email_exists（$ authoremail））{
 $ commet_user_role = get_user_by（'email'，$ authoremail）;
 $ comment_user_role = $ commet_user_role-> roles [0];
 // HTML输出添加到评论作者名称旁边
 $ this-> comment_user_role =' '。  ucfirst（$ comment_user_role）。  “ “;
 } else {
 $ this-> comment_user_role ='';
 }
 返回$ author;
 }

 //显示评论作者
 函数wpb_comment_author_role（$ author）{
 返回$ author。= $ this-> comment_user_role;
 }
 }
 新的WPB_Comment_Author_Role_Label;
 万一;

上面的这个函数代码挂载到用于显示评论作者名称的WordPress过滤器中，以包括用户角色标签。

你现在可以访问任何有评论的帖子来看看它的行动。 注册用户发表的评论将在评论作者名称旁显示他们的用户角色。 任何非注册用户的评论只会显示评论作者的名字。

用户角色标签显示在他们的评论旁边

现在我们已经添加了用户角色，现在是时候对其进行设计，并使其看起来很干净。

在我们的代码中，我们为每个用户角色添加了CSS类，所以我们可以使用这些CSS类来自定义每个用户标志（即使用不同的颜色等）

您可以使用下面的示例CSS作为起点： 

.comment-author-label {
     填充：5px;
     font-size：14px;
     border-radius：3px;
 }

 .comment-author-label-editor {
 背景色：#EFEFEF;
 }
 .comment-author-label-author {
 背景色：#faeeee;
 }

 .comment-author-label-contributor {
 背景色：＃f0faee;
 }
 .comment-author-label-subscriber {
 背景色：＃eef5fa;
 }

 .comment-author-label-administrator {
 背景色：＃fde9ff;
 }

随意根据自己的喜好调整CSS。 这是它在我们的演示网站上的样子：

显示用户角色徽章及其评论