WordPress 完美 AJAX 嵌套评论

上一篇关于 Ajax 评论的文章中有两个缺点,分别是“不能输出合适的样式”和“没有回复链接”。下午对博客进行技术维护,现已基本 OK 了(对于我来说)。

页面 js 代码请参考上篇文章,或者参见文章结尾的演示文件。

新增一个 comment-ajax.php

依然是需要把 WordPress 根目录下的 wp-comment-post.php 复制一份,另存为 comment-ajax.php , 存到根目录(还需在 js 中指定该文件绝对路径)。

干掉 comment-ajax.php 中的 第 84、85、87 行。把下面的代码复制到该文件末尾的 ?> 之前。

//$location = empty($_POST['redirect_to']) ? get_comment_link($comment_id) : $_POST['redirect_to'] . '#comment-' . $comment_id;
//$location = apply_filters('comment_post_redirect', $location, $comment);

//wp_redirect($location);

$comment_depth = 1;   //for attribute class of new comment,such as "depth-2"
$tmp_c = $comment;
while($tmp_c->comment_parent != 0){
	$comment_depth++;
	$tmp_c = get_comment($tmp_c->comment_parent);
}

接着,打开你的主题中的 comments.php 看一下。搜索 wp_list_comment ,找到 wp_list_comment() 或者类似 wp_list_comment('callback=lorz_list_comment') 这样的代码。如果参数中没有 callback 字样:请把下面的代码粘贴到 comment-ajax.php 中上段代码之后 的末尾, ?>后(感谢zwwooooo同学的提醒)。

  • id=”li-comment-
    style=”display:none”>

如果你的 comment.php 中 wp_list_comment 的函数中有 callback ,那么请打开主题下的 function.php (这种情况下没有这个文件就算是见鬼了)。找到与 callback 同名的函数,将其中的 <li>与之间</li> 的夹杂 php 代码的 html 部分复制过来。将其中两个函数 comment_class 和 comment_reply_link 的参数改成:

//……
comment_class('',$comment_id,$comment_post_ID);
//……
comment_reply_link(
	array(
		'depth' => $comment_depth,
		'max_depth' => get_option('thread_comments_depth')
	),$comment_id,$comment_post_ID)
//……

实际就是改成与我给出的代码相似的样子。就是这些,再按照上篇文章中搞定 js 就 OK 了。

还可以更完美点儿?

很多人喜欢评论呈现隔条变色的样式,所以 WordPress 为每条评论都添加了 odd alt thread-odd thread-alt 或者 even thread-even 等 class 。现在唯一的瑕疵就是,comment-ajax.php 输出的都是 even、thread-even ……

由于不在主循环里,获取这些值就麻烦了。所以还是交给 js 处理吧。上篇文章中的 js 代码,修改 var $newc = $child_list.find('li:last'); 为:

var $newc = $child_list.find('li:last');
if($newc.prev().length){
	var $c = $newc.prev();
	if( $c.hasClass('even')){
		$newc.removeClass('even').addClass('odd alt');
	}
	if( $c.hasClass('thread-even')){
		$newc.removeClass('thead-even').addClass('thread-odd thread-alt');
	}
}
  1. 本文贴出的代码,依旧与本博客所使用的不一样。
  2. 给出的 js 代码需要 jQuery 框架。
  3. 如果你还使用了其他框架,可能因命名空间问题导致 js 失效。
  4. js 代码不适用于所有主题,如发生页面错乱,请自行修改。
  5. 如果有人应用成功,别忘记通知我下~

完整的参考文件

comment-ajax
该 php 文件修改自 WordPress 2.8 的 wp-comment-post.php ;
在 WordPress 2.8 + Default 下测试通过。
在 WordPress 2.8 中,生成的回复链接有误,没有相关 js 则不能工作,原因未知。

194 replies on “WordPress 完美 AJAX 嵌套评论”

我一直在考虑着要不要用 wp2.7 的评论功能,对嵌套的样式设计总是不满意,我喜欢整整齐齐的,不喜欢套来套去,哈哈。

另一个分页功能对我来说目前还用不着,评论不多啊!

只用 @ 来表示回复关系的话,让人看得发蒙。要是加上鼠标掠过 @ 即显示原评论,也很不错。
这个分页功能很难用,比方这个“鼠标掠过显示原评论”,本来用 js 从页面上复制即可,分页后得用 ajax 了

折腾了好一下,没搞定。如果加上“还可以更完美点儿?”后面的情况就是:回复后真个回复框是灰色,要ctrl+f5重新载入才能恢复和看到新的评论。如果不加上“还可以更完美点儿?”后面的,那么就回复框能恢复,但新评论还是要刷新(f5就可以了)才能显示。不知是哪里搞错了还是我的模板问题

今天重新试了下,还是有问题:
FF和Chrome下直接发表评论后新评论老是跑到上面算下来第4个评论里面——不是嵌套样式。
IE6下又正常,但加载comments.js提示网页错误

嵌套回复倒是全部正常。

js修改的地方是这里:if($parent.attr(‘id’)==’content’){ //父元素若是main(与我模板有关)
这个应该没问题,我的主题comments的父元素就是content,不改就不会出现新评论

我的主题里是这样的:<ol class=”commentlist” id=”commentlist”>
而你的不是。 修改部分 js 代码试试

//…….
if(!$(‘ol.commentlist’).length){
$respond.before(‘);
}
if($parent.attr(‘id’)==’content’){
$child_list = $(‘ol.commentlist’);
// ……..

嗯,好像搞定了,还是id问题
我把
if($parent.attr(‘id’)==’content’)
改为,
if($parent.attr(‘id’)==’commentlist’)
因为我的ol.commentlist的父级是#commentlist,纳闷,貌似comments写的不是很标准

不过ie6下加载js文件就提示网页错误,虽然不爽,但将就用着先吧

还是我,原来是我的comments.php没按标准定义id,折腾那么久。对了,你文章里还有一个书写错误,就是文件名comment-ajax.php应该改为comments-ajax.php,昨天就发现了但一直折腾忘了跟你说一声。
另:我能否把此文章相关内容转载到我博客?

无所谓标准不标准,都是主题的自由~但是 js 就不一定适用了,我是根据我主题来的。
改为 comments 更符合语义,但也无所谓了哈~
本文就是供折腾犯参考的,当然也欢迎折腾犯们转载

,但加载comments.js提示网页错误

嵌套回复倒是全部正常。

js修改的地方是这里:if($parent.attr(’id’)==’content’){ //父元素若是main(与我模板有关)
这个应该没问题,我的主题comments的父元素就是content,不改就不会出现新评论
回复

评论呈现隔条变色的样式,但我的不是嵌套评论的啊,我的是alt/even的样式,但ajax只呈现一种样式,请问博主js如何处理? php有什么好的方法实现?

//…….
if(!$(‘ol.commentlist’).length){
$respond.before(‘);
}
if($parent.attr(‘id’)==’content’){
$child_list = $(‘ol.commentlist’);
// ……..

我的不是这样的样式呀,而是

if (function_exists(‘wp_list_comments’))
wp_list_comments(‘type=comment&callback=ed_comments’);
else{
foreach ($comments as $comment){
if($comment->comment_type != ‘pingback’ && $comment->comment_type != ‘trackback’)
philna_comments($comment, null, null);
}
}
}else{
?>……..我不会用js处理,用什么js代码来实现啊!

用的是MG12的主题,上面的主题代码和我的主题差不多的,只不过我加上了一些功能而已!对了博主用这种主题AJAX留言JS是怎样写啊,不用JS判断留言,所以留言不会自动隔层分色的,是不是判断单复数样式的还是其它的?