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

你想在你网站上的WordPress帖子中突出作者的评论吗? 在你的WordPress博客中突出作者的评论可以帮…

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

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

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

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

评论是在你的网站上建立用户参与度的好方法。如果你想的话那么你可以通过积极参与讨论来鼓励这一点。

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

然而,大多数WordPress主题并不区分注释,而是使用相同的样式列出它们。

不经意的读者可能会浏览评论,没有意识到作者在讨论中贡献的额外内容。

突出作者的评论有助于你弥补这一点,并使作者的评论脱颖而出,更加引人注目。

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

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

在WordPress中突出显示评论作者

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

首先,你需要参观外观自定义在WordPress管理区。这将启动主题定制器接口。你会注意到在你左边的栏里有一堆选项,还有你网站的实时预览。

从这里,你需要点击附加CSS标签。这将打开一个文本区域,您将在其中添加自定义CSS。

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

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

2
3
.bypostauthor {
background-color#e7f8fb;
}

您会立即注意到作者注释的变化与您输入的自定义CSS相匹配。

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

你看WordPress增加了一些默认CSS类网站的不同区域。不管你使用哪个WordPress主题,这些CSS类都在那里。

在这个示例代码中,我们使用了,作者CSS类。添加到文章作者添加的所有评论中。

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

2
3
5
6
8
9
10
11
12
.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;
}

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

按用户角色突出显示评论

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

如何突出一个不是文章实际作者的工作人员添加的评论?

实现这一点很容易。但是,它要求您向WordPress网站添加自定义代码。如果您以前没有这样做过,请参阅我们的文章如何在WordPress中轻松添加自定义代码

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

2
3
5
6
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;

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

让我们通过添加一些自定义CSS使它更漂亮一点。去…外观自定义页面并切换到“附加CSS”选项卡。

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

2
3
5
6
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.comment-author-label {

    padding5px;

    font-size14px;

    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;

}

这就是我们测试现场的样子。请随意修改代码以匹配主题的颜色和风格。

类别:WordPress开发

本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。

评论 (0)COMMENT