2009年06月14日 226条评论

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. lococ says:

    :???: 测试

  2. tenado says:

    哇,你的评论的发布效果也很不错,能告诉我怎么加上的吗?

  3. SErHo says:

    这个,试用了一下,为什么提示出现服务器故障了?

  4. [...] 分页没有使用代码,感觉样式做不漂亮,所以使用了Paginator这个分页插件,设置非常简单,而且感觉非常酷。关于主题代码化,去除不必要的插件,可以看看来自ZWW的《用代码武装你的博客系列》。好吧,最后感觉最难折腾的还是CSS [...]

  5. 艺创网 says:

    看下效果 :lol:

  6. 1Nobit says:

    测试下?

  7. 1jose says:

    这主题真不错

  8. 设计失控 says:

    能不能做到不改变我现在的评论样式,而用上这个功能?不懂代码呀,有高人帮一下就好了!

    1. zwwooooo says:

      @设计失控
      如果你的评论结构跟TT主题差不多,那么就可以上;话说你不是认识很多主题高手么?
      如果真没人帮忙,你把主题打包发给我,我免费帮你看看吧,不过最近我较忙,需要点时间。

    2. 设计失控 says:

      @zwwooooo
      谢谢,主题高手都很忙呀!那等你空了,我们再聊吧,现在也不急!

    3. zwwooooo says:

      @设计失控
      有时间就发过来,躺在我的邮箱里我才会记得,不然我会忘记的

  9. 泊风 says:

    请教如何修改”提交成功, 刷新页面之前可以再编辑“这句提示的显示位置及字体大小。

    1. zwwooooo says:

      @泊风
      @泊风
      打开 comments-ajax.js,查找“提交成功”,然后在其上写css属性。例如:
      原来的:提交成功
      改为:

      <span style="color:#f00">提交成功</span>

      至于显示位置就麻烦了,你要稍微懂得js才行

    2. 泊风 says:

      @zwwooooo
      感谢博主指点,费心了!

  10. 金冈 says:

    采用了willin的comments-ajax的PHP文件,JS部分是自己写的JQ,我现在想实现里面的评论刷新页面前再编辑的功能,不知道该怎么弄,就是单独那个功能该如何实现呢?

    1. zwwooooo says:

      @金冈
      直接参考willin的,这里说不清楚。

  11. 1迷失 says:

    博主,我又来了。上次折腾ajax评论,升级zbench主题后解决了。。

    这次我是想把ajax评论的 检查重复评论功能去掉,请教如何去除啊~
    我试了把comments-ajax.php中那部分功能代码去掉,但是没有效果,还是会检查评论重复。

    是不是wordpress本身不允许 同一个人的两次评论是相同的?
    或者是zbench主题本身还会检查评论重复的?

    搞了好多天了,最后还是到你这里来。。。o(︶︿︶)o 唉

    1. zwwooooo says:

      @迷失
      霍霍,去zlz.im找找,他写过相关文章。

    2. 迷失 says:

      @zwwooooo
      13号的时候我就在他博客留言了,一直没反应,我也解决不了,所以来你这了哈~

      是不是wordpress本身不允许一片日志下 同一个人的两次评论是相同的?
      或者是zbench主题本身还会检查评论重复的?

    3. zwwooooo says:

      @迷失
      你说这个啊,这是wp默认会检查的,这样是防垃圾机制,难道你想被垃圾攻击?霍霍。

  12. WordPress 內置评论 免刷新页面代码 Ajax comments | 兔子先生 says:

    [...] 我又在 js 中加了判斷式) 4. 評論數量即時更新顯示. (感謝 ZWWoOoOo 提供想法, 我做了大幅修改) 5. 評論提交成功, 評論框自動回底層. (參考 [...]

  13. 1追风 says:

    这个功能不错

    1. zwwooooo says:

      @追风
      现在是常用功能了

  14. 迷失 says:

    发现ajax之后的一个问题,打开任何页面速度都很慢。。很慢。。
    发现原因了

    CTRL+F 找到

    替换为:

    <script type="text/javascript" src="/comments-ajax.js">

    替换这代码之后访问网站速度就很慢了,显示空白页面过很久之后才显示内容。啊啊啊 啊啊

    1. zwwooooo says:

      @迷失
      你木有写对,具体去willin哪里看吧,我这只是简单说明一下,对于对jQ不怎么接触的稍微难点。

    2. 迷失 says:

      @zwwooooo
      哈哈,问题解决了。
      代码我没弄错,上面的只是粘帖到评论狂之后有些不见了哈。

      问题原因为调用谷歌的js速度太慢了,我把js下载下来放在自己服务器上,再改js路径,速度一下子就快了!
      ?php bloginfo('template_directory'); ?>/js/jquery.js
      还是受到你的启发了。。。

    3. 迷失 says:

      @zwwooooo
      每次你的主题一升级,我都得改好多代码啊
      1.主题整体字体设置为14px,原来的字体太小啦~~
      2.index.php、achieve.php显示文章分类

      3.给文章增加浏览次数

      4.实现评论回复邮件通知功能

      5.增加评论楼层显示

      以上4 5还是挺重要的,大叔觉得有木有啊?

      有什么办法能不每次升级后都手动修改呢?

    4. zwwooooo says:

      @迷失
      1.我的主题要考虑国外用户
      2.不是必须的,位置问题要考虑兼容
      3.这个是插件,不是主题自带的,你安装wp-postviews插件就会显示了
      4.同样是插件实现的,大众主题通常不整合这类功能
      5.同样不是必须的,这个主题的特点是将简单快速,不要整合一大堆不一定要的功能

      如果你怕频繁修改主题,可以考虑使用child主题功能,给个网址给你,这样你以后升级主题都不会影响你修改的地方
      http://codex.wordpress.org/zh-cn:%E5%AD%90%E4%B8%BB%E9%A2%98

    5. 迷失 says:

      @zwwooooo
      谢谢。我去研究去。

  15. 1xiaoc says:

    来看看~~

  16. 1紫陌寒 says:

    测试效果

  17. stevejin says:

    效果不错

  18. mack says:

    提交评论后,显示“刷新页面之前你可以 [ 编辑留言内容 ]”,我点击编辑留言内容后问题出现了,之前的写评论都没有了,是一片空白,什么原因呢!?

    1. zwwooooo says:

      @mack
      这要检查你的评论结构了

  19. 1 says:

    请问怎么可以修改ajax评论出来的样式呢?

    1. zwwooooo says:

      @臻
      修改 ajax-comments.php

  20. airoschou says:

    现在一个非常棘手的问题是: 用的是Willin kan的JS,但套用后IE里报错。。。
    this.onclick = null; 这个东西报错了貌似

    1. zwwooooo says:

      @airoschou
      检查是不是js冲突

发表评论

昵称 *

网址

B em del U Link Code Quote