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

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

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

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

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

例如,具有编辑用户角色的用户将在评论中在其姓名旁边显示一个徽章,让其他用户知道该评论是由编辑发表的。

它可以建立用户信任并提高用户对您网站评论的参与度。

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

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

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

本教程要求您向 WordPress 主题文件添加代码。如果您以前没有这样做过,请查看我们的指南,了解如何在 WordPress 中轻松复制和粘贴代码。

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

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 registeredif (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 = ‘ ‘ . ucfirst($comment_user_role) . ‘‘;} 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;

上面的这个函数代码挂钩到 WordPress 过滤器,用于显示评论作者姓名以包含用户角色标签。

您现在可以访问任何带有评论的帖子以查看它的实际效果。注册用户发表的评论将在评论作者姓名旁边显示他们的用户角色。非注册用户发表的任何评论只会显示评论作者姓名。

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

现在我们已经添加了用户角色,是时候给它设置样式并让它看起来干净了。

在我们的代码中,我们为每个用户角色添加了一个 CSS 类,因此我们可以使用这些 CSS 类对每个用户徽章进行不同的自定义(即使用不同的颜色等)

您可以使用以下示例 CSS 作为起点:

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

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

与他们的评论一起显示的用户角色徽章

我们希望本文能帮助您了解如何在 WordPress 中的评论旁边添加用户角色标签。您可能还想查看我们关于如何在 WordPress 评论中延迟加载 gravatars的指南。