▼

WordPress 內置嵌套評論專用 Ajax comments

原作者是 John Wrana, 德國人, http://jowra.com/journal/2007/01/wordpress-plugin-jquery-ajax-comments/, 插件從 2007-02-09 到現在都沒更新, 當然早已不能用. 這麼好的插件丟了可惜啊! 所以, willin 以他的插件為骨架, 用新手法重新編寫, 針對 WordPress 內置嵌套評論的特性, 讓它起死回生...
　
功能:
　1. 使用 Ajax 異步傳輸, 評論後不用刷新頁面, 即可看到評論內容出現於嵌套之中. (這是 Ajax comments 主要功能)
　2. 錯誤偵測也使用 Ajax 提示, 出錯不必跳轉頁面. (這會拖慢評論送出速度, 但我還是把它留著)
　3. 套用你所使用模板的 class 屬性. (感謝 Lorz 在先前已找到好方法, 我又在 js 中加了判斷式)
　4. 評論數量即時更新顯示. (感謝 ZWWoOoOo 提供想法, 我做了大幅修改)
　5. 評論提交成功, 評論框自動回底層. (參考 /wp-includes/js/comment-reply.dev.js 的方法)
　6. 我另加了 "重覆評論" 和 "評論太快" 的預檢查功能, 因 WP 送出評論前可沒這兩項檢查, 它是在送出後才檢查的.
　7. 刷新頁面之前可以再編輯. (在 WP-Ajax-Edit-Comments 這個優秀插件中, 這原本是個大工程, 但還是被我簡單地和諧了)
　
程式下載:
　下載 comments-ajax-1.29.zip (5.20k) v1.29 適用於 WP 2.8 ~ 3.0
　下載 comments-ajax-1.3.zip (5.15k) (v1.3 2010/5/20 更新) 用了新函數 get_post_status_object(), 只能在 WP 3.0 以上使用.
默認使用 "再編輯" 功能, 如果不想使用, 請打開 comments-ajax.js 看第 10 行說明.

你也可以使用 packer 在線壓縮 javascript, 以減小文件大小.
還有個開發中的 beta 版的 mini-ajax-comm.js (未壓縮 js 3.7k) 只用單一文件執行 Ajax comments, 有興趣也可下載玩一玩, 但使用 jQ 1.3 新的 live 語法, IE 是不能用, 其它都正常.
　
安裝方式:
　解壓縮後, 將 comments-ajax.js 及 comments-ajax.php 放在模板所在目錄.
　在 header.php 找到

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

　用下面幾行取代:

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

　因為 comments-ajax.js 已合併了 WP 的 comment-reply.js, 所以不必再叫用原來的 wp_enqueue_script( 'comment-reply' )
　如果你的模板夠標準, 這樣就可以正常工作了.
　
建議你先用 default 模板先測試, 成功了再試你自己的模板.
如果有任何運行不正常, 請繼續看以下注意事項:

　1. 安裝前, 請先確認 WordPress 內置嵌套評論已正常運作. 如果不是內置嵌套評論, 會出問題的.

