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

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

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

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

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

首先度娘了一番,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> 

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

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

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

感谢大神们的原创代码!

NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/wordpress/add-atlink/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!