類別 | 學習心得

將WordPress評論Ajax化

這是在《Willin Kan 的博客》這一篇「WordPress 內置嵌套評論專用 Ajax comments」文章挖到的寶,之前我們部落格使用F2cont也有將評論Ajax化,主要是發表評論後不需要再刷新頁面,就可以看到剛剛發表的評論,這樣可以降低系統的Loading,這對部落客真的是國寶級的好物。

在我們部落格送出評論的Ajax畫面  有關安裝的步驟很簡單,請先點→這裡←下載程式,解壓縮後將這2個檔案放到你使用佈景的所在目錄,並修改使用佈景的 header.php

  1. 找到
    [code lang=”php”]<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>[/code]
  2. 用下面幾行取代:
    [code lang=”php”]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <?php if ( is_singular() ){ ?>
    <script type="text/javascript" src="<?php bloginfo(‘template_directory’); ?>/comments-ajax.js"></script>
    <?php } ?>[/code]

  以上就完成嚕,如果你佈景的評論樣式夠標準,其它的都不用修改,由於我們部落格佈景的評論樣式不是很標準,所以直接使用安裝方法還是會出問題,而willin大大針對使用 Woo Theme 的 Gazette 佈景主題提出了以下解決方式:

  1. single.php id=”comment” 換成 id=”commdiv”
  2. 再將 style.css#comment 改為 #commdiv
  3. 最後,要改 comments-ajax.js 第25行的 $comments = $(‘#comments’);$comments = $(‘#comments h3’);

  以上,使用 Woo Theme 的 Gazette 佈景主題在發表評論時可以正常使用 Ajax。最後,很感謝willin大大抽空幫我們解決,謝謝willin大大。

將發表的評論分享到Facebook對話框畫面  後記,由於我們有使用 Facebook Connect 這個插件,在發表評論時「將此回應分享到 Facebook」預設是被勾選的,但由於評論 Ajax 化後,送出評論並不會刷新頁面,所以當下也不會出現左圖的Facebook對話框,必須要手動刷新頁面或連到我們部落格其他的頁面,Facebook對話框才會出現,大家若突然看到Facebook對話框且內容是剛剛留言的內容,莫急、莫慌、莫害怕,若你要將剛剛發表的評論分享到Facebook,就點選「發佈」,不然就點「略過」囉。

  ~ That’s all ~ 

☆★相關文章★☆
如何在 WordPress 做一個歡迎頁
今天開始來到我們家有一個新的大門了,由於我們有兩個部落格系統,舊的部落格是用 F2cont 架的,新的則是現在使用的 Wordpress,為了讓大家選擇要去我們的哪一個家,所以好友小潘幫我們家設計了一個歡迎頁。  Wordpress 的首頁是抓自己的 index.php,所以大家輸入網址後一定是讀取 index.php,這樣歡迎頁的 index.html 就無法當作第一個頁面來讀取,而 Wordpress 又會一直循環調用 index.php,如果更改 .htaccess 將首頁設定使用 index.html,那麼落格的文章就叫不出來了,怎麼辦呢?很簡單 ... 以下 Step by step: 將下面的代碼增加到根目錄的 .htaccess:[code lang="php"]<IfModule dir_module>DirectoryIndex index.html index.php</IfModule>[/code] 修改 wp-includes/rewrite.php 檔案,找到下面的敘述:[code lang="php"]var $index = ...
繼續閱讀
使用Facebook Connect將WP與FB完整結合(中)
其實安裝Facebook Connect真的非常簡單,但是原木在安裝過程中卻遇到了問題,就是在登入過程中始終對應不到我Facebook的應用程式,昨天花了一整天的時間研究,終於讓原木找到了問題,解決之後心情快~樂~的~不~得~了~  ^^  原木的問題有二,第1個問題是Facebook韓德爾の原木粉絲專頁,第2個則是Wordpress的 1 Blog Cacher 插件。  關於第1個問題,在我們部落格側邊欄位的「Communities」是利用Highslide JS效果呈現的,其中第7個是顯示我們部落格在Facebook的粉絲,因為有使用 <script type="text/javascript">FB.init("e320a5c35f3157b68b1e5e3f0f6563a9");</script> 語法,而在Facebook Connect中也有設定API金鑰,結果造成同一個頁面出現兩個API金鑰,導致在登入FB時一直指向粉絲的專頁,這個超讓原木抓狂的,想說明明API金鑰跟秘密都設定對了,為何都無法指向我在FB的應用程式,後來原木就利用Java Script另開新視窗,就解決囉!  第2個問題很簡單,換掉 1 Blog Cacher,改用 WP Super Cache,在裝好該插件後,找到部落格根目錄 .htaccess 檔案下面的敘述:[code]RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$[/code]  將她改成:[code]RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_|YOURAPIKEY_user).*$[/code]  其中「YOURAPIKEY」就是輸入你Facebook應用程式的API金鑰,記得後面要加「_user」,這樣在使用Facebook Connect登入時就不會被快取。  原木特將遇到的問題筆記下來,希望能對安裝Facebook Connect的人有所幫助。^^
繼續閱讀
修正推文到FB中文亂碼問題(Facebook Open Graph WordPress Plugin 3.0.7)
有在使用 Sociable! 的 Facebook Open Graph WordPress Plugin 3.0.7 版本的網友應該都有一個痛,就是將文章推到 Facebook 時,中文會變成亂碼,這個問題已經被 Derek 大大解決囉!  解決這個方法有二,直接下載 Derek大大提供的檔案,覆蓋掉 wp-content/plugins/ fbconnect/ fbConnectInterface.php 就可以了,或者自行修改 fbConnectInterface.php 檔案,方法如下: 找到 103 及 104 行:[code lang="php"]echo '<meta name="og:site_name" content="'.htmlentities(get_bloginfo('name')).'"/>';echo '<meta ...
繼續閱讀
不看可惜的 … 八卦(限會員)
這篇文章是在「免費的喘息」討論區看到的,有人詢問 Wordpress 要如何做到文章僅註冊會員登入後才可以閱讀,雖然我們部落格文章的性質不會常用到,不過還是收錄供大家參考,至於完整的演示 ... 你已經體驗過了。 ^^  這個方法是在「WordPress 中如何设置只有注册用户才能浏览特定的内容」文章發表的,只要將下面的代碼存成 .php,在上傳到 wp-content/plugins 啟動這個插件即可:[code lang="php"]<?php/*Plugin Name: User onlyPlugin URI: http://fairyfish.net/2010/05/13/post-for-user-only/Description:通過給 user_only 這個自定義字段設置為 true 來設置當前文章僅限於會員瀏覽。Author: DenisVersion: 1.0Author URI: http://wpjam.com*/add_filter('the_content', 'post_user_only');function post_user_only($text){    global $post;       $user_only = ...
繼續閱讀
WordPress評論回應郵件通知
這還是在《Willin Kan 的博客》挖到的寶,也就是當A回應B發表的評論,系統會發一封E-Mail通知B,這樣可以增加該篇文章的評論互動,當然,你的伺服器一定要有 mail() 功能哦!  這個不是插件,只要修改你使用中佈景的 functions.php 檔案,將代碼放置 <?php ..... ?> 區域內即可,《Wordpress評論回應郵件通知》的代碼有三種,請依需求點取下面的標題: 有勾選欄位,由訪客決定是否要回應郵件通知。 無勾選欄位,由管理者決定在什麼條件下發郵件。 所有回覆都發郵件。  先補充說明,如果你使用的佈景主題,評論式樣是使用 comments 和 trackbacks/pingbacks 分離(如原木使用的主題),請將下面所有的:  [code lang="php"]get_comment_link($parent_id)[/code]  修改成:  [code lang="php"]get_comment_link($parent_id, array('type' => 'comment'))[/code]  有勾選欄位,由訪客決定是否要回應郵件通知(會在模板自動加勾選欄,如果不想自動加,可把後面一小段刪除。)[code lang="php"]/* comment_mail_notify v1.0 by willin kan. (有勾選欄, 由訪客決定) */function comment_mail_notify($comment_id) ...
繼續閱讀
將WordPress標籤雲彩色化
今天在「阿茂的隨手札記」看到一篇如何「輕鬆將WordPress標籤雲彩色化」的文章,這是不需要安裝Plugin就可以實現,方法非常簡單,只要將Code插入使用中的佈景即可達成,原木特將此方法收錄,供以後自行參考使用,也分享給Wordpress使用者。  WordPress預設的標籤雲只有一種表現方式,就是所發文章的標籤雲類別越多,該標籤的字體越大,但是這樣顯得非常單調,而以下的方法則是不需要經過Plugin就可以讓標籤雲彩色化哦! 將下面Code插入 wp-content/themes/目前使用佈景/functions.php 檔案中的 <?php 之後:[code lang="php"]//Start of colorful tag cloudfunction colorCloud($text) {$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);return $text;}function colorCloudCallback($matches) {$text = $matches[1];$color = dechex(rand(0,16777215));$pattern = '/style=('|")(.*)('|")/i';$text = preg_replace($pattern, "style="color:#{$color};$2;"", $text);return ...
繼續閱讀
新增WordPress評論表情圖
這也還是在《Willin Kan 的博客》挖到的寶,一口氣在 Willin 大大挖到3個寶,還幫了原木修改代碼,真的很謝謝他。這是一個小而不用插件的Hack,就是在評論框出現所有的表情圖供訪客使用。  請先點 →這裡← 下載檔案,解壓縮後直接將 smiley.php 放在使用佈景的所在目錄,然後在 comments.php 的 textarea 的適當位置,加入以下的代碼:  [code lang="php"]<?php include(TEMPLATEPATH . '/smiley.php'); ?>[/code]  ~ That’s all ~
繼續閱讀
避免WordPress自動加上nofollow標示
如果你也是部落客,通常在留下評論時,也都會順手將你部落格的網址留下,但偏偏Wordpress都會將你留下的網址,加上nofollow這段敘述,讓搜尋引擎完全不會理會,到底nofollow是什麼東東啊?  nofollow屬性最初是用在網頁層級的中繼標記裡,告訴搜尋引擎不要遵從(即檢索)網頁上的任何對外連結。為了鼓勵大家多多留言,原木怎麼可以讓最毒婦人心的「不要發肉蜜」,讓大家留下的網址白留呢?!況且,大家都喜歡「發肉蜜」啊,呵呵喝 ...  將nofollow敘述拿掉,除了可以利用 「NoFollow Free」外掛,也可以自行修改 wp-includes/comment-template.php 檔案,找到在第 140 行「function get_comment_author_link()」這一段,在第 148 行有個「$return = "<a rel="external nofollow" href="$url">$author</a>";」敘述,將nofollow拿掉就可以嚕,真的是快、狠、準 ~ That's all ~  我們已經拿掉nofollow了,相信對大家網站的 SEO 會有不少幫助,也希望大家多多留言啦! ^^後記  每次 Wordpress 更新都要手動改一次,還真的有點麻煩,所以建議使用外掛,有興趣的朋友可以到 http://wordpress.org/extend/plugins/nofollow-free/ 下載此外掛,若要中文化,可下載 http://images.steachs.com/Files/lang.zip 繁中語系。
繼續閱讀
自動為上傳的圖片加上浮水印
這是原木找了好久終於找到這個方便又實用的Plugin,可以使用圖片或文字當作浮水印,廢言不多說了,來介紹如何安裝使用嚕!  請先下載檔案,解壓縮後放到 wp-content/plugins 並到後台啟用她,之後編輯 wp-admin/includes/media.php 這個檔案,在 // Save the data 前加入下面的 code:[code lang="php"]// For WP WaterMarkMM_Execute_WM( $file, '' );[/code][download id="4"]  爾後每次升級完 Wordpress,記得要再到該檔案加入上面的 Code 喔,不然圖片的浮水印功能會沒有作用喔,這也是原木寫這篇文章的用意之一,提醒自己更新 Wordpress 後要將 Code 加入該檔案。下面放上文字及圖片浮水印的效果:  文字浮水印    圖片浮水印    設定的方法很簡單,原木就不再特別介紹了,有問題的話可以留言給我喔。另外經原木測試1「文字浮水印」只能支援英文,中文會變成亂碼,而2使用「圖片浮水印」,請將 wp-content/plugins/watermark/ 下的 stempel.png 換成您想要加的 ...
繼續閱讀
使用Facebook Connect將WP與FB完整結合(下)
今天多寫了這篇文章,主要是因為換了Wordpress的Cache,在看到「高登工作室」的「裝個Hyper Cache快取外掛吧!」這篇文章,原木就移除WP Super Cache,試試高登強力推薦的Hyper Cache,結果瀏覽的速度從台鐵變成高鐵,推薦推薦!!  Hyper Cache安裝設定比WP Super Cache簡單許多,這篇文章原木就不再介紹了。在前一篇「使用Facebook Connect將WP與FB完整結合(中)」的文章有介紹在使用WP Super Cache時,必須在 .htaccess 加入「YOURAPIKEY_user」的設定,才能讓Facebook Connect正常使用與登入,但是還是會有些問題,1其一在首頁登入後,必須要自行再Reload頁面一次,不然還是會看到沒有登入的畫面(雖然實際上已經登入);2其二就是在寫評論的時候,雖然是有勾選「將此回應分享到 Facebook」,但是送出後FB的塗鴉牆視窗就是不會出現,這非常確定是WP Super Cache造成的。  現在使用Hyper Cache除了速度變更快之外,Facebook Connect使用與登入上也完全沒有問題,真的是太開心了,不過還是有兩個地方要設定一下,1第一就是「Home caching」要勾選,也就是首頁不要Cache,這樣才不會出現上一段WP Super Cache的第一個問題,當然,也會造成首頁開啟的速度比較慢喔;2第二就是在「Cookies matching」加入「YOURAPIKEY_user」,這樣就能讓你Wordpress的Facebook Connect與Cache相處愉快!^^  ~ That’s all ~
繼續閱讀
如何在 WordPress 做一個歡迎頁
使用Facebook Connect將WP與FB完整結合(中)
修正推文到FB中文亂碼問題(Facebook Open Graph WordPress Plugin 3.0.7)
不看可惜的 … 八卦(限會員)
WordPress評論回應郵件通知
將WordPress標籤雲彩色化
新增WordPress評論表情圖
避免WordPress自動加上nofollow標示
自動為上傳的圖片加上浮水印
使用Facebook Connect將WP與FB完整結合(下)


  • wordpress 升级的越来越好用了

    • 真的,Wordpress自動升級超好用,但我還是習慣自己手動升級 ^^

  • 据说有一个插件可以使得wordpress整站Ajax化,包括后台。忘了名字 ❓

    • WordPress整站全部Ajax?這樣會不會拖慢整個速度啊?執行太多的Ajax也是會影響效率的

  • 目前 comments-ajax 有分版本了
    WP 2.8~3.0 係 1.29 版本
    WP 3.0 以上則是 1.3 版本
    請依所使用之 WP 版本下載
    請參閱 http://kan.willin.org/?p=1271 文章

  • hot

    测试, 打擾了

  • 路人@_@”

    Test 一下^_^

    你的POST真好,很多都不用Plugin~~~
    我起初玩wordpress曷狂熱地把plugin都放進去…
    全部javascript library都用上=.=+
    結果wordpress死了不下4-5次-_-“

    • wordpress 的 plugin 很容易拖累 wordpress,尤其是寫的不好的 plugin,所以能儘量少用 plugin 就不要用,最好是直接寫在 php 裡面

  • IE測試AJAX評論

    • 測試應該沒問題,這個一定要用,可以減少Loading。 ^^

  • 测试一下!

    • 測試應該會成功,評論 Ajax化是一定要的啦 ^^