　2. 各式模板設計不同, 請檢查 comments.php 是否夠標準, 儘量不修改模板, 只要對應修改 js 文件, 以免 css 亂套.
　　◎標準模板是指:
　　　"評論數" id="comments" (WP 3.0 用的是 id="comments-title")
　　　　例: <h3 id="comments"><?php comments_number( ...有%條評論... </h3>
　　　　已知有不少模板用的不是 "comments", 它的 "comments" 已用到別地方,
　　　　如果評論提交後, 評論數位置出現很多源代碼, 通常是這問題, 要特別留意!
　　　　ps. WP 3.0 用的是 id="comments-title", 新版我已將 "comments" 改 "comments-title",
　　　　　如果你要用以前的 "comments", 請在 comments-ajax.js 第 25 行更改.
　　　"評論列表" id="commentlist"
　　　　例: <ol id="commentlist"> 注意是 ol 不是 ul.
　　　"表單" id="commentform"
　　　　例: <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
　　　"評論框" id="respond" (是含 author, email, url, comment)
　　　　例: <div id="respond" ... >
　　　"評論區" id="comment"
　　　　例: <textarea name="comment" id="comment" ... >
　　　"提交" id="submit"
　　　　例: <input ... id="submit" ... >
　　※以上所用的 id 標簽是 js 運作的重要關鍵! 請確認與模板對應無誤!

　3. 本程式主要提供 Ajax comments 功能, css 已儘量配合原模板輸出. 如果還有 css 需求, 請自行修改.

　4. 在 comments-ajax.php 最下方有評論格式, 若你的 functions.php 有 mytheme_comment(), 請對應覆蓋, 且拿掉 "回覆" 鏈接.

最後, 特地感謝 Leo.N 及 蒋良军 在百忙中測試本程式, 讓本程式更趨完美.
　
很多人問我為何不寫成插件, 這是因為每個模板寫得都不一樣, 直接套用不見得能成功, 還是得靠人工在 js 裏修改 id 或 class 才能用. 這套 Ajax comments 是針對主題開發者所寫, 如果自己不會改, 就找已經改好的主題來用吧. 現在有很多新主題已經自帶了這套 Ajax comments, 直接下載新主題來用不是更方便嗎?
　
關於 jQuery 的加載:
　上面我是引用 google 的 Ajax 程式庫, 如果你的模板已有 jQuery, 就不用再重覆載入了.
　如果想自己加載 jQuery, 版本從 1.2 到最新版都可以用, 就是不要用到 1.2 之前的, 已知 1.2 以前存在很大的 bug, 已很少人用了.
　新版 WP 已自帶原版 jQuery, 請參考《如何載入 WP 內置的 jQuery》 (若用此方法, 請注意要把 comments-ajax.js 掛在 wp_head() 之後, 才能先載入 jQ 再載入 js.)

　建議是 1.2.3, 1.2.6, 1.3.2 這三個版本較不錯.
　jQuery 各版本下載位置: http://code.google.com/p/jqueryjs/downloads/list
　
注意: 本程式完全開源, 請遵守 GPL 協議. GPL 的出發點是代碼的開源/免費使用和引用/修改/衍生代碼的開源/免費使用, 但不允許修改後和衍生的代碼做爲閉源的商業軟件發布和銷售.
一旦發現引用本程式產生商業行為, 將依法起訴. 哈~ 這將是我設計本程式的唯一收入, 請特別留意.
　

- 教程　 - , , 　 - 2009年 08月 14日　 (546)　
▲
« 上一篇文章 :
: 下一篇文章 »
▼

546 篇回應 (訪客:308 篇, 博主:196 篇, 引用:42 篇)

  1. 西米 ~
    2010年 09月 01日 10:52 (2 天 ago)

    已经用上了~！相当赞！相当感谢！

    回覆
  2. sfengz ~
    2010年 08月 29日 16:43 (5 天 ago)

    刚刚装上，不错，，，，

    回覆
  4. cho ~
    2010年 08月 25日 23:21 (9 天 ago)

    OK成功了！折腾了半个小时

    回覆
  5. Zhu ~
    2010年 08月 25日 19:55 (9 天 ago)

    有没类似的插件?我想我这样的笨蛋比较适合用插件.

    回覆
  6. 张默 ~
    2010年 08月 16日 14:27

    我用的Wordpress 3.0自带的2010主题，他的评论form都找不到在哪里，貌似写到functions.php了，但是进去依然摸不着门道，郁闷。

    回覆
  7. Wyane ~
    2010年 08月 14日 19:04

    博主，你好，为什么我使用这个，在chrome浏览器下 完美运行，但是在IE下 发表了评论 ，可以显示正在提交，但是提交后不能显示提交后的内容，只会在输入框下面（就是显示正在提交的那个地方）出现一个 叉叉的图标和一个#，但是刷新下评论可以显示 ，请教下这是什么问题呢？我用IE试了下，您的博客可以的

    回覆
  8. 刚荣齐眉 ~
    2010年 08月 09日 11:01

    请问怎样拿掉 "回覆" 鏈接？我的鼠标放到评论上会出现一个回复的链接，请问怎么去掉？谢谢！

    回覆
  9. 俞昊然 ~
    2010年 08月 09日 01:44

    我发现我网站上了这个功能后，点击“回复”会自动刷新一次，这是个什么问题啊。3.0.1的系统

    回覆
  10. 轨迹猫 ~
    2010年 08月 08日 20:14

    尝试了
    WP2.8.4
    WP2.9.1
    WP2.9.2
    WP3.0
    IE8下都不正常，提示错误网页错误详细信息，FF倒是没有问题。
    ——————————————————
    用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET4.0C; .NET4.0E)
    时间戳: Sun, 8 Aug 2010 12:12:09 UTC
    消息: 系统错误: -1072896658。
    行: 45
    字符: 4
    代码: 0
    URI: http://sokgo.com/lab/wp284/wp-content/themes/default/comments-ajax.js
    ——————————————

    回覆
  11. 轨迹猫 ~
    2010年 08月 08日 18:19

    蛮试了一下，没成功，晚上回去再仔细看看

    回覆
  12. gmail ~
    2010年 08月 08日 12:30

    非常感谢，我用的是2.9.2，虽然没有启动内置嵌套回复，也可以用（不知道是不是其他插件的效果） :!: 。

    回覆
  13. 牧场的新手 ~
    2010年 08月 07日 16:28

    这个AJAX很不错，支持作者！

    回覆
  14. Mucid ~
    2010年 08月 04日 17:23

    测试缓冲时间！

    回覆
  15. Pavel ~
    2010年 08月 02日 17:10

    这个是用该插件做的吗？

    回覆

