WordPress 完美 AJAX 嵌套评论

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

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

新增一个 comment-ajax.php

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

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

$comment_depth = 1;   //为评论的 class 属性准备的
$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同学的提醒）。

<li <?php comment_class('',$comment_id,$comment_post_ID); ?> 
	id="li-comment-<?php comment_ID() ?>"
	style="display:none">
<div id="comment-<?php comment_ID(); ?>">
	<div class="comment-author vcard">
		<?php echo get_avatar($comment,$size='32',$default='<path_to_url>' ); ?>
		<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), 
		get_comment_author_link()) ?>
	</div>
 
	<?php if ($comment->comment_approved == '0') : ?>
		<p><em><?php _e('Your comment is awaiting moderation.') ?></em><p>
	<?php endif; ?>
	<div class="comment-meta commentmetadata">
	<a href="<?php 
		echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
	<?php 
		printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>
	<?php edit_comment_link(__('(Edit)'),'  ','') ?>
	</div>
	<?php comment_text() ?>
	<div class="reply">
		<?php 
			comment_reply_link(
				array(
					'depth' => $comment_depth, 
					'max_depth' => get_option('thread_comments_depth')
				),
				$comment_id,$comment_post_ID) ?>
	</div>
</div>
</li>

如果你的 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 则不能工作，原因未知。
WordPress, ,
2009-06-04发表评论！

108 条评论咯

  1. 卢松松
    2009-06-04于22:23

    技术牛人啊！~WP的吗？

    回复
  2. welee
    2009-06-05于02:16

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

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

    回复
  3. welee
    2009-06-05于02:18

    不过不管怎样，这篇还是收藏，说不准哪天我会用到呢！

    回复
  4. 深红色
    2009-06-05于02:25

    。。都在GOOGLE READER 里看了，网站配色真漂亮。

    嵌套评论就那么好吗。看很多人在问。

    回复
  5. sofish
    2009-06-05于02:37

    留着留着。

    回复
    • Lu Da
      2009-06-06于00:15

      逮到你了，话说你那儿该有个 ajax 评论哦。顺便问个问题，我这里的评论前面的 数字标号，在 IE 下怎么都出现在头像的位置上了？

      回复
      • sofish
        2009-06-07于00:27

        所以，我收藏，收藏。那个似乎是因为list列表的问题之类的。我又要修改论文了，真是没心搞代码。但看了一下又看不出来。等我修改完再看看。-,-…

        回复
      • Leeiio
        2010-01-09于22:14

        今天才把blog的主题支持原生嵌套了，来你这里学习原生嵌套ajax评论。

        回复
  6. Zoyu
    2009-06-05于21:56

    哈哈，不错

    回复
  7. 子曰
    2009-06-06于20:17

    一直都是使用comment ajax评论嵌套，方便也好使~~

    回复
  8. Showfom
    2009-06-07于22:50

    牛人 我先试试

    回复
  9. kerby
    2009-06-09于17:34

    Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:ilorz&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 502 Bad Gateway in /home/lorzme/public_html/wp-content/themes/lorz/template-home.php on line 56

    这是什么？还在测试，没稳定吧？

    回复
    • Lu Da
      2009-06-09于20:45

      首页从 Twitter 抓取一推。Twitter 挂了，我这就废废了。
      看来，应该试试从 Thread Twitter 这个插件抓取的数据里来读一条

      回复
  10. BobMarche
    2009-06-11于08:30

    Thanks for the useful info. It’s so interesting

    回复
  12. zwwooooo
    2009-06-13于19:37

    测试一下。

    我今天试了下提示comments-ajax.php文件的这句语法错误：
    <li
    …

    不知什么原因

    回复
  13. zwwooooo
    2009-06-13于22:25

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

    回复
  14. zwwooooo
    2009-06-14于12:51

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

    嵌套回复倒是全部正常。

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

    回复
    • Lu Da
      2009-06-14于13:07

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

      //.......
if(!$('ol.commentlist').length){ 
	$respond.before('<ol class="commentlist"></ol>);
}
	if($parent.attr('id')=='content'){ 
					$child_list = $('ol.commentlist');
// ........
      回复
      • zwwooooo
        2009-06-14于13:39

        改了，还是一样，看来是我的模版问题了

        回复
        • zwwooooo
          2009-06-14于14:20

          直接发表评论是显示在最后一个嵌套回复的评论里面，所以还是js的问题。我不懂js所以只能麻烦你看看

          回复
        • zwwooooo
          2009-06-14于14:38

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

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

          回复
          • Lu Da
            2009-06-14于17:22

            IE6 ？ 莫非是找不到元素？删掉这行 var $loading = $(‘#loading’) 试试。

  15. zwwooooo
    2009-06-14于14:58

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

    回复
    • Lu Da
      2009-06-14于17:19

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

      回复
  16. Await
    2009-06-14于21:51

    我是来试下这个行不行的。

    回复
  17. aunsen
    2009-06-17于10:24

    正在搞这个东西，先测试下！

    回复
  18. 阿修
    2009-06-17于22:57

    我似乎来过……

    回复
  19. 林木木
    2009-06-20于14:51

    WordPress2.8变成了87~90行了！

    回复
  20. young001
    2009-06-28于10:38

    这个网站给体验很好

    回复
  21. young001
    2009-06-28于10:38

    就因为好，我订阅了，以后自己做的时候还望指教

    回复
  22. Leeiio
    2009-06-29于09:04

    等啥时候我会把我的评论部分的代码整成嵌套的了再来回看，我的评论部分的代码太旧了…

    回复
  23. 章鱼
    2009-06-30于15:56

    是在这里？

    回复
    • 章鱼
      2009-06-30于16:16

      不行啊 看不懂 写得不清楚 像那个JS 不知道存什么名字

      回复
      • Lu Da
        2009-06-30于17:43

        呃，看来的确需要提下。存为 comment-ajax.js，还要加载 jQuery 。例如：

        <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript"
src="http://dallaslu.com/comment-ajax.js">
</script>
        回复
  24. joel
    2009-07-09于08:49

    测试下看看

    回复
  25. sdfsdf
    2009-07-27于21:56

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

    嵌套回复倒是全部正常。

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

    回复
  26. 小T
    2009-07-29于08:49

    看看，以前做好的，现在又弄不上了。。

    回复
  27. edikud
    2009-08-11于17:03

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

    回复
  28. edikud
    2009-08-11于17:10

    在ishawn.net博客,ajax评论样式是可以隔条改变的…

    回复
  29. edikud
    2009-08-13于14:57

    //…….
    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代码来实现啊！

    回复
  30. Joe
    2009-08-14于10:39

    测试一下。

    回复
  31. edikud
    2009-08-14于13:01

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

    回复
  32. willin
    2009-08-14于13:57

    我的 Ajax comments 發佈了, 請指教囉!
    http://willin.atbhost.net/?p=1271

    回复
  33. whisperer
    2009-08-15于04:44

    用quick comments有很多问题，来试试这个~~

    回复
  34. 侠客岛
    2009-08-18于18:53

    谢谢分享，我体验下了，呵呵

    回复
  35. Joe
    2009-09-05于16:45

    再来测试。

    回复
  36. Aliano
    2009-09-13于08:38

    再来测试。…

    回复
  37. AccEcc
    2009-09-19于20:11

    需要看一看，可以的话再折腾。哦 对了。和AJAX评论插件有什么区别？

    回复
  38. admin
    2009-10-07于20:07

    测试

    回复
  39. eric
    2009-10-10于17:02

    测试下

    回复
  41. keon
    2009-10-13于18:53

    测试下

    回复
  43. 阿修
    2009-10-15于11:42

    啊？2.8不能用啊？白折腾了……

    回复
    • Lu Da
      2009-10-19于07:58

      不是不能用，就是生成的回复链接有问题。这个问题也不影响正常使用，但如果浏览器禁用了 js ，就没办法回复评论了

      回复
  44. 天天成长的博客
    2009-11-06于13:57

    非常不错，也试试这个功能！

    回复
  45. neeke
    2009-11-13于14:10

    测试一下看看。

    回复
  46. 枯藤昏鸦
    2009-12-20于21:32

    不需要输入名字？

    回复
  47. abercrombie fitch
    2009-12-24于15:45

    不错。。。。。。。

    回复
  48. aa
    2010-02-11于16:24

    我也来试一下

    回复
  51. Skyoy
    2010-03-22于23:57

    嵌套评论，又爱又恨啊

    回复
  52. 吓我一跳
    2010-03-30于00:14

    正需要这个 现在在学习

    回复
  53. 左岸读书
    2010-04-15于12:40

    我网站的回复为什么会突然无效了呢？

    回复
  55. 梧桐
    2010-04-18于23:22

    大家一起来测试

    回复
  57. 测试
    2010-05-07于14:22

    测试测试

    回复
  58. 越小墨
    2010-05-07于14:23

    我的博客安装了wordpress-thread-comment ，为什么AJAX没有用？？

    回复
  59. 越小墨
    2010-05-07于14:23

    我的博客http://www.dreamershop.org/

    回复
  61. word
    2010-07-11于11:23

    测试一下

    回复

Trackbacks/Pingbacks

  1. WP默认评论之非完美 AJAX - Dallas Lu™
  2. Easy to Hide - Dallas Lu™
  3. WordPress內置嵌套评论专用Ajax comments

发表评论

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Additional comments powered by BackType