如何在 WordPress 中突出显示作者的评论

您想在您网站上的 WordPress 帖子中突出显示作者的评论吗？

在 WordPress 博客中突出显示作者的评论可以帮助您建立参与度。当用户看到作者积极参与讨论时，他们更有可能发表评论。

在本文中，我们将向您展示如何在 WordPress 中轻松突出显示作者的评论以提高参与度。

为什么在 WordPress 中突出显示作者的评论？

评论是在您的网站上建立用户参与度的好方法。如果您想获得更多对您的文章的评论，那么您可以通过积极参与讨论来鼓励这一点。

对于新的 WordPress 博客，您可以在评论审核期间轻松回复评论。如果您经营一个多作者博客，那么您也可以鼓励作者参与讨论。

然而，大多数 WordPress 主题不区分评论并使用相同的样式列出它们。

随意的读者可能会滚动浏览评论，而没有意识到作者在讨论中贡献的附加内容。

突出显示作者的评论可以帮助您解决这个问题，并使作者的评论脱颖而出并更加引人注目。

这里的最终目标是鼓励新用户加入评论并最终订阅您的新闻通讯或成为客户。

话虽这么说，让我们看看如何在 WordPress 中轻松突出显示作者评论。

在 WordPress 中突出显示评论作者

突出显示帖子作者评论的最简单方法是将自定义 CSS 添加到您的 WordPress 主题。这使您可以轻松添加所需的代码，并实时预览它在您网站上的外观，而无需保存。

首先，您需要访问WordPress 管理区域中的外观 » 自定义。这将启动WordPress 主题定制器界面。您会注意到左侧的一栏中有很多选项以及网站的实时预览。

从这里，您需要单击“附加 CSS”选项卡。这将打开一个文本区域，您将在其中添加自定义 CSS。

但是，您可能希望了解应用自定义 CSS 后的外观。为此，您需要导航到包含帖子作者评论的博客文章。

向下滚动到评论部分，然后在左侧的自定义 CSS 框中添加以下自定义 CSS。

123	`.bypostauthor {` `background-color:` `#e7f8fb;}`

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

您会立即注意到作者评论更改与您输入的自定义 CSS 相匹配。

那么这一切是如何运作的呢？

您会看到 WordPress向网站的不同区域添加了一些默认 CSS 类。无论您使用哪个 WordPress 主题，这些 CSS 类都会存在。

在此示例代码中，我们使用了.bypostauthorCSS 类，该类被添加到帖子作者添加的所有评论中。

让我们添加更多 CSS 样式以使其更加突出。下面是一个示例代码，它将一个小的“作者”标签添加到帖子作者的评论中，并在作者的头像图像周围添加边框。

123456789101112 .bypostauthor:before { content:"Author";float:right;background-color:#FF1100;padding:5px;font-size:small;font-weight:bold;color:#FFFFFF;}.bypostauthor .avatar {border:1pxdotted#FF1100;}

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

这就是它在我们的测试网站上的样子。

在 WordPress 中按用户角色突出显示评论

现在，许多 WordPress 博客都有团队成员负责回复评论。热门网站可能会有帖子作者、管理员和版主全部回复评论以提高用户参与度。

如何突出显示非帖子实际作者的工作人员添加的评论？

有一个简单的技巧可以实现这一点。但是，它要求您将自定义代码添加到您的 WordPress 网站。如果您以前没有这样做过，请参阅我们关于如何在 WordPress 中轻松添加自定义代码的文章。

首先，您需要将以下代码添加到代码片段插件，例如WPCode（推荐）或主题的functions.php文件。

1234567891011121314151617 号181920212223242526272829 if( ! class_exists( 'WPB_Comment_Author_Role_Label') ) :classWPB_Comment_Author_Role_Label {publicfunction__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 functionwpb_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 = ' <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 functionwpb_comment_author_role($author) { return$author.= $this->comment_user_role; } }newWPB_Comment_Author_Role_Label;endif;

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

此代码只是在评论作者姓名旁边添加用户角色标签。这就是没有任何自定义样式的情况下的外观。

让我们通过添加一些自定义 CSS 使其变得更漂亮一些。转到外观»自定义页面并切换到其他 CSS 选项卡。

之后，您可以使用以下 CSS 来设置注释中用户角色标签的样式。

1234567891011121314151617 号181920212223 .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;}