05 2012-07

【WordPress技巧】wordpress Tstyle實現Ajax評論（非插件代碼版）

WP技巧你是第45953個圍觀者 14條評論供稿者：清音陋屋標簽：Ajax, wordpress技巧, WP技巧

由于自己內頁都是音樂試聽，原來Tstyle免費共享版里面沒有Ajax評論，所以每次評論就刷新頁面，導致音樂也要被刷新，要從新開始播放，感覺特別不友好。于是在網上搜到了代碼實現Ajax評論的方法，發出來共享給需要的朋友。代碼來自來自于 Willin 大師。

代碼下載

comments-ajax-1.29.zip (5.4 KB, 2,007 次) 失效反饋
本站下載音樂僅供試聽交流，未經原作者授權禁止用于任何商業用途！

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

comments-ajax-1.3.zip (5.3 KB, 2,054 次) 失效反饋
本站下載音樂僅供試聽交流，未經原作者授權禁止用于任何商業用途！

(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評論（非插件代碼版）

熱門標簽