WordPress 2.7~3.0原生嵌套评论的AJAX实现办法

适用于 WordPress 3.5+ 请移步到这里《适用于 WordPress3.5+ 的 Willin 版本 AJAX 评论提交

从昨天开始就一直在折腾WordPress 2.7原生嵌套评论的AJAX效果,但根据 Lorz 的文章《WordPress 完美 AJAX 嵌套评论》愣是没折腾成功。后来在 Lorz 的帮助下,今天终于搞定了。

大家应该知道WordPress 2.7原生嵌套评论函数是wp_list_comment(),但不知什么原因很多评论插件都没有支持此函数,自从我自己折腾模板时评论函数就一直是使用wp_list_comment() ,也曾经折腾过试嵌套评论支持 Ajax,但一直就没成功过,原因嘛,就是不懂php+js,哈哈

既然折腾成功了,那么就要分享。喜欢折腾的朋友可以直接去 Lorz 的文章《WordPress 完美 AJAX 嵌套评论》,我这里只写出具体的步骤,原理什么的就算了,因为我也不怎么懂。

……由于直接粘贴代码出错,以前的内容删除,具体看下面

2009.7.7 Update

昨天开始跟willin讨论他编写的wp2.7嵌套评论,根据willin的comments-ajax.js和comments-ajax.php我修改上面讨论的wp2.7(wp2.8)嵌套,解决了一直存在的问题:

1. 嵌套回复后留言框不能自己回到下面
2. comments-ajax.php是放在wordpress根目录下的,不知怎样移到模版下(直接移到其他目录会出错)
3. 评论总数显示错误。

上面说了,粘贴代码会出错,所以具体的代码修改方法也不写了,直接提供comments-ajax.js和comments-ajax.php文件下载:ziddu网盘下载 / uushare下载

下载好后按照下面的步骤:

一、下载这两个文件后,用文本编辑软件打开 comments-ajax.js 查找"zwwooooo"然后按照标示的说明修改就可以了(要修改的地方我都用"zwwooooo"标示并写有说明),修改好后把这2个文件上传到你的主题目录下。

二、打开主题文件footer.php,把下面的代码加到<?php wp_footer(); ?>下面

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/comments-ajax.js" type="text/javascript"></script>

三、然后打开主题文件comments.php,找到类似下面的

<h2 id="comments"><?php comments_number('0 Responses', '1 Responses', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h2>

改为

<h2 id="comments"><span id="comment-num"><?php comments_number('0', '1', '%' );?></span> Responses to &#8220;<?php the_title(); ?>&#8221;</h2>

OK了,试试吧。

补充:(2009.7.8)

如果你的主题里面的 comment.php 中 wp_list_comment 的函数中有 callback ,那么请打开主题下的 function.php 。找到与 callback 同名的函数,将其中的 <li></li> 之间的夹杂 php 代码的 html 部分复制过来替换 comments-ajax.php 里面最后面那里的 <li></li> 之间的内容。接着将其中两个函数 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)
//……

本文所说在 wordpress 2.7 和 2.8下测试成功,因为我已经升级为 wp2.8 ,所以 2.7 会稍微不同,但按原理来说下载的文件应该兼容 wp2.7 ,各位慢慢折腾吧。

2009.8.15 Update:

willin 最新折腾出的方法,很方便,不需要修改文章里说的两个文件就可以用了,而且效果比这个好:《WordPress 内置嵌套评论专用 Ajax comments

PS:不知是不是因为服务器环境问题,willin最新的方法我这里失效,但经过willin'阉割'的版本就OK了--把"刷新前可以编辑自己的新评论"功能去掉,效果大家可以直接评论试试。 2009.8.18 willin已经解决此问题了,只要重新下载下面的'willin提供的下载'就可以了

willin提供的下载地址: comments-ajax.zip

如果出现我'PS'所说的状况,可以用和我一样的: ziddu网盘

2009.10.21 Update:

下载 comments-ajax.zip (8.90k) (v1.26 2009/10/21 更新)
下载 comments-ajax(no-edit).zip (7.96k) (v1.26 2009/10/21 更新, “无在编辑版” )

2010.5.20 Update:

最新的 1.29 版本下载(支持WP2.9.x):uushare网盘 (2010.3.25 by willin)

最新的 1.3 版本下载(只能用在WP3.0.x):uushare网盘 (2010.5.20 by willin)

具体方法直接去这里吧:http://kan.willin.org/?p=1271

这里说说使用方法:

1. 解压下载到的压缩文件得到2个文件:comments-ajax.js、comments-ajax.php,把其放到到所使用的主题目录下

2. 打开所用主题的 header.php(有些主题是在 footer.php)找到下面的代码

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

替换为

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<?php if ( is_singular() ){ ?>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/comments-ajax.js"></script>
<?php } ?>

如果你所使用的主题评论结构够规范,那么就可以工作了

zww
or
oooo

