如何在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 { 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 ;
} |
这就是我们测试现场的样子。请随意修改代码以匹配主题的颜色和风格。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
评论功能已经关闭!