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

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

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

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

Highting comments by an author in WordPress blog posts

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

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

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

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

Regular comments layout with no author highlighting

不经意的读者可能会滚动浏览评论,而没有意识到作者在讨论中贡献的其他内容.

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

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

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

在 WordPress 中突出显示评论作者

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

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

Theme customizer in WordPress

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

Additional CSS tab

但是,您可能希望查看应用自定义 CSS 时的外观.为此,您需要导航到包含博文作者评论的博文.

Viewing comments in Theme Customizer

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

.bypostauthor { 
background-color: #e7f8fb;
}

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

Author's comment highlighted with a different background color

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

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

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

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

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

这是我们测试网站上的样子.

Comment author highlighted with the Author label

在 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 registered
if (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                   
function wpb_comment_author_role($author) { 
return $author.= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

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

User role labels added to comments

让我们添加一些自定义 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;
}

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

User role highlighted

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

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

5

发表回复