wordpress中實現嵌套評論回復添加@功能

2024-09-07 00:51:06

字體：大中小

來源：轉載

供稿：網友

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

start_lvl

子菜單列表的開始標簽,默認是 <ul>,在第一個子條目之前生成.

end_lvl

對應 start_lvl 的子菜單列表的結束標簽,默認是 </ul>,在最后一個子條目之后生成.

start_el

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

function start_el(&$output, $comment, $depth, $args) {

$depth++;

$GLOBALS['comment_depth'] = $depth;

// 如果定義了回調函數, 則調用其回調函數, 并終止后面的處理.

if ( !emptyempty($args['callback']) ) {

call_user_func($args['callback'], $comment, $args, $depth);

return;

}

// 如果沒有定義回調函數, 則執行本方法中后面的處理, 生成默認的評論布局.

...

}

我們所謂的自定義嵌套回復,就是創建一個 callback 方法,并在 wp_list_comments 方法中調用這個它生成自定義的評論結構.也可以認為是定義一個新的方法,取代 start_el 方法內部的默認布局.

end_el

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

舉例說明,下面將以一個嵌套回復的例子來證明上述內容.現有評論嵌套結構如下:

comment (1)

        comment (1.1)

        comment (1.2)

            comment (1.2.1)

    comment (2)

依照上述方法,執行順序如下:

start_el (1)

start_lvl (1)

start_el (1.1)

end_el (1.1)

start_el (1.2)

start_lvl (1.2)

start_el (1.2.1)

end_el (1.2.1)

end_lvl (1.2)

end_el (1.2)

end_lvl (1)

end_el (1)

start_el (2)

end_el (2)

假設方法配置都是默認的,則代碼如下:

start_lvl 為 <ul>

end_lvl 為 </ul>

start_el 為 <li> 和內容部分

end_el 為 </li>

又設 “…” 為評論內容,則代碼生成如下:

<li>

... (1)

<ul>

  <li>

   ... (1.1)

  </li>

  <li>

   ... (1.2)

   <ul>

    <li>

     ... (1.2.1)

    </li>

   </ul>

  </li>

</ul>

</li>

<li>

... (2)

</li>

好了原理講了下面我們來實現了.

一、添加評論@回復js代碼

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

/*

嵌套評論@回復，添加@鏈接，

*/

    jQuery(document).ready(function($){         //Begin jQuery

        $(‘.reply’).click(function() {

            var atid = ’“#’ + $(this).parent().attr(“id“) + ’”‘;            //獲取當前評論的鏈接地址

            var atname = $(this).prevAll().find(“.fayan”).text();           //獲取當前評論的姓名

            $(“#comment”).attr(“value”,’<a href=’ + atid + ’>@’ + atname + ’</a>’ + “：”).focus();

            });

        $(‘.cancel-comment-reply a’).click(function() {                     //點擊取消回復評論清空評論框的內容

            $(“#comment”).attr(“value”,”);

            }

            );

    })

注意對照我所調用的相應div 的ID,對應你所要修改的主題,對照性修改！

二、修改CSS代碼

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

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

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

三、清除function函數模板中的沖突函數

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

/*評論鏈接跳轉*/

add_filter(‘get_comment_author_link’, ’add_redirect_comment_link’, 5);

//add_filter(‘comment_text’, ’add_redirect_comment_link’, 99);

function add_redirect_comment_link($text = ”){

    $text=str_replace(‘href=“‘, ’href=”‘.get_option(‘home’).’/?go=’, $text);

    $text=str_replace(“href=’”, “href=’”.get_option(‘home’).“/?go=”, $text);

    return $text;

}

add_action(‘init’, ’redirect_comment_link’);

function redirect_comment_link(){

    $redirect = $_GET['go'];

    if($redirect){

        if(strpos($_SERVER['HTTP_REFERER'],get_option(‘home’)) !== false){

            header(“Location: $redirect”);

            exit;

        }

        else {

header(“Location: /”);

exit;

}

}

}