【主题美化&增强系列】WordPress 内置嵌套专用 Ajax comments|WordPress主题交流区 - Wordpress论坛

只看楼主倒序阅读使用道具 0楼发表于: 2010-10-07

— 本帖被 ralix 设置为精华(2010-10-07) —

原作者是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 这个优秀插件中, 这原本是个大工程, 但还是被我简单地和谐了)

JS下载：
　下載

comments-ajax-1.29.zip (6 K) 下载次数:0 v1.29 适用于 WP 2.8 ~ 3.0
　下載

comments-ajax-1.3.zip (6 K) 下载次数:3 (v1.3 2010/5/20 更新) 用了新函数get_post_status_object(), 只能在WP 3.0 以上使用.
默认使用"再编辑" 功能, 如果不想使用, 请打开comments-ajax.js 看第10 行说明.

安装方式:
解压缩后, 将comments-ajax.js 及comments-ajax.php 放在模板所在目录.
　在 header.php 找到

复制代码

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

　用下面几行取代：

复制代码

<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(), 请对应覆盖, 且拿掉"回覆" 链接.

此文整理至willin的博客

[ 此帖被blueandhack在2010-10-07 02:26重新编辑 ]