05 2012-07

【WordPress技巧】wordpress Tstyle实现Ajax评论（非插件代码版）

WP技巧你是第48164个围观者 14条评论供稿者：万金唯一官网标签：Ajax, wordpress技巧, WP技巧

由于自己内页都是音乐试听，原来Tstyle免费共享版里面没有Ajax评论，所以每次评论就刷新页面，导致音乐也要被刷新，要从新开始播放，感觉特别不友好。于是在网上搜到了代码实现Ajax评论的方法，发出来共享给需要的朋友。代码来自来自于 Willin 大师。

代码下载

comments-ajax-1.29.zip (5.4 KB, 2,266 次) 失效反馈
本站下载音乐仅供试听交流，未经原作者授权禁止用于任何商业用途！

v1.29 适用於 WordPress 2.8 ~ 3.0版本

comments-ajax-1.3.zip (5.3 KB, 2,200 次) 失效反馈
本站下载音乐仅供试听交流，未经原作者授权禁止用于任何商业用途！

(v1.3 2010/5/20 更新) 用了新函数 get_post_status_object(), 适用于 WordPress 3.0 以上版本。

安装方法

解压之后, 将 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?}??>??

如果你博客模板header.php里面已经加载过jquery.min.js这个JQ库文，上面的这句代码可删除，不用加入header.php

<script?type=“text/javascript”?src=“http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script> ??

因为 comments-ajax.js 已合併了 WP 的 comment-reply.js, 所以不必再叫用原來的 wp_enqueue_script( ‘comment-reply’ )如果你的模板够标准, 这样就可以正常工作了。

如果有任何运行不正常, 请继续看以下注意事項:

1. 安装前, 请先确认 WordPress 内置嵌套评论已正常运作. 如果不是内置嵌套评论, 会出问题的。
2. 各式模板设计不同, 请检查 comments.php 是否够标准, 尽量不修改模板, 只要对应修改本文件, 以免 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(), 请对应覆盖, 且拿掉 “回复” 链接.

下面是自己修改comments-ajax.php 最后评论样式代码以适应Tstyle模板，如果不是Tstyle模板的，可以无视了。

<div?class=“box”> ??
<li?<?php?comment_class();??>?id=“li-comment-<?php?comment_ID();??>”> ??
????<div?id=“div-comment-<?php?comment_ID();??>”?class=“comment-body”> ??
????????<div?class=“comment-author?vcard”> ??
????????????<img?src=“<?php?echo?bloginfo(‘template_directory’),’/img/gravatar.jpg’??>”?alt=“”?class=“avatar”?/> ??
????????????<?php?printf(?__(?‘<cite?class=“fn”>%s</cite>?<span?class=“says”>says:</span>’),?get_comment_author_link()?);??> ??
????????????<?php?if?(?$comment->comment_approved?==?‘0’?)?:??> ??
????????????<span?style=“color:#0ff;?font-style:inherit”>您的评论正在等待审核中…</span> ??
????????????<?php?endif;??> ??
????????????<br> ??
????????????<div?class=“comment-meta?commentmetadata”><?php?comment_date()??>?<?php?comment_time()??></div> ??
????????</div> ??
????????<?php?comment_text();??> ??
????</div> ??
</div>??