wordpress回复内容前面添加@作者样式
前一篇文章写了关于完美实现wordpress评论回复无限嵌套的方法，那么当某一条评论的回复数目比较多的时候怎么办？估计初来咋到的童鞋们会看的眼花缭乱，所以我们需要在每条回复内容前面添加一个醒目的字眼来提醒这条回复是针对的哪条评论。
当然，目前最时尚的方式就是像微博那样使用一个@某某，确实也很方便实用。那么这篇文章也要实现这种效果，即在wordpress回复内容前面添加@。方法如下（终于领略了jQuery的强大）
1、由于要使用到jQuery，所以要确保主题评论的web结构比较标准，与WordPress官方主题默认的评论结构相差不大（一般的主题都符合，只要不是那些特别风骚的主题都ok）。
2、根据评论结构(主要是用jQuery获取链接和姓名)，写出如下jQuery代码并命名为reply.js 文件，保存到主题所在的js目录下（大家可以参考我的主题评论的web结构，修改atid和atname）。
/* @replyer js by vfhky */
jQuery(document).ready(function($){ //Begin jQuery
$('.reply').click(function() {
var atid = '"#' + $(this).parent().attr("id") + '"';//获取当前评论的链接地址
var atname = $(this).prevAll().find("strong:first").text();//获取当前评论的姓名
$("#comment").attr("value","[@" + atname + "]( + atid + ) ").focus();
});
$('.cancel-comment-reply a').click(function() { //点击取消回复评论清空评论框的内容
$("#comment").attr("value",'');
});
})
3、添加jQuery所需的另个一文件jquery.min.js，同样保存到主题所在的js目录下。由于代码比较长，所以我放到了谷歌代码里面（点击下载）。
4、加载jQuery库：在header.php里面找到<?php wp_head(); ?>，然后在它前面添加如下代码
<!--Google CDN提供的jQuery库的地址采用了协议相对路径，它可以很好的解决https引起的一些问题-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--SAE开发者中心提供的jQuery库的地址，我们也可以采用了协议相对路径-->
<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<!--微软提供的jQuery库的地址，我们也可以采用了协议相对路径-->
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!--当两者提供的jquery都无法载入时，我们需要载入本地备份的jquery.min.js文件-->
<script type="text/javascript">window.jQuery || document.write('</script><script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js">\x3C/script>')</script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/reply.js"></script>
注意：上面提供了3种不同的jquery库的地址，都起到了节省流量、减少服务器负载、提高访问速度的作用。但是，在写代码的时候我们只需要采用其中一种就行了。（PS：由于一些因素，Google服务在中国还是不怎么稳定，所以比较推荐新浪SAE提供的jQuery库）
5、搞定，有问题的话可以留言额，大家一起来解决
打赏支持
Comments »