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

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

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

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

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

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

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

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

但是,大多数 WordPress 主题不会区分注释,也不会使用相同样式列出它们。

读者可能会在评论中滚动浏览,而没有意识到作者在讨论中提供的其他内容。突出显示作者的评论可帮助你进行补救,并使作者的评论脱颖而出并更加引人注目。

这里的最终目标是鼓励新用户加入评论,并最终订阅你的时事通讯或成为客户。话虽如此,让我们看一下如何轻松地在 WordPress 中突出显示作者评论。

在 WordPress 中突出显示评论作者

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

首先,你需要在 WordPress 管理区域中访问外观 » 自定义。这将启动 WordPress 自定义主题页面。你会在左侧的栏中看到大量选项,并实时预览网站。

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

在 WordPress 中自定义 CSS

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

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

.bypostauthor { 
background-color: #e7f8fb;
}

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

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

在此示例代码中,我们使用了.bypostauthorCSS 类,该类添加到帖子作者添加的所有注释中。

让我们添加更多 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;
}

在 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;

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

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

你可以根据自己的喜好来自行更改样式。