05 2012-07

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

WP技巧你是第45042个围观者 14条评论供稿者：清音陋屋标签：Ajax, wordpress技巧, WP技巧

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

代码下载

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

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

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

(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>

虽然没有原版Tstyle的Ajax那么完美，但是感觉基本上也可以了，大家可以试下。

清霄凭栏语凝噎，音洒陋屋思翩跹。

—— 清音陋屋

你可能也喜欢Related Posts

众说纷纭Comments

评论加载中……

1 楼必须滴
做了非常成功！感谢博主分享
2012年08月26日 07:41:13 回复取消回复
- 1楼 - 楼中楼唱歌的笨金鱼
  看看ajax评论效果
  2012年09月17日 10:12:04 回复取消回复
2 楼 IT杂记
怎么我的主题不行呢
2012年12月08日 05:13:40 回复取消回复
- 2楼 - 楼中楼清音陋屋
  应该是可以的哦，要看你的模板是不是够标准，查看下第二点，模板文件夹的 comments.php
  2012年12月08日 07:18:01 回复取消回复
3 楼 arao
好东西 :razz:
2013年03月16日 05:54:55 回复取消回复
4 楼 arao
:?:
2013年03月18日 11:08:16 回复取消回复

推荐文章
最多评论
最热文章
最新评论

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

热门标签