wordpress中实现嵌套评论回复添加@功能

作者：袖梨 2022-06-25

构成原理

开 wp-includes/comment-template.php, 查找 Walker_Comment 类. 以下展开介绍这 4 个方法.

start_lvl
子菜单列表的开始标签, 默认是

    , 在第一个子条目之前生成.
    end_lvl
    对应 start_lvl 的子菜单列表的结束标签, 默认是
, 在最后一个子条目之后生成.
start_el
条目的前半部分, 包括开始符号和评论内容. 开始符号是
或者
  • (外层是 ol 或 ul 的情况下是
  • ); 评论内容就是评论的相关信息显示, WordPress 向我们提供了可即用的布局, 但也可以通过 callback 方法改变评论内容的结构. 调用回调函数的部分代码示意如下:

     代码如下 复制代码

    function start_el(&$output, $comment, $depth, $args) {
     $depth++;
     $GLOBALS['comment_depth'] = $depth;
     
     // 如果定义了回调函数, 则调用其回调函数, 并终止后面的处理.
     if ( !empty($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 方法中以

    作为开始, 而 end-callback 中以
    结束掉.
    举例说明：

    下面将以一个嵌套回复的例子来证明上述内容.

    现有评论嵌套结构如下:

     代码如下 复制代码
    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 为

      end_lvl 为

    start_el 为
  • 和内容部分
    end_el 为

    • 又设 “…” 为评论内容, 则代码生成如下:

     代码如下 复制代码


  •  ... (1)
     
     

        

    •    ... (1.1)
       
        

      •   

    •    ... (1.2)
       
         

            

      •      ... (1.2.1)
         
            

        •    

        

      •  



  •  ... (2)
     

    		•

    好了原理讲了下面我们来实现了。

    一、添加评论@回复js代码

    一下代码来源于网络，原作者链接暂无，如果你是原作，麻烦留言留下代码来源链接。
    天空团gsky提示：代码来源自——伟大的zww.me大神！
    js代码如下：可自行新建js文件调用，也可添加到已有的js文件，代码所在js文件必须在文章页面有调用，好啦，废话不多说，贴代码:

     代码如下 复制代码
    /* 
    @replyer js by vfhky 
    developed by ZWS
    嵌套评论@回复，添加@链接，
    */ 
        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”,’@’ + atname + ’’ + “：”).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;    
    }    
    }    
    }   

    可以看到其中的第3行已经被我注释掉了，主要原因就是该行代码会在评论内容（text）存在的链接自动加上go跳转，我们原来的评论链接为：
    @XXX  
    其相当于完整链接：
    @XXX 
    当被加上go跳转后则变成：
    @XXX 
    打开这个链接试试，是不是跳转到首页去了？
    这样的话，@链接就失去意义了，为了防止这样的“悲剧”，我们一定要清除冲突的代码，给你的@巩固地位。
    好啦，@评论已经完成了，用嵌套评论的孩子可以轻松撸起了！

    • 相关文章

    精彩推荐