留下評論

:?: :razz: :sad: :!: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: :smile: :evil:
貼圖 表情 ( ps. 若要貼代碼, 請將 "<" 改成 "&lt;" 即可, 此方法在所有 WP 網站均適用. )

Trackbacks/Pingbacks

  1. 精简wordpress评论[再编辑]及相关功能 --- 2010年 08月 27日
  2. 升级到WordPress3.0.1，本博客修改小记 --- 2010年 08月 22日
  3. 关于DarkLight主题新版本的开发 | Alan's World --- 2010年 08月 20日
  4. WordPress速度提升之CSS和JS的合并压缩 _ BoKeam's Blog --- 2010年 08月 19日
  5. 为ajax-comments添加ctrl+enter提交功能 | 老柴.NET --- 2010年 08月 18日
  6. 新主题Z-Turn上线测试 _ BoKeam's Blog --- 2010年 08月 18日
  7. 3Pmm » Blog Archive » 精简wordpress评论[再编辑]及相关功能 --- 2010年 08月 12日
  8. 站点更新历史 - 无约而来 --- 2010年 08月 04日
  9. wp折騰小札 | 網上爬 --- 2010年 08月 03日
  10. 主题增加原生嵌套评论及Ajax回复效果 | pzg's blog --- 2010年 07月 29日
  11. 给 WordPress 启用 Ajax 评论（代码版） - FORECE's 博客日志 --- 2010年 07月 29日
  12. Blog Update @2010-07-23 | Aruo --- 2010年 07月 23日
  13. 狼图腾 » iNove修改小记 --- 2010年 07月 22日
  14. Zbench主题的代码使用调整手记 | 邪罗刹的菠萝阁 --- 2010年 07月 20日
  15. 折腾之插件更换/细节调整 | 静夜燃香 --- 2010年 07月 18日
  16. Rain|折腾之干掉插件 | 静夜燃香 --- 2010年 07月 15日
  17. [新佈景]奶酪佈景上架！ ＠ やみろぐ。 --- 2010年 07月 15日
  18. 最近折腾wordpress的一些小结 – Perfume's space --- 2010年 07月 02日
  19. [jQuery] 新评论双击快速修改 | 木木木木木 --- 2010年 06月 29日
  20. 新主题Green living上线测试. | 阿邙’S Blog --- 2010年 06月 15日
  21. WordPress內置嵌套评论专用Ajax comments --- 2010年 06月 10日
  22. WordPress 主題製作學習筆記：幫你的主題加上「自帶嵌套評論+Ajax comments」功能 --- 2010年 05月 27日
  23. Mr.差不多|博百优—It's My Life » WordPress内置嵌套评论专用Ajax comments --- 2010年 05月 25日
  24. My Name is Yangzi Zhang » 受不了了，到极限了，就这样吧 --- 2010年 05月 17日
  25. wordpress提交评论白屏 - 电脑网络 - ajax - WordPress - Winy Sky --- 2010年 05月 08日
  26. 韓德爾の原木 --- 2010年 05月 07日
  27. Tweets that mention WordPress 內置嵌套評論專用 Ajax comments - Willin Kan 的博客 -- Topsy.com --- 2010年 04月 28日
  28. WP 文章定时发布 & 继续优化当前主题 | A.shun's Blog --- 2010年 04月 27日
  29. 博客小结 « 一起疯! | 17mad's Blog --- 2010年 02月 15日
  30. Blog再次改动–启用Ajax评论 | 君看一叶舟，出没风波里 | Timothy's Space --- 2010年 02月 03日
  31. WordPress Theme : SL-Enhance 1.0E 正式发布 — 老孙的博客--Lao Sun's Blog --- 2010年 02月 01日
  32. Wordpress gravatar 头像缓存补充说明 » Life Studio --- 2010年 01月 19日
  33. Wordpress 原生嵌套 ajax 评论的实现 - Leeiio Chaos Made. --- 2010年 01月 10日
  34. 启动新主题TryToGo | IM.ASHI --- 2010年 01月 07日
  35. 新年快到了，博客也改一下面孔 --- 2009年 12月 26日
  36. Ajax提交评论 | 空白Koobai --- 2009年 12月 02日
  37. 最近我在折腾啥 | 阿修的1987 --- 2009年 10月 19日
  38. WordPress主题：Simple-Lines 正式发布 | 木木木木木 --- 2009年 10月 11日
  39. 给主题做了个大手术 » Life Studio --- 2009年 10月 09日
  40. WordPress Ajax comments ：原生的，强大的！ | 木木木木木 --- 2009年 10月 07日
  41. 添加“原生嵌套评论 Ajax 提交”功能 | 木木木木木 --- 2009年 10月 07日
  42. [部落] WP | 迴響功能 - 野兔村 --- 2009年 08月 23日

這篇文章上的評論 RSS feed TrackBack URL

▲