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

靈感來自牛逼的 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

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

作者：Leeiio
原文链接：用 jQuery 實現的 WordPress 標註作者的最後評論回覆