wordpress中实现嵌套评论回复添加@功能
构成原理: 打开 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 ( ! empty 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 方法中以 <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 ; } } }可以看到其中的第3行已经被我注释掉了,主要原因就是该行代码会在评论内容(text)存在的链接自动加上go跳转,我们原来的评论链接为:
<a href=[#comment-976″>@XXX</a> 其相当于完整链接： <a href=[/error-sto.html#comment-976″>@XXX</a> 当被加上go跳转后则变成： <a href=[/?go=#comment-976″>@XXX</a>打开这个链接试试,是不是跳转到首页去了,这样的话,@链接就失去意义了,为了防止这样的[悲剧],我们一定要清除冲突的代码,给你的@巩固地位.
查看更多关于wordpress中实现嵌套评论回复添加@功能 - WordPress的详细内容...