構(gòu)成原理:打開 wp-includes/comment-template.php,查找 Walker_Comment 類,以下展開介紹這 4 個方法.

start_lvl

子菜單列表的開始標(biāo)簽,默認(rèn)是 <ul>,在第一個子條目之前生成.

end_lvl

對應(yīng) start_lvl 的子菜單列表的結(jié)束標(biāo)簽,默認(rèn)是 </ul>,在最后一個子條目之后生成.

start_el

條目的前半部分,包括開始符號和評論內(nèi)容,開始符號是 <div> 或者 <li> (外層是 ol 或 ul 的情況下是 <li>); 評論內(nèi)容就是評論的相關(guān)信息顯示,WordPress 向我們提供了可即用的布局,但也可以通過 callback 方法改變評論內(nèi)容的結(jié)構(gòu),調(diào)用回調(diào)函數(shù)的部分代碼示意如下:

1. function start_el(&$output, $comment, $depth, $args) { 
2.  $depth++; 
3.  $GLOBALS['comment_depth'] = $depth; 
4.  
5.  // 如果定義了回調(diào)函數(shù), 則調(diào)用其回調(diào)函數(shù), 并終止后面的處理. 
6.  if ( !emptyempty($args['callback']) ) { 
7.   call_user_func($args['callback'], $comment, $args, $depth); 
8.   return; 
9.  } 
10.  
11.  // 如果沒有定義回調(diào)函數(shù), 則執(zhí)行本方法中后面的處理, 生成默認(rèn)的評論布局. 
12.  ... 
13. } 

我們所謂的自定義嵌套回復(fù),就是創(chuàng)建一個 callback 方法,并在 wp_list_comments 方法中調(diào)用這個它生成自定義的評論結(jié)構(gòu).也可以認(rèn)為是定義一個新的方法,取代 start_el 方法內(nèi)部的默認(rèn)布局.

end_el

條目的后半部分,其實(shí)就一個結(jié)束符號.這里也提供一個名為 end-callback 的回調(diào)方法, 原理和 start_el 一樣, 是一個自定義的處理方式. 但是 end-callback 并不常用, 因?yàn)?end_el 只生成一個簡單的結(jié)束符號, 實(shí)在沒必要為此再定義一個方法.我覺得只有在需要復(fù)雜的評論結(jié)構(gòu)時, 才有必要用到 end-callback. 如: 要在評論的上方和下方都添加背景圖效果, 評論框內(nèi)可能需要多一個 DIV 層, 則可能用上 end-callback. 在 callback 方法中以 <div><div> 作為開始, 而 end-callback 中以 </div></div> 結(jié)束掉.

舉例說明,下面將以一個嵌套回復(fù)的例子來證明上述內(nèi)容.現(xiàn)有評論嵌套結(jié)構(gòu)如下:

1. comment (1) 
2.         comment (1.1)  
3.         comment (1.2) 
4.             comment (1.2.1)  
5.     comment (2) 

依照上述方法,執(zhí)行順序如下:

1. start_el (1) 
2. start_lvl (1) 
3. start_el (1.1) 
4. end_el (1.1) 
5. start_el (1.2) 
6. start_lvl (1.2) 
7. start_el (1.2.1) 
8. end_el (1.2.1) 
9. end_lvl (1.2) 
10. end_el (1.2) 
11. end_lvl (1) 
12. end_el (1) 
13. start_el (2) 
14. end_el (2) 

假設(shè)方法配置都是默認(rèn)的,則代碼如下:

1. start_lvl 為 <ul> 
2. end_lvl 為 </ul> 
3. start_el 為 <li> 和內(nèi)容部分 
4. end_el 為 </li> 

又設(shè) “…” 為評論內(nèi)容,則代碼生成如下:

