2008.05 18

如何为你的主题添加Ajax评论功能

标签: , , ,
资源共享

今天吃完早餐，本来是要写论文的，但突然想起AJAX的评论功能，所以，就马上动手折腾起来。当然，原本以为很难的嘛，所以，已经做好准备失败的痛苦。不过，其实很简单。我们总是被"AJAX"这个名词给吓坏了，不敢去轻易尝试。如果你刚好看到这篇文章，就尝试一下吧，即使不知道它们的工作原理，不懂PHP/CSS，甚至HTML。

首先，你需要这个包：ajax-comment.zip。里面的东西你不需要懂，当然，能懂是最好不过的;-)。把它解压出来，得到两个文件夹：

/comments-ajax.php

/js/ 里面包含三个文件，分别是：ajax_comments.js effects.js.php & prototype.js.php

把这两个文件夹复制到/wp-content/themes/your_theme/目录下，接下来，调用它。很简单，在header.php中找到

  1.  

<?php wp_head(); ?> ，在它上面，<title>标签内，加上如下代码：

  1. <br />

    

  1. <?php if (is_single() and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script> <?php } ?>  
    2.

接下来，就是我们要让这些JS来实现我们效果的时候了。打开 comments.php，找到<ol class="commentlist"> 把它改成：<ol class="commentlist" id="commentlist">，即是为这个<ol>添加了id="commentlist"，当然，如果你的comments.php中的ol中没有定义样式，那再好不过。如果定义了相同的样式，那你不需要修改它。

找到<?php if ($comments) : ?> ，并保证它出现在 <ol class="commentlist" id="commentlist"> 下面。如果不是的，把它放在下面。这样才能使AJAX效果得以实现。大多数wordpress主题，的样式都不是我们希望的样式，或许你曾经做了这个测试，但没有成功，就是因为他们的位置问题。

UPDATE:以上这点：经测试证明，完全可以。

找到下面这段代码（当然，不必完全相似，因为不同的作者写法不同，但PHP语言应该是非差不多相同的）：

    

  1. <?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <?php else : // comments are closed ?> <!-- If comments are closed. --> <p class="nocomments">Comments are closed.</p> <?php endif; ?> 
    2.

把它代换成下面的代码（事实上，只要找出他们的不同处，修改就可以了，有时根本不必修改！）

    

  1. <?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <li id="hidelist" style="display:none"></li> </ol> <p id="nocomment">No comments yet</p> <?php else : // comments are closed ?> <!-- If comments are closed. --> <li style="display:none"></li> </ol> <p>Comments are closed.</p> <?php endif; ?> 
    2.

再找到<?php if ('open' == $post->comment_status) : ?>.，在它的前面或后面加上下面这代码：

    

  1. <div id="loading" style="display: none;">Posting your comment.</div> <div id="errors"></div> 
    2.

注意：你会看到我评论中在评论提交过程中显示一个进度提示条，就是定义这里的#loading的样式。关于加载图片，你可以在这里找到很多很漂亮的，而且不用自己动手做。

还有，还是在comments.php中找到：

    

  1. <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> 
    2.

把它换成：

    

  1. <form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" onsubmit="new Ajax.Updater({success: 'commentlist'}, '<?php bloginfo('stylesheet_directory') ?>/comments-ajax.php', {asynchronous: true, evalScripts: true, insertion: Insertion.Bottom, onComplete: function(request){complete(request)}, onFailure: function(request){failure(request)}, onLoading: function(request){loading()}, parameters: Form.serialize(this)}); return false;"> 
    2.

到这里，基本上已经大功能造成了。只是几步嘛。别急，最近，确保你的评论提高按钮是用#submit的ID，像这样：

    

  1. <input name="submit" type="submit" id="submit" value="Submit" />  
    2.

如果不是的话，帮它加个ID吧，我们需要这个。

好了，已经没有了，是不是感觉终于熬到头了，你需要做的是保存它。然后，测试。不出问题的话，你会欣喜地发现，你已经拥有Ajax评论功能了。哈哈，是不是很简单呢？更详细的可以看《WordPress Ajax Commenting revisited》，我是从这里学习的哦。这是一个很出名的教程。感谢作者，让不懂得很多的人拥有AJAX的评论功能。

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » 资源共享 »

