用 jQuery 實現的 WordPress 標註作者的最後評論回覆

小把戲,並且這標題有點拗口,我很擔心你們看到標題就已經暈了,不過實現這個效果的方法倒是挺簡單的。

靈感來自牛逼的 Shawn,他博客上面的他自己的評論都是在左側加了空心的星星,但是他的最後回覆則是綠色的星星,這樣給訪客的感覺就是作者只回覆到了這裡,或者換種理解的意思就是「已閱到這個評論」,有點類似論壇裡面可能常看到的「已閱至此樓」的插件功能。當然你也可能會覺得這個功能無足輕重,但是我覺得還是挺有意思的,可以讓訪客知道作者有多久沒來過了,因為一般來說,看到自己的博客有人評論的話肯定會先回覆的吧。

本人的 jQuery 也都是些皮毛功夫,代碼寫得不好也見笑了,歡迎批評指正。

如果還不是很明白這個功能所表達的意思的話,你可以先看看下面這個截圖。

用 jQuery 實現的 WordPress 標註作者的最後評論回覆

就如截圖種的這樣,只是給某篇日誌該作者的最後評論回覆加一個標註,可以是一個圖片也可以是一些提醒文字,本文講的是用圖片來標註的。請接著往下看。

準備工作:

首先得確定你的主題中評論頁面裡面,作者的評論和訪客的評論是否具有不同的樣式,比如我的評論區域訪客的 class=”comments”,而作者的評論樣式是 class=”comments”,不然下文就不能判斷並篩選出作者的評論了。如果發現自己的主題並沒有這樣的設計,那麽你可以 google 下怎麽設計這個功能代碼,或者可以參考我提供給你的方法。

區分作者評論和訪客評論的樣式方法:
打開 comments.php 頁面,在任意処加入以下代碼(必須在評論輸出的代碼片段之前),比如我的每一個評論都是用 li 標簽來包裹的,那麽你可以選擇加在以下代碼之前

1
<li class="<?php echo $oddcomment; ?> comments ?>" id="comment-<?php comment_ID() ?>">

修改後的代碼

1
2
3
4
5
6
7
<?php
	$isByAuthor = false;
	if($comment->comment_author_email == 'xxxxxx@gmail.com' ) {
		$isByAuthor = true;
	}
?>
<li class="<?php echo $oddcomment; ?> comments<?php if($isByAuthor ) { echo "-author"; } ?>" id="comment-<?php comment_ID() ?>">

將上面的代碼中的email地址修改為你自己的 email,代碼的作用就是判斷你填寫的 email 來區別你的評論與訪客的評論。

完成了以上的準備工作之後下面就開始進入本文的重點了。請看以下這段代碼:

1
2
3
4
5
6
<script type="text/javascript">
$(document).ready(function(){
var lastbyauthor = $('ol.thecomments').find('.comments-author:last');
$(lastbyauthor).css({"background":"#FAFAFA url(images/lastbyauthor.png) right 10px no-repeat"}).attr('name','lastbyauthor').find('div.commentcount a').attr({title:"作者最後的評論回覆"});
})
</script>

將以上的代碼加入到你模板文件的 或者 之前即可,當然你也可以加入到自己的 js文件裏。

我大致講解下這段 jQuery 代碼,我這裡定義一個變量 lastbyauthor,$(‘ol.thecomments’) 就是你的評論顯示區域的外面所包裹的標記,大部分主題都是用 ol 標記的,然後在這段 ol 所包裹著的代碼中用 find() 函數查找出最後的一個 樣式為 class=”comments-author” 的那段評論。然後對這段評論的樣式進行特殊的 css。懂的人可能看出來了我這裡還定義了一個 name 屬性,名字為 lastbyauthor,這是為了給作者最後的評論添加錨標簽用的,不用 id 是因為每一個評論都已經擁有一個數據庫生成的評述數了。

比如你可以在評論模板的任何地方添加以下代碼:

追蹤作者<a href="#lastbyauthor" style="color:red">最後的軌跡</a>!

效果:點擊後面的紅色文字追蹤作者最後的軌跡!

當然,你還需要準備一張類似如下的醒目提醒圖片:last by author

是不是覺得很簡單。不知道對於新手的話我說得是不是夠詳細了,如果還有不明白的可以給我回復,我都將一一耐心講解回復,謝謝惠顧!