1. <li> 
2.  ... (1) 
3.  
4.  <ul> 
5.   <li> 
6.    ... (1.1) 
7.  
8.   </li> 
9.   <li> 
10.    ... (1.2) 
11.  
12.    <ul> 
13.     <li> 
14.      ... (1.2.1) 
15.  
16.     </li> 
17.    </ul> 
18.   </li> 
19.  </ul> 
20. </li> 
21. <li> 
22.  ... (2) 
23.  
24. </li> 

好了原理講了下面我們來實(shí)現(xiàn)了.

一、添加評論@回復(fù)js代碼

js代碼如下,可自行新建js文件調(diào)用,也可添加到已有的js文件,代碼所在js文件必須在文章頁面有調(diào)用:

1. /*   
2. 嵌套評論@回復(fù)，添加@鏈接，  
3. */   
4.     jQuery(document).ready(function($){         //Begin jQuery     
5.         $(‘.reply’).click(function() {     
6.             var atid = ’“#’ + $(this).parent().attr(“id“) + ’”‘;            //獲取當(dāng)前評論的鏈接地址      
7.             var atname = $(this).prevAll().find(“.fayan”).text();           //獲取當(dāng)前評論的姓名    
8.             $(“#comment”).attr(“value”,’<a href=’ + atid + ’>@’ + atname + ’</a>’ + “：”).focus();   
9.             });    
10.         $(‘.cancel-comment-reply a’).click(function() {                     //點(diǎn)擊取消回復(fù)評論清空評論框的內(nèi)容     
11.             $(“#comment”).attr(“value”,”);   
12.             }   
13.             );   
14.     }) 

注意對照我所調(diào)用的相應(yīng)div 的ID,對應(yīng)你所要修改的主題,對照性修改！

二、修改CSS代碼

接下來,把子評論的右移去掉(這玩意兒太占手機(jī)屏幕了)

.commentlist li.comment ul.children {margin-left:20px;border-top: 0px;}  

把其中的margin-left:20px;刪去,或修改為margin-left:0;

三、清除function函數(shù)模板中的沖突函數(shù)

如果你的主題添加了評論跳轉(zhuǎn)代碼,則要修改其中的代碼,避免造成@鏈接跳轉(zhuǎn)錯誤,可對照如下代碼:

1. /*評論鏈接跳轉(zhuǎn)*/      
2. add_filter(‘get_comment_author_link’, ’add_redirect_comment_link’, 5);      
3. //add_filter(‘comment_text’, ’add_redirect_comment_link’, 99);      
4. function add_redirect_comment_link($text = ”){      
5.     $text=str_replace(‘href=“‘, ’href=”‘.get_option(‘home’).’/?go=’, $text);      
6.     $text=str_replace(“href=’”, “href=’”.get_option(‘home’).“/?go=”, $text);      
7.     return $text;      
8. }      
9. add_action(‘init’, ’redirect_comment_link’);      
10. function redirect_comment_link(){      
11.     $redirect = $_GET['go'];      
12.     if($redirect){      
13.         if(strpos($_SERVER['HTTP_REFERER'],get_option(‘home’)) !== false){      
14.             header(“Location: $redirect”);      
15.             exit;      
16.         }      
17.         else {       
18. header(“Location: /”);      
19. exit;      
20. }      
21. }      
22. } 

可以看到其中的第3行已經(jīng)被我注釋掉了,主要原因就是該行代碼會在評論內(nèi)容(text)存在的鏈接自動加上go跳轉(zhuǎn),我們原來的評論鏈接為:

1. <a href=“#comment-976″>@XXX</a>    
2. 其相當(dāng)于完整鏈接： 
3. <a href=“/error-sto.html#comment-976″>@XXX</a>   
4. 當(dāng)被加上go跳轉(zhuǎn)后則變成： 
5. <a href=“/?go=#comment-976″>@XXX</a>   

打開這個鏈接試試,是不是跳轉(zhuǎn)到首頁去了,這樣的話,@鏈接就失去意義了,為了防止這樣的“悲劇”,我們一定要清除沖突的代碼,給你的@鞏固地位.