在嵌套评论回复添加@功能

2013-11-27 Views

斌果在我的一篇评论比较多，而且嵌套特别多的文章下，指出了，这个页面在手机上简直不堪入目、惨不忍睹啊！

于是，碎碎念赶紧打开手机一看，诶，还不错啊，界面清爽，行距够大，视野很清新。再拉下去看看吧，卧槽！这评论！都特么靠边了！无法直视啊！为了避免评论多的文章瞎了大家伙的眼，俺立马就把样式表子评论右移的样式秒杀了，结果，界面是清爽了，可哪条回复的哪条，天知道啊？！

想要修改嵌套评论为并行评论已经是来不及了，因为嵌套评论的结构就放在那里，一下子修改为并行评论，不仅会导致评论结构混乱，而且内容上也失去了联系，那么我们只好在嵌套的评论上加上@功能了。。。对于以前的链接，以后再弄段比较稳定的代码自动补上@链接好了。

好吧，只好完成由来已久的心愿了，给嵌套评论添加@回复功能！

首先度娘了一番，NEOEASE的站有写过一篇添加@的文章教程，结果咱技术技术太菜，只好，放弃了。后面发现了这段代码，直接通过JQuery实现，我修改了下，使其支持@链接，这样通过点击@链接，就可以从子评论跳到主评论了。

一、添加评论@回复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",'<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: http://zhuweisheng.com.cn/");     
exit;     
}     
}     
}

可以看到其中的第3行已经被我注释掉了，主要原因就是该行代码会在评论内容（text）存在的链接自动加上go跳转，我们原来的评论链接为：

<a href="#comment-976">@XXX</a>

其相当于完整链接：

<a href="http://zhuweisheng.com.cn/error-sto.html#comment-976">@XXX</a>

当被加上go跳转后则变成：

<a href="http://zhuweisheng.com.cn/?go=#comment-976">@XXX</a>

打开这个链接试试，是不是跳转到首页去了？

这样的话，@链接就失去意义了，为了防止这样的“悲剧”，我们一定要清除冲突的代码，给你的@巩固地位。

好啦，@评论已经完成了，用嵌套评论的孩子可以轻松撸起了！

感谢大神们的原创代码！