44 Responses to 用 jQuery 實現的 WordPress 標註作者的最後評論回覆

  1. Leeiio says:

    此條評論僅作配合正文測試之用~

  2. xiaorsz says:

    不錯的東東,現在我也想搞下,就是還沒有想好好的樣式!!
    你這裡是 ajax 評論!!作者連續回兩個呢?是不是就有兩年「最後的回復了」,不過這個遊客是看不到的噢!!

  3. Leeiio says:

    @xiaorsz 呃,居然沒想到這個問題,我回覆測試下哈。

  4. Leeiio says:

    @xiaorsz 測試結果就是用 ajax 發的評論並不會顯示最後的作者回覆的標記,因為我的標記樣式是寫在js文件裡面的,不知道如果樣式定義在css文件裡面是怎樣的…

  5. 多若網路 says:

    很棒的東東哦,不過我覺得jquery那個框架有點大了…

  6. Leeiio says:

    @多若網路 因為本站使用了很多的jQuery,反正又gzip呢呵呵~速度還是可以的。

  7. 吖Bee says:

    回去得研究一下啊~剛才不太明白,現在看到最後的回復..明了~

  8. yinheli says:

    有折騰開了.
    既然作者的class不一樣用 :last判斷一下不就行了

    @xiaorsz
    應該不會.內容出現在js載入完之後.就像你的評論剛剛回復而無法用滑鼠懸浮顯示一樣.

  9. ptubuntu says:

    等你完成的差不多了.我再安裝.現在看起來還不是很成熟.

  10. 薄荷 says:

    不錯!合理利用客戶端瀏覽器完成一些事情,對伺服器的開銷會減少很多。

  11. Yuri says:

    我覺得這個技巧很實用,可惜我的評論系統用的是一個叫intense debate的插件提供的,這些技巧貌似不適用…….
    我很喜歡博主的主題,各個方面都很養眼,一些小細節也很實用,盼望你以後可以多多分享

  12. JackPark says:

    好帖阿,我想知道的是,怎麼在文中加入代碼?我試了很多方法都沒有成功

  13. Leeiio says:

    @JackPark 你是指在文中加入代碼不被解析麼?我用的是插件WP-Syntax~

  14. 瑪格麗特 says:

    儘是些我看不懂的東西,難得我來關心你,竟無從下手。

  15. Leeiio says:

    @瑪格麗特 最近草你馬之歌挺多了,乍一看你的名字像是「瑪勒格壁」…咋起個女王的名字…好吧,我下篇就說說你看得懂的東西吧~

  16. RDEN says:

    不是WP用戶!不過Shawn是個不錯的Blogger。我博客的導航欄還是從他那裡學來的。支持WordPress!

  17. RDEN says:

    BTW,你是台灣人 or 香港人 ?

  18. Plidezus says:

    看不大懂呵呵~
    我就是過來點廣告支持的~
    博客終於回來了,
    不過備案號還么拿到

  19. Leeiio says:

    @Plidezus 謝謝哈,你的兩次點擊給我帶來了US$0.38的收入~你要不考慮下也搬到國外的主機撒~

  20. Plidezus says:

    國外的我們買了一個goddaddy但是覺得速度有點慢,你這個是國外的?
    現在只要是個人博客走到哪裡點到哪裡~最起碼幫博主弄個伺服器費用咯~

  21. jigen.he says:

    其實我不怎麼用jquery,是不是落後了啊,我都用prototype,以你更改差不多吧

  22. Leeiio says:

    @jigen.he jQuery對於我這樣的js新手來說,能比較快速地寫出要實現的代碼來而已呵呵~

  23. jigen.he says:

    其實是一個樣的,都是封裝的很好的,而且基於這2個js library開發的產品也很多

  24. Leeiio says:

    @jigen.he 恩,只是jQuery這個後起之秀現階段比較流行呵呵~

  25. dadad says:

    好方法 😥 😥 😥

  26. 巴奇 says:

    可以請問您~ 回覆中的 ~ “回覆這南瓜” “引用這南瓜” 這是怎麼製作出來的嗎? 拜託您了~ 謝謝

  27. Leeiio says:

    @巴奇
    你可以看看這篇文章 http://www.neoease.com/wordpress-at-reply/ 如果還有疑問,可以問我。

  28. 巴奇 says:

    @Leeiio
    我不懂他說的”生成鏈接代碼” 以及下面的那些程式碼要放在哪裡? @@” 我很笨 不太了解 可以麻煩您清楚的解釋一下要如何做嗎?

  29. Leeiio says:

    @巴奇
    那些是javascript代碼,需要單獨放置在一個.js的文件裡然後調用,如果你不是很懂代碼的話,還有一種替代方法,你可以去搜索「Mail To Commenter」和「Quote Comments」這兩個wordpress插件。

  30. 嗰個人 says:

    光看題目,還是不知道你要表達什麽啊。後來,拖到最後一條回覆。看到有個綠色「標記」就知道。 :mrgreen:

  31. sleepy says:

    我要留言看看能不能正確顯示我的系統和瀏覽器

  32. sleepy says:

    然後,很正確,windows other version應該指的是win7吧。
    再然後,我參考了你的關閉側邊欄的做法,我的博客上也用了。
    接下來再看看你的博客上有什麼我可以借鑒的,呵呵。

  33. Pingback: RSSA頻道 » Blog Archive » 桌面便簽小軟體ATnotes – 提醒你勿忘臨時小需求!

  34. Pingback: RSSA頻道 » Blog Archive » 美化 Wordpress 標題,個性字體生成圖片標題插件推薦!

  35. Coder22 says:

    French anti-Semitism at a German library. ,

  36. says:

    哈,你的站真不錯,看到不少我也想折騰的東東,有空了一個個來,到時還得轉載一下,呵。

  37. 非主流 says:

    來看看博主的文章了

  38. 不知不覺 says:

    你的網站在iphone上看的真爽。全部都是用WPTouch設計的么?

  39. Chance says:

    學而時習之 不亦說乎

  40. jixaingac says:

    學習了一下~~

Leave a Reply

Your email address will not be published. Required fields are marked *