類別 | 學習心得

將WordPress評論Ajax化

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

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

  1. 找到…
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
  2. 用下面幾行取代:
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.2.3%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <?php if ( is_singular() ){ ?>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%3C%3Fphp%20bloginfo('template_directory')%3B%20%3F%3E%2Fcomments-ajax.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <?php } ?>

以上就完成嚕,如果你佈景的評論樣式夠標準,其它的都不用修改,由於我們部落格佈景的評論樣式不是很標準,所以直接使用安裝方法還是會出問題,而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評論回應郵件通知
這還是在《Willin Kan 的博客》挖到的寶,也就是當A回應B發表的評論,系統會發一封E-Mail通知B,這樣可以增加該篇文章的評論互動,當然,你的伺服器一定要有 mail() 功能哦!   這個不是插件,只要修改你使用中佈景的 functions.php 檔案,將代碼放置 <?php ..... ?> 區域內即可,《Wordpress評論回應郵件通知》的代碼有三種,請依需求點取下面的標題: 有勾選欄位,由訪客決定是否要回應郵件通知。 無勾選欄位,由管理者決定在什麼條件下發郵件。 所有回覆都發郵件。 先補充說明,如果你使用的佈景主題,評論式樣是使用 comments 和 trackbacks/pingbacks 分離(如原木使用的主題),請將下面所有的: 修改成:   有勾選欄位,由訪客決定是否要回應郵件通知 (會在模板自動加勾選欄,如果不想自動加,可把後面一小段刪除。) 無勾選欄位,由管理者決定在什麼條件下發郵件 所有回覆都發郵件 ~ That's all ~
繼續閱讀
如何在 WordPress 做一個歡迎頁
今天開始來到我們家有一個新的大門了,由於我們有兩個部落格系統,舊的部落格是用 F2cont 架的,新的則是現在使用的 Wordpress,為了讓大家選擇要去我們的哪一個家,所以好友小潘幫我們家設計了一個歡迎頁。   Wordpress 的首頁是抓自己的 index.php,所以大家輸入網址後一定是讀取 index.php,這樣歡迎頁的 index.html 就無法當作第一個頁面來讀取,而 Wordpress 又會一直循環調用 index.php,如果更改 .htaccess 將首頁設定使用 index.html,那麼落格的文章就叫不出來了,怎麼辦呢?很簡單 ... 以下 Step by step: 將下面的代碼增加到根目錄的 .htaccess: 修改 wp-includes/rewrite.php 檔案,找到下面的敘述: 修改成: 以上就完成囉,現在一進我們家就會先讀取 index.php 歡迎頁,而也告訴 Wordpress 首頁調用 home.php,而實際上也沒有 ...
繼續閱讀
將WordPress標籤雲彩色化
今天在「阿茂的隨手札記」看到一篇如何「輕鬆將WordPress標籤雲彩色化」的文章,這是不需要安裝Plugin就可以實現,方法非常簡單,只要將Code插入使用中的佈景即可達成,原木特將此方法收錄,供以後自行參考使用,也分享給Wordpress使用者。   WordPress預設的標籤雲只有一種表現方式,就是所發文章的標籤雲類別越多,該標籤的字體越大,但是這樣顯得非常單調,而以下的方法則是不需要經過Plugin就可以讓標籤雲彩色化哦!   將下面Code插入 wp-content/themes/目前使用佈景/functions.php 檔案中的 <?php 之後: 如此即完成讓標籤雲彩色化,而一般預設的標籤雲語法是 < ?php wp_tag_cloud(); ?>,而籤雲彩色化的顯示方式有幾個調用語法: (1)smallest︰最小(少)篇章標籤字體。 (2)largest︰最大(多)篇章標籤字體。 (3)unit︰字體單位,例如px、pt。 (4)number︰顯示標籤數量。 (5)orderby︰文章分類中的標籤。 (6)exclude︰排除哪個標籤。 (7)include︰包含哪個標籤。 提供一個實作的語法如下(以&作連接,而=後面沒有數字則表示使用預設值):
繼續閱讀
新增WordPress評論表情圖
這也還是在《Willin Kan 的博客》挖到的寶,一口氣在 Willin 大大挖到3個寶,還幫了原木修改代碼,真的很謝謝他。這是一個小而不用插件的Hack,就是在評論框出現所有的表情圖供訪客使用。   請先點 →這裡← 下載檔案,解壓縮後直接將 smiley.php 放在使用佈景的所在目錄,然後在 comments.php 的 textarea 的適當位置,加入以下的代碼: ~ That’s all ~
繼續閱讀
利用CSS讓有超連結圖案出現透明效果
今天在「WordPress 研究者日記」看到這篇「CSS透明特效:opacity」的文章,就是利用CSS的opacity語法,讓滑鼠移到有超連結的圖案上時,該圖案會出現透明的效果。   將以下代碼加入到 wp-content/themes/當前使用的佈景主題/style.css 檔案: 說明上面的數值,數值為「1」代表不透明,所以數值越小就越透明,而filter:alpha那段是給IE瀏覽器用的,數值為「100」代表不透明。 ~ That’s all ~
繼續閱讀
將滑鼠灰色半透明化
這個效果就不需要特別展示了,因為當你正在看本文時,會發現滑鼠變成可愛的圖案,很不錯的特效吧,想要嗎?那麻煩先註冊成為我們部落格的會員喔,這樣才能下載滑鼠的圖案。^^   註冊成為我們的會員後,請先下載下面的檔案: 解壓縮後,將這2個檔案放到部落格的 images/ 目錄下,接著修改 wp-content/themes/使用中的佈景主題/style.css: 在body{}中加入以下代碼: 在a{}中加入以下代碼: ~ That’s all ~
繼續閱讀
使用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 檔案下面的敘述: 將她改成: 其中「YOURAPIKEY」就是輸入你Facebook應用程式的API金鑰,記得後面要加「_user」,這樣在使用Facebook Connect登入時就不會被快取。 原木特將遇到的問題筆記下來,希望能對安裝Facebook Connect的人有所幫助。^^
繼續閱讀
好用的JCE Editor網頁編輯器
Joomla預設的編輯器是TinyMCE,雖然這個編輯器也是所見所得,但功能上比較陽春,很多網友極力推薦另一套「JCE Editor」所見所得編輯器,他的功能比較齊全,表格編輯非常方便,也支援拖拉放的方式上傳檔案,Pro版本雖然是要錢,但Free版本就已經很夠用了,經原木實際使用,真的是比TinyMCE好用太多了,以下介紹一些JCE Editor好用的功能: 壓縮Javascript及CSS加速載入動作,亦可啟動GZip壓縮:在後台的管理介面依序點選「元件」→「JCE管理」→「全域組態」,在「壓縮選項」依需求啟動項目。 可嵌入Youtube影片:在後台的管理介面依序點選「元件」→「JCE管理」→「設定檔」→「Default」(以下這個動作簡稱編輯設定檔),在「功能 & 版面配置」的「額外功能」,將「媒體支援」打勾。 可直接在文章編輯的 Code 區支援iframe語法:在編輯設定檔的「外掛參數」→「媒體支援」,將「允許 Iframes」勾選「是」。 更改檔案目錄路徑及上傳檔案大小:在編輯設定檔的「編輯器參數」→「檔案系統」依需求變更,如下圖框紅處。 支援Javascript、CSS及PHP語法,直接在Joomla後台寫入這些程式語法:在編輯設定檔的「編輯器參數」→「進階」依需求啟動項目。 在JCE編輯器增加中文字型:在編輯設定檔的「外掛參數」→「字型家族選取」依需求新增字型,下面的字型是原木新增的字型,而且是不用另外安裝字型或從網站上載入字型哦。 以下提供原木新增中文字型的設定值,直接複製、貼上即可,新增好後就可以在JCE Editor看到該字型選項了。 微軟正黑體:Microsoft JhengHei 微軟雅黑:Microsoft YaHei 明瞭體:Meiryo 標楷體:DFKai-SB 楷體:KaiTi 黑體:SimHei 仿宋:FangSong 新宋體:NSimSun 宋體:SimSun 新細明體:PMingLiU 細明體:MingLiU  
繼續閱讀
實現隱藏Header分頁的按鈕
新增一個Wordpress分頁總是會在Header上出現該分頁的按鈕,而如何新增一個分頁但又可以在Header上隱藏該分頁的按鈕?本篇文章教你如何辦到哦!   新增分頁並隱藏按鈕可以應用在「Google自訂搜尋」,昨天原木就將部落格的搜尋交給Google,大家可以利用部落格頂端的搜尋列,同時尋找我們新、舊部落格的文章、資料,搜尋結果會顯示在分頁上;另外,原木也將舊部落格上 Gallery 所有的相簿,利用 iframe 語法崁入到新部落格的 Gallery,這也是利用新增分頁並隱藏按鈕的具體做法。 很簡單,只要修改目前使用佈景的 header.php 檔案,尋找以下的代碼: 舉例,假如要隱藏某 3 個分頁,到後台的「網誌分頁」一一查閱分頁的 ID,將滑鼠移到要隱藏的分頁,底下的狀態列即可看到該分頁的 ID(如右上圖所示),假設該3個分頁的 ID 分別為:123、456及789,將上面的代碼修改為: ~ That's all ~
繼續閱讀
自動為上傳的圖片加上浮水印
這是原木找了好久終於找到這個方便又實用的Plugin,可以使用圖片或文字當作浮水印,廢言不多說了,來介紹如何安裝使用嚕!   請先下載檔案,解壓縮後放到 wp-content/plugins 並到後台啟用她,之後編輯 wp-admin/includes/media.php 這個檔案,在 // Save the data 前加入下面的 code: 爾後每次升級完 Wordpress,記得要再到該檔案加入上面的 Code 喔,不然圖片的浮水印功能會沒有作用喔,這也是原木寫這篇文章的用意之一,提醒自己更新 Wordpress 後要將 Code 加入該檔案。下面放上文字及圖片浮水印的效果: 文字浮水印    圖片浮水印    設定的方法很簡單,原木就不再特別介紹了,有問題的話可以留言給我喔。另外經原木測試1「文字浮水印」只能支援英文,中文會變成亂碼,而2使用「圖片浮水印」,請將 wp-content/plugins/watermark/ 下的 stempel.png 換成您想要加的 LOGO。 ~ That’s all ~
繼續閱讀
WordPress評論回應郵件通知
如何在 WordPress 做一個歡迎頁
將WordPress標籤雲彩色化
新增WordPress評論表情圖
利用CSS讓有超連結圖案出現透明效果
將滑鼠灰色半透明化
使用Facebook Connect將WP與FB完整結合(中)
好用的JCE Editor網頁編輯器
實現隱藏Header分頁的按鈕
自動為上傳的圖片加上浮水印


共有 12 則回應 在 “將WordPress評論Ajax化”

  1. 礼品圈 說:

    wordpress 升级的越来越好用了

  2. Jeriff 說:

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

  3. 原木 說:

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

  4. hot 說:

    测试, 打擾了

  5. 路人@_@" 說:

    Test 一下^_^

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

引用/通告


發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

BloggerAds

Subscription

輸入你的電子郵件地址訂閱網站的新文章,使用電子郵件接收新通知。

訂閱 1,914 其他用戶

Stickers

部落格達人009認證徽章Creative Commons License