在WordPress的評(píng)論中兩種主流樣式：嵌套回復(fù)和@回復(fù)的選擇取舍上是不是經(jīng)常讓你難以決定？嵌套回復(fù)讓評(píng)論的上下文清晰明瞭但樣式混亂，@回復(fù)讓評(píng)論樣式整潔但對(duì)討論前后模糊。我想這些應(yīng)該是大家當(dāng)然也包括我都會(huì)感覺到的，而Jinwen希望的是盡量能把它們的優(yōu)點(diǎn)都整合，也就有了本文將要介紹的方法。
1. 本文討論的前提
對(duì)于未被回復(fù)的評(píng)論，也就是初始評(píng)論，我稱為主評(píng)論；而每個(gè)回復(fù)主評(píng)論的評(píng)論，也就是應(yīng)用了嵌套樣式的評(píng)論，我稱為從屬評(píng)論。
另外是我使用的嵌套回復(fù)僅限一層。如果在第二層的嵌套中再應(yīng)用@回復(fù)樣式，那就失去本文的討論初衷，因?yàn)槟菢拥脑u(píng)論樣式只會(huì)更亂。
最后也就是如文章題目一樣，需要利用到JQuery的幫助，也就是說你的主題中必需首先加載了JQuery。
2. 設(shè)計(jì)的思路
如果要實(shí)現(xiàn)上圖的樣式，歸根就是對(duì)評(píng)論中回復(fù)按鈕的功能設(shè)計(jì)。簡(jiǎn)單來說就是：當(dāng)點(diǎn)擊主評(píng)論的回復(fù)按鈕，會(huì)產(chǎn)生嵌套回復(fù)，回復(fù)的內(nèi)容緊跟在主評(píng)論后；當(dāng)點(diǎn)擊從屬評(píng)論的回復(fù)按鈕，則在回復(fù)的內(nèi)容中添加@XXX的字樣，回復(fù)的內(nèi)容也是緊跟在主評(píng)論之后。
3. 實(shí)驗(yàn)的方法
（1）主評(píng)論的回復(fù)按鈕
Jinwen在這里不說了。因?yàn)樗荳ordPress中嵌套回復(fù)中默認(rèn)就存在了。（如果你想知道嵌套回復(fù)的實(shí)現(xiàn)請(qǐng)看文末的參考）
（2）從屬評(píng)論回復(fù)按鈕
它的實(shí)現(xiàn)，也就是本文介紹的重點(diǎn)。按上面設(shè)計(jì)的思路，通過它產(chǎn)生的回復(fù)評(píng)論是需要緊跟在主評(píng)論之后的，這不就是和主評(píng)論的回復(fù)按鈕一樣嗎？那么我們就把主評(píng)論的回復(fù)按鈕分別復(fù)制到每一個(gè)屬于它的從屬評(píng)論中就行了，在主題的js中（ready function內(nèi)）添加：
//這里假設(shè)你的評(píng)論樣式是.commentlist
$('.commentlist li').each(function() {
//設(shè)置一個(gè)變量zzz，用來定義從屬評(píng)論的按鈕將要被復(fù)制到何位置，本例它將被得到到ul.children li內(nèi)
var zzz = $(this).find('ul.children li .message_head');
//查找主評(píng)論按鈕的設(shè)置樣式，這個(gè)會(huì)因主題不同而不同（本例是.re_icon）；
//然后把它復(fù)制，去除原有樣式re_icon，重新對(duì)其定義一個(gè)樣式atclass（如果你的主-從屬兩回復(fù)按鈕樣式將不一樣，建議這樣做）
//最后把復(fù)制的內(nèi)容分別插入到變量“zzz”中
$(this).find(".re_icon:first").clone().removeClass("re_icon").addClass("atclass").appendTo(zzz);
});
這樣我們就會(huì)在每一個(gè)從屬評(píng)論后得到一個(gè)復(fù)制而來的按鈕。當(dāng)然這個(gè)通過復(fù)制得來的按鈕其實(shí)與主評(píng)論的回復(fù)按鈕是一樣的！只是它比主評(píng)論的回復(fù)還多了一個(gè)功能：就是往評(píng)論框內(nèi)發(fā)送@XXX的字樣。我們接下來把它實(shí)現(xiàn)，在主題的js中（ready function內(nèi)）添加：
//定義從屬評(píng)論回復(fù)按鈕被點(diǎn)擊后的動(dòng)作
$('.atclass').click(function() {
//定義一個(gè)變量atname
//查找在每條從屬評(píng)論中留言者名稱的樣式（本例是cite），然后記錄它的文字內(nèi)容，也就是留言都的名字了
//你可以預(yù)先為評(píng)論的留言名稱用一個(gè)包起，而這個(gè)“hisname”也就與本例的cite了。
var atname = $(this).parents(".message_head").find("cite").text();
//然后向留言框中輸入@XXX的字樣。需要指定留言框的ID，這里是#comment
//最后通過.focus()順便激活留言框的輸入狀態(tài)
$("#comment").append("@" + atname + " ").focus();
});
其實(shí)也就是通過上面兩段代碼就可以了，并不復(fù)雜。實(shí)現(xiàn)的難點(diǎn)是你必需知道自己主題模板中評(píng)論部分的結(jié)構(gòu)關(guān)系。如上面代碼中的紅字部分就是一個(gè)難點(diǎn)，因?yàn)樗謩e受插入按鈕的位置和這個(gè)位置與留言者名稱之間的位置關(guān)系決定。在這里就不能將其總結(jié)，必需由大家自己多折騰一下了。
由于往留言框輸入的@XXX可能在“取消回復(fù)”后依然存在，所以建議再加上一段代碼，作一點(diǎn)點(diǎn)清潔，保證點(diǎn)擊“取消回復(fù)”后清除留言框內(nèi)的文字內(nèi)容：
$('#cancel-comment-reply-link').click(function() {
$("#comment").empty();
});
要實(shí)現(xiàn)本文開始時(shí)候介紹的樣式，方法當(dāng)然并不局限上我上面所介紹的。無論如何，還是希望上面的思路能讓大家對(duì)嵌套回復(fù)的設(shè)計(jì)有點(diǎn)啟發(fā)，那就很榮幸了。
4. 留言的郵件回復(fù)通知
這可能又是大家關(guān)心的問題了，這里推薦通過國(guó)人兩個(gè)精彩插件就可以實(shí)現(xiàn)了。
對(duì)于嵌套回復(fù)的郵件通知，建議通過Comment Reply Notification這個(gè)插件實(shí)現(xiàn)。在后臺(tái)激活使用就可以了。
而@reply回復(fù)的郵件通知，則建議通過Mail To Commenter這個(gè)插件實(shí)現(xiàn)。由于這個(gè)插件是能自動(dòng)檢測(cè)評(píng)論中帶@的字段而自動(dòng)發(fā)送通知郵件的，所以我們同樣只要在后臺(tái)激活這個(gè)插件就可以了。
5. 結(jié)語
嵌套回復(fù)是會(huì)讓訪客了解到已有留言中的相關(guān)，從而更容易加入其討論；這樣，也就大大增加了博客中的討論熱度。另外一個(gè)很重要的是，想讓每一個(gè)被回復(fù)的主評(píng)論都能成為一個(gè)小的討論區(qū)。就是說，對(duì)一些有價(jià)值的評(píng)論，大家可以通過嵌套繼續(xù)延伸對(duì)其的討論；而加入@reply的回復(fù)樣式會(huì)讓那些有價(jià)值的評(píng)論（主評(píng)論）下的討論（從屬評(píng)論）更加有序和可追索。就目前來說本站所用的評(píng)論樣式，基本想能達(dá)到所設(shè)想的。不知大家意見如何？
6. 參考
下面的一些文章鏈接，或者能讓你更為了解嵌套和@reply各自精彩的討論和用法，謝謝下面文章的各位作者。