83

  1. 2008.05.18 11:33 am
    sofish(visit): [回复]

    不会吧,我再测试…

  2. 2008.05.18 12:19 pm
    chunfa(visit): [回复]

    测试

  3. 2008.05.18 1:18 pm
    sofish(visit): [回复]

    难道计数器有问题？只能计算到第二条评论?…我试,我试,我试试试…

  4. 2008.05.18 1:38 pm
    Delacro(visit): [回复]

    测试中，还没搞定有点问题

  5. 2008.05.18 1:41 pm
    sofish(visit): [回复]

    @Delacro: 刚才有地方被我写反了,现在OK了,哈哈,计算器也没问题,只是,因为只刷新新评论,计算器会看起来少一条…但如果刷新页面,就可以了…这也是我们想要的…

  6. 2008.05.18 1:47 pm
    Delacro(visit): [回复]

    嗯，我这里有些问题，回复出来的新评论，字很虚，不知道怎么搞的

  7. 2008.05.18 1:49 pm
    sofish(visit): [回复]

    @Delacro: 把commentlist中的字体跟你原来评论的字体定义同样的颜色样式就OK了…

    我想,应该是这样…

  8. 2008.05.18 1:55 pm
    Delacro(visit): [回复]

    好的我试试

  9. 2008.05.18 2:05 pm
    Delacro(visit): [回复]

    ie6下没问题，firefox3下面不正常呵呵

  10. 2008.05.18 2:07 pm
    Alan(visit): [回复]

    测试一下效果

  11. 2008.05.18 2:15 pm
    sofish(visit): [回复]

    @delacro: 这样啊,我搞得定CSS的跨浏览器支持,但搞不定JS的…

    @Alan: 哈哈,应该不不错吧,虽然loading的图标有点小…

  12. 2008.05.18 2:30 pm
    Kouz(visit): [回复]

    看帖子比地震晕.

  13. 2008.05.18 2:42 pm
    sofish(visit): [回复]

    @Kouz: 那也只能这样了,哈哈…你慢慢折腾,我睡觉去…

  14. 2008.05.18 2:58 pm
    小胖(visit): [回复]

    测试

  15. 2008.05.18 3:11 pm
    一亿度(visit): [回复]

    看样子好复杂啊

  16. 2008.05.18 3:22 pm
    Alan(visit): [回复]

    你这里是成功了，我那里没效果出来，汗

  17. 2008.05.18 3:35 pm
    Alan(visit): [回复]

    成功了, 哈哈, thx. 我 header.php 里面放的那几个js代码不能放标签里

  18. 2008.05.18 4:05 pm
    sofish(visit): [回复]

    @小胖: 你的成功了没有…

    @一亿度: 不会啊,只是看起来好像很乱…所以,经常被吓到了…

    @Alan: 哈哈,不错啊…恭喜恭喜…不过,不知道为什么,我上你的博客好慢…我是电信网…不知道是不是网路不通…

  19. 2008.05.18 4:33 pm
    stephen(visit): [回复]

    我是直接使用Wordpress Theard comment这个评论回复插件，已经带有了Ajax功能，懒得去修改代码了^_^

  20. 2008.05.18 5:33 pm
    Alan(visit): [回复]

    @sofish, 可能服务器的问题，平时不会

  21. 2008.05.18 5:56 pm
    sofish(visit): [回复]

    @stephen: 嗯,这个插件非常不错,我自己也用过,不过,后来删了…因为那时候不懂CSS,现在也不太想用插件…

    @Alan: 不过,留言挺快的,呵呵…效果也很好…

  22. 2008.05.18 6:29 pm
    adamzhu1986(visit): [回复]

    对我这样的新手来说似乎还是有些复杂了…

    慢慢琢磨…

  23. 2008.05.18 6:37 pm
    sofish(visit): [回复]

    @adamzhu1986: 哈哈,你慢慢折腾,我再做一下测试…

  24. 2008.05.18 9:23 pm
    狂舞网络(visit): [回复]

    有点深奥了,搞不太懂,刚刚接触这个还不敢乱来:-).

  25. 2008.05.18 10:52 pm
    sunchao(visit): [回复]

    不行啊 还得一点一点改回去

  26. 2008.05.19 12:37 am
    Borges(visit): [回复]

    有点好奇效果 测试一下

  27. 2008.05.19 3:08 am
    摩摩诘(visit): [回复]

    我原来用过这个插件,直接激活使用,所以外观上和自己的主题不匹配,看来还是有办法Hack一下的哈,仔细研究一下先.
    现在使用的是ajax-wordpress插件,不过也还不能满意.

  28. 2008.05.19 7:36 am
    雅噜噜(visit): [回复]

    先在本地测试看看好用不在上传服务器咯。

  29. 2008.05.19 8:38 am
    tsian(visit): [回复]

    测试。

  30. 2008.05.19 9:49 am
    sofish(visit): [回复]

    @sunchao: 呵呵,记得备份你的文件啊…

    @Borges: 嗯,多多测试…

    @摩摩诘: 呵呵,有空试一下整合Brain’s Thread Comment到自己的评论系统来…

    @雅噜噜: 我也是在本地测试后,上传上来的…

    @tsian: 哈哈,继续…

  31. 2008.05.20 1:35 am
    te4st(visit): [回复]

    `lhlkkllkkl吃测试

  32. 2008.05.20 9:20 am
    小墨(visit): [回复]

    上次没弄成功 懒得折腾了 有没有一键式的~~

    - -!!

  33. 2008.05.20 11:57 am
    Leoo(visit): [回复]

    试试呢？

  34. 2008.05.20 2:11 pm
    limkianhui(visit): [回复]

    我也来试试看吧。

  35. 2008.05.20 9:32 pm
    stephen(visit): [回复]

    这段时间感觉我theard Comment好像有点问题，总是ajax效果总是无法留言，郁闷啊。现在暂时禁用了ajax功能

  36. 2008.05.20 11:36 pm
    sofish(visit): [回复]

    @小墨: 呵呵,有空在本地多试几次,应该就行了…

    @stephen: 可以看看文件里面怎么写,自己修改一下…

  37. 2008.05.21 10:35 am
    Leoo(visit): [回复]

    再试试？我怎么不行？

  38. 2008.05.21 8:58 pm
    Mao(visit): [回复]

    测试!

  39. 2008.05.21 9:06 pm
    sofish(visit): [回复]

    @Leoo: 看看JS有没有被调用 到,要写在 跟< /head>这间…

    另外,看看你的PHP的注意重要,和有没有忽略了一些HTML的引用…

    @Mao: 哈哈,请多多建议…

  40. 2008.05.23 12:49 am
    2699(visit): [回复]

    测试ajax的效果

  41. 2008.05.23 1:16 am
    tension(visit): [回复]

    我可以为我的SABLOG加上这个效果吗?

  42. 2008.05.23 8:59 am
    sofish(visit): [回复]

    @tension: 应该可以的吧…尝试一下吧…

  43. 2008.05.23 6:20 pm
    逍遥灵(visit): [回复]

    测试测试，这估计是回复最多的文章了 哈哈~

  44. 2008.06.05 11:54 pm
    江山(visit): [回复]

    收到返回给

  45. 2008.06.07 1:36 pm
    zEUS.(visit): [回复]

    这个功能我还是没搞定 T_T
    新主题的留言模板直接整合了分页、分离 TB 的效果，留言模板代码都“乱”得我不认识了。。。
    我在网上找的留言隔行更换背景的效果不是很好，sofish 能不能共享一下此方法？

  46. 2008.06.08 1:01 am
    sofish(visit): [回复]

    @zEUS.:这个是PHP的,我也不太懂,你可以下载Sandbox研究一下…

  47. 2008.06.09 1:27 pm
    唐小楼(visit): [回复]

    测试

  48. 2008.06.21 1:05 pm
    试试(visit): [回复]

    哦，这么好么，试试

  49. 2008.06.24 6:31 pm
    ff(visit): [回复]

    测试一下

  50. 2008.07.01 11:48 pm
    xin(visit): [回复]

    为什么不可以用英文

  51. 2008.07.02 8:35 am
    sofish(visit): [回复]

    因为我装了some chinese please这个插件…

  52. 2008.07.02 8:47 am
    xinxin(visit): [回复]

    测试一下

  53. 2008.07.04 10:49 pm
    sein(visit): [回复]

    test。。。

    中文

  54. 2008.07.11 11:53 pm
    clarezoe(visit): [回复]

    我的也没有成功

  55. 2008.07.15 11:23 am
    John(visit): [回复]

    测试看看那

  56. 2008.07.15 6:20 pm
    John(visit): [回复]

    测一测啊～～

  57. 2008.07.16 2:19 am
    test(visit): [回复]

    test测试

  58. 2008.07.17 6:33 am
    skgjs@gmail.com(visit): [回复]

    really?真四大会计公司令

  59. 2008.07.22 9:30 pm
    121@WQE.COM(visit): [回复]

    测试测试

  60. 2008.07.27 12:28 pm
    quanrenx@gmail.com(visit): [回复]

    测试，test

  61. 2008.07.27 12:29 pm
    quanrenx@gmail.com(visit): [回复]

    测试一下

  62. 2008.07.29 2:10 pm
    fasdfasdf(visit): [回复]

    asfasdfsfasdfasdf 爱的身份爱的发射点

  63. 2008.08.18 1:17 pm
    googlefish(visit): [回复]

    一样的测试。

  64. 2008.08.27 11:19 pm
    Anonymous(visit): [回复]

    作者很牛嘛，呵呵，回头我也试试。先谢谢了

  65. 2008.09.06 8:29 pm
    riant(visit): [回复]

    看看效果，以后做一个自己的模板可能用得到呢 。

  66. 2008.09.09 4:05 pm
    Jinwen(visit): [回复]

    最近还想弄下这个，有空试下。

  67. 2008.10.01 10:29 pm
    braveboy(visit): [回复]

    那么我就测试一下了～

  68. 2008.10.10 11:03 am
    mg12(visit): [回复]

    写得很清楚, 可以看明白了, 晚上回去试试.
    但竟然用了 effects 和 prototype 两个 framework, 会不会比较大?

  69. 2008.10.13 9:16 pm
    鬼仔(visit): [回复]

    现在还是AJAX吗？

  70. 2008.10.18 8:45 pm
    Marvyn(visit): [回复]

    看看效果，嗯。

  71. 2008.11.20 12:58 pm
    gavinzhm(visit): [回复]

    也想弄个AJAX留言试一下

  72. 2008.11.29 8:39 pm
    netcute(visit): [回复]

    测试一下，我也想给我的博客弄这种效果呢。

  73. 2008.12.07 3:41 pm
    shamas(visit): [回复]

    我也来测试下

  74. 2008.12.07 3:41 pm
    shamas(visit): [回复]

    没看到效果啊

  75. 2008.12.18 4:47 pm
    木木木木木(visit): [回复]

    找啊找 试试这个方法!

  76. 2008.12.23 11:36 am
    罡风行(visit): [回复]

    俺也来试试

  77. 2008.12.23 12:45 pm
    罡风行(visit): [回复]

    测了，看不到效果啊。

  78. 2009.01.12 8:44 am
    林晨(visit): [回复]

    试了再说

  79. 2009.01.16 2:58 pm
    feir(visit): [回复]

    今天刚决定给博客加上这玩意。。。

  80. 2009.01.18 4:58 pm
    xiaooole(visit): [回复]

    我是专门来测试的。

  81. 2009.01.25 11:10 am
    木子(visit): [回复]

    我来试试看

  82. 2009.02.09 3:43 pm
    吖Bee(visit): [回复]

    用jQuery可能更好…看看AJAX效果

  83. 2009.02.19 9:14 pm
    Showfom(visit): [回复]

    这里可以么

Additional comments powered by BackType