“WordPress 2.7~3.0原生嵌套评论的AJAX实现办法”有226条评论

    1. zwwooooo says:

      @Timothy 哈哈,平时你发表评论就是 Test 啦

  1. xiao3 says:

    我想问下,在提交评论的时候会有一个Loading的过程而页面不会变化,这个是怎么弄的? :?:

    1. zwwooooo says:

      @xiao3 Ajax 效果的评论,实现方法我现在用willin的代码,但要求你所用主题的评论结构要标准,willin的博客链接我首页有

  2. (ˇˍˇ) 想~ says:

    试试。貌似比较简单

  3. says:

    :mrgreen: 不错哦

  4. mf says:

    测试下效果?

    1. zwwooooo says:

      @mf 效果如何? :smile:

  5. mf says:

    效果不错,可是我不会弄~~看糊涂了

    1. zwwooooo says:

      @mf 主题评论结构够标准的话很简单,去willin那里安装他的说明照做即可。

  6. 小熙 says:

    测试

  7. someww says:

    2009.10.21 Update:

    下载 comments-ajax.zip (8.90k) (v1.26 2009/10/21 更新)
    下载 comments-ajax(no-edit).zip (7.96k) (v1.26 2009/10/21 更新, “无在编辑版” )

    willin的主机好像坏了。。下载不了,能否发一份给我啊,感谢~

  8. ibuffalo says:

    请问怎样实现评论刷新前可修改的功能呢?

    1. zwwooooo says:

      @ibuffalo 这里下载 http://www.uushare.com/user/zwwaaaaa/file/2870102 后把文件解压到主题目录

      1. 在主题头部加载jQ库和压缩包里面的comments-ajax.js
      2. 打开comments-ajax.js,按照里面的说明设置吧。

    2. ibuffalo says:

      @zwwooooo 回复提示邮件进了Gmail的垃圾箱,刚看到你的提示,谢谢!

  9. SL says:

    TEST~~

  10. neeke says:

    :mrgreen: 这么多人test,那我也test一下。

  11. xiao3 says:

    评论栏隔行变换颜色这个事怎么弄的呢?

    1. zwwooooo says:

      @xiao3 你不是扒皮高手么?自己看css即可,Edit:建议 - 由扒皮变为修改免费主题加上自己的设计

    2. zwwooooo says:

      @xiao3 不过,现在你改的zsofa比较不错了,希望你继续努力,下面是评论隔行css定义代码(zsofa和其他规范的主题都通用)
      ol.commentlist li.thread-even{background:#fff;}
      ol.commentlist li.thread-odd{background:#f2f2f2;}
      你看看就知道怎么定义了

    3. xiao3 says:

      @zwwooooo 我想说下!我前面用的那个主题你们就看到我在header上面用到mg12的那个搜索框,我承认,那个header是我用他的!但是其他的都不是他那个主题,我原来的那个主题header部分不是很好!所以才改的!要是你们觉得我那样就算是扒皮的话!那我想我现在用你的这款zsofa该是把谁的皮的!header换了一种样式,说是扒皮,comment换一种样式,又是扒皮,连弄个侧栏都是扒皮啦~

    4. xiao3 says:

      @zwwooooo 你说的这个样式我也知道,但是现在我的每一条评论都会有thread-even和thread-odd两个样式!所以现在的问题是怎么使得这两个样式要隔行显示,而不是同时显示!

    5. zwwooooo says:

      @xiao3 哈哈,其实你直接修改个颜色和样式即可。过度时期,慢慢折腾。

    6. zwwooooo says:

      @xiao3 特意去你那看了一下,你是不是改了评论调用函数?

  12. itfan says:

    测试一下

  13. 煮透社 says:

    我上面的方法做了新修改,隐藏按下去了是滑动,而不是瞬间显示。 :razz:

    1. zwwooooo says:

      @煮透社 呵呵,完全可以根据自己喜好修改效果 :mrgreen:

  14. pan says:

    测试一下

  15. biao166 says:

    求救啊!我的出现如下错误:Fatal error: Call to undefined function get_post_status_obj() in /home/a2494514/public_html/wp-content/themes/cavano/comments-ajax.php on line 32
    32行代码:$status_obj = get_post_status_object($status);
    怎么解决!!!

    1. zwwooooo says:

      @biao166 前面已回复

  16. 老大,我用的INOVE模版,想问一下,要怎么来修改!!谢谢!!我修改了,可没达到你这种效果!! :!: :???:

    1. zwwooooo says:

      @Mr.差不多 iNove的评论部分自定义太高,所以很难改,还是用插件吧

      1. 默哼 says:

        不错不错学习了

    2. @zwwooooo
      看来没戏了,只好有时间慢慢来改了!! :sad:

    3. zwwooooo says:

      @Mr.差不多 有时间看看吧

    4. @zwwooooo 谢谢了!!就算是两个月,我也愿意等! :razz: 因为我太菜了! :arrow: 很喜欢这功能!!太强大了!!忍不住诱惑呀! :grin:

    5. zwwooooo says:

      @Mr.差不多 直接换主题不就得了,虽然inove很优秀

  17. LLT says:

    好吧。。。
    我是来图片另存为这个loading小图的
    :grin: :evil: :evil:

    1. zwwooooo says:

      @LLT 这个小图片随便拿去用 :mrgreen:

  18. ERTERT says:

    TEST

发表评论

昵称 *

网址

B em del U Link Code Quote