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

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

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

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

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

对于新的 WordPress 博客,您可以轻松回复评论并参与与读者的讨论。如果您运营一个多作者博客,那么您也可以鼓励作者帮助进行评论审核。

但是,大多数 WordPresses 不区分注释,并且使用相同的样式列出它们。

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

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

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

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

在 WordPress 中突出显示评论作者

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

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

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

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

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

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

由 WPCode 与 ❤️ 主办

在 WordPress 中一键使用

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

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

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

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

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

.bypostauthor:之前{
内容:“作者”;
浮动:右;
背景颜色:#FF1100;
内边距:5px;
字体大小:小;
字体粗细:粗体;
颜色:#FFFFFF;
}
.bypostauthor .头像 {
边框:1px 虚线#FF1100;
}

由 WPCode 与 ❤️ 主办

在 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’, array( $this, ‘wpb_get_comment_author_role’ ), 10, 3 );
add_filter( ‘get_comment_author_link’, array( $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( ‘电子邮件’, $authoremail );
$comment_user_role = $commet_user_role->角色[0];
// HTML 输出添加到评论作者姓名旁边
$this->comment_user_role = ‘ ‘ 。 ucfirst($comment_user_role) 。 ‘‘;
} 别的 {
$this->comment_user_role = ”;
}
返回$作者;
}

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

由 WPCode 与 ❤️ 主办

在 WordPress 中一键使用

我们建议使用 WPCode 添加此代码,而不是编辑主题的functions.php 文件。此代码片段插件可以安全、轻松地在 WordPress 中添加自定义代码。

首先,您需要安装并激活免费的 WPCode 插件。如果哟您需要帮助,请参阅我们有关如何安装 WordPress 插件的指南。

激活插件后,请从 WordPress 仪表板转到代码片段 » 添加片段。

然后,将鼠标悬停在“添加自定义代码(新代码段)”选项上,然后单击“使用代码段”按钮。

接下来,为代码段添加标题,将上面的代码粘贴到“代码预览”框中,然后从下拉菜单中选择“PHP 代码段”作为代码类型。

之后,只需将开关从“非活动”切换为“活动”,然后单击页面顶部的“保存片段”按钮即可。

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

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

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

.comment-作者-标签 {
内边距:5px;
字体大小:14px;
边框半径:3px;
}

.comment-作者-标签-编辑器 {
背景颜色:#effefef;
}
.comment-作者-标签-作者 {
背景颜色:#faeeee;
}

.comment-作者-标签-贡献者 {
背景颜色:#f0faee;
}
.comment-作者-标签-订阅者 {
背景颜色:#eef5fa;
}

.comment-作者-标签-管理员 {
背景颜色:#fde9ff;
}

由 WPCode 与 ❤️ 主办

在 WordPress 中一键使用

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

有关更多详细信息,您可能需要阅读我们有关如何向 WordPress 评论添加用户角色标签的文章。

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

如果您喜欢这篇文章,请订阅我们的 WordPress 视频教程 YouTube 频道。您还可以在 Twitter 和 Facebook 上找到我们。

By

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注