如何高亮作者评论，前人已有不少赘述，一类如 How to: Style author comments in WordPress 2.7 ，介绍了通过css样式表实现高亮作者评论；另一类如 WordPress高亮作者和文章置顶的实现，讨论稍多，前半部分将如何标记作者评论，后半段则同样是通过css样式表实现高亮作者评论。但是这种方法并不适用于用于嵌套评论系统(Threaded Comments)的主题，本文则着力讨论作者评论高亮在嵌套评论中的非插件实现。

原因

为何css样式表无法实现嵌套评论的作者高亮呢？

通常情况下，css样式表都是如下写法

  • 本博客主题作者写法，实现作者评论底色变色
.bypostauthor .comment-meta {
background-color:#e4ebed; color:#000
}
li.bypostauthor {
/* CSS styles for author comments */
}
.children li.comment-author-admin  span.avatarx{
background: #C04019;
padding: 4px;
}

但是无论哪种方法都难以实现嵌套评论高亮作者回复，会出现类似于以下的效果。

修改前情况

一旦有作者回复，之后的回复无论是否为作者回复都一样会变色，原因就在在于嵌套回复的代码结构问题。以本主题留言系统的代码框架为例。

<li class="comment even thread-even depth-1" id="li-comment-259">
 	<div id="comment-259">
 		<div class="comment-avatar">...</div>
         	<div class="comment-meta commentmetadata">...</div>
 		<div class="recover"></div>
 	</div>
 	<ul class='children'>
 		<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-260">
 			<div id="comment-260">
 				<div class="comment-avatar">...</div>
         			<div class="comment-meta commentmetadata">...</div>
 				<div class="recover"></div>
 			</div>
			<ul class='children'>
				<li class="comment" id="li-comment-261">
 				<div id="comment-261">
 					<div class="comment-avatar">...</div>
         				<div class="comment-meta commentmetadata">...</div>
 					<div class="recover"></div>
 				</div>
			</ul>
		</li>
 	</ul>
 </li>

第8行代码表明了，第一层回复(第7行以下)为作者回复(第8行.byauthotpost表明)，则根据css该li下的comment-meta应该变色为#e4ebed，但是作者回复的楼下<ul class="children">(14行以后)虽然非作者回复(15行class属性表明)，但是这一楼的comment-meta依然满足css中.bypostauthor .comment-meta的匹配规则，则回复作者这一楼也会像作者回复一样变色。

问题的关键就在于.bypostauthor .comment-meta没有对.bypostauthor中到.comment-meta的li层数做限定，写过嵌套评论每嵌套一层就缩进一点的童鞋都知道，可以使用.commentlist li.depth-x(x=1,2,3,4,5…)的形式对li层数做出限定，但是无奈从来都没有li.depth-0，.bypostauthor .comment-meta也就无以限定对象为最接近.bypostauthor的，一层li都没有的.comment-meta了。

解决方案

解决方案简单点说，就是不仅仅要依靠评论的头部class表明该评论是否是作者回复，还要在需要在作者回复高亮属性上表明该回复是否属于作者回复，这在带有多级<ul class="children">的嵌套评论系统中是十分必须的。

就具体问题而言，就是要在.comment-meta上标明.byauthorpost(本主题)，或者在.avatarx上标明.byauthorpost(WordPress高亮作者和文章置顶的实现)。

很多文章都介绍了如何实现类似与.byauthorpost属性的实现，如如何高亮你的评论背景色以及WordPress高亮作者和文章置顶的实现，其实大可不必自己写函数这么麻烦，从Wordpress 2.7开始，系统内置了判断评论类型的函数comment_class()。
大家可以在主题文件夹里的comment.php中（如果你的主题很屌，callback了主题作者编写评论函数，则有可能出现在主题文件夹里的functions.php中）看到这样一句，其中完成了对comment_class()的调用

<li <?php comment_class("comment"); ?> id="comment-<?php comment_ID() ?>">

Worpress官方给出的comment_class()用法如下

  • comment/pingback：comment类型和pingback类型
  • even/odd：偶数和奇数
  • depth-1/2/3/n：当前评论所属的嵌套层数，除了depth-1以外都是子评论
  • bypostauthor：该评论是当前文章的作者发表的
  • comment-author-admin：评论的发表者是博客的管理员
  • byuser：评论的发表者是博客的注册用户

鉴于本主题的中要作者高亮的部分是<div class="comment-meta commentmetadata">...</div>，本身即有class属性，则我们将官方自带的comment_class()稍加修改，将以下函数添加于主题的functions.php中。

<?php
/**
 * Add semantic classes for each comment element in existing class attribute
 *
 * @since 2.7.0 mod by logicmd
 *
 * @param string|array $class One or more classes to add to the class list
 * @param int $comment_id An optional comment ID
 * @param int $post_id An optional post ID
 * @param bool $echo Whether comment_class should echo or return
 */
function add_comment_class( $class = '', $comment_id = null, $post_id = null, $echo = true ) {
	// Separates classes with a single space, collates classes for comment DIV
	$class = join( ' ', get_comment_class( $class, $comment_id, $post_id ) ) ;
	if ( $echo)
		echo $class;
	else
		return $class;
}
?>

完成后在function tbf1_comment($comment, $args, $depth)做以下修改即可（若未回调自制函数则在wp_list_comments()中对应位置修改）

<div class="comment-meta commentmetadata <?php add_comment_class(); ?>">

修改后效果展示

总结

前面废话讲的比较多，主要是把思路说清楚，想快速修改的的童鞋，遵循一下步骤

高亮属性

挑选一种你要高亮的部分，是要给作者头像改一种边框色还是改变作者评论背景色，etc

调用函数

根据你要挑选的高亮部分，调用返回评论类型的函数，如果该div无class，果断使用官方调用的样例<li <?php comment_class("comment"); ?> id="comment-<?php comment_ID() ?>">，若有class，则仿照我前面写的<div class="comment-meta commentmetadata <?php add_comment_class(); ?>">在class内调用。

添加css

最后别忘了css样式表，样例在文章开头已经给出。