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



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

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

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

作者在 WordPress 博客文章中的评论

为什么要在 WordPress 中突出作者的评论?

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

对于 新的 WordPress 博客,你可以在评论审核期间轻松回复评论。如果你运行 多作者博客,然后你可以鼓励作者也参与讨论。

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

没有作者突出显示的常规评论布局

普通读者可能会滚动浏览评论,而没有意识到作者在讨论中提供的其他内容。

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

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

话虽如此,让我们看看如何在 WordPress 中轻松突出作者评论。

在 WordPress 中突出显示评论作者

突出作者评论的最简单方法是 添加自定义 CSS 到你的 WordPress 主题。这使你可以轻松添加所需的代码,并在不保存的情况下查看它在你网站上的外观的实时预览。

首先,你需要访问 WordPress 管理区域中的外观 » 自定义。这将启动 WordPress 主题定制器 界面。你会在左侧的列中看到一堆选项以及你网站的实时预览。

WordPress 中的主题定制器

从这里,你需要点击 Additional CSS 选项卡。这将打开一个文本区域,你将在其中添加自定义 CSS。

附加 CSS 选项卡

但是,你可能希望了解自定义 CSS 在应用时的外观。为此,你需要导航到包含帖子作者评论的博客帖子。

在主题定制器中查看评论

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

.bypostauthor { 背景颜色:#e7f8fb;}

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

作者的评论以不同的背景颜色突出显示

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

你会看到 WordPress 添加了一些 默认 CSS 类到你网站的不同区域。钍无论你使用的是哪个 WordPress 主题,这些 CSS 类都在那里。

在这个示例代码中,我们使用了.bypostauthor CSS 类,该类被添加到帖子作者添加的所有评论中。

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

.bypostauthor:之前{ 内容:“作者”;浮动:右;背景颜色:#FF1100;填充:5px;字体大小:小;字体粗细:粗体;颜色:#FFFFFF;}.bypostauthor.avatar {border:1px dotted #FF1100 ;}

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

使用作者标签突出显示的评论作者

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

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

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

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

首先,你需要将以下代码添加到代码片段插件或主题的functions.php 文件。

如果(!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',数组($这个,'wpb_comment_author_role'));} // 获取评论作者角色 函数 wpb_get_comment_author_role($author, $comment_id, $comment) { $authoremail = get_comment_author_email($comment); // 检查用户是否已注册 if (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) 。 '';} 别的 { $this->comment_user_role = '';} return $author;}// 显示评论作者 功能 wpb_comment_author_role($author) { 返回 $author.= $this->comment_user_role; } }新 WPB_Comment_Author_Role_Label;endif;

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

添加到评论的用户角色标签

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

之后,你可以使用以下 CSS 为评论中的用户角色标签设置样式。

.comment-author-label {填充:5px;字体大小:14px;边框半径:3px;} .comment-author-label-editor {background-color:#efefef;}.comment-author-label-author {background-color:#faeeee;} .comment-author-label-contributor {背景色:#f0faee; }.comment-author-label-subscriber {背景色:#eef5fa; } .comment-author-label-administrator { 背景颜色:#fde9ff;}

这就是它在我们的测试网站上的样子。随意修改代码以匹配你主题的颜色和样式。

用户角色突出显示

有关更多详细信息,你可能需要阅读我们关于如何将用户角色标签添加到 WordPress 评论

我们希望本文能帮助你了解如何在 WordPress 中突出显示作者评论。想了解用户如何与你的网站互动?请参阅我们关于 如何跟踪用户在 WordPress 中的参与度,以及 如何在你的 WordPress 网站上添加网络推送通知以增加你的流量。



No comments:

Powered by Blogger.