如何给wordpress的回复添加引用功能
在上一篇文章已经写了关于评论/回复添加@的方法，今天继续用jQuery添加一个在评论/回复添加引用的功能。其实，只要博客有了评论/回复的@功能，基本上用不着使用引用功能了。
从那篇关于@功能的文章就知道，只要我们点击那个@某某的链接，我们就可以找到原来的评论。而引用要起的作用也差不多，类似于@，只不过相对于@有更为直观。要使用引用功能，所用原理也是类似@的（温馨提示：大家还是看一下，不然这篇文章可能有些云里雾里了^^）。即要用到jQuery，并且涉及到自己主题评论页面的web结构。不罗嗦了，最终效果如下：
1、确保主题评论的web结构比较标准，和wp官方主题默认的评论结构相差不大（一般的主题都符合，只要不是那些特别风骚的主题都ok）。
2、根据评论结构(主要是用jQuery获取原作者的姓名和被引用的内容)，写出如下jQuery代码并命名为quote.js 文件，保存到主题所在的js目录下（大家可以参考我的主题评论的web结构，修改author和content的值）。
/* @quoter js by vfhky */
jQuery(document).ready(function($){ //Begin jQuery
$("a.quote").click(function(){
if($("#comment").length > 0){
var author = $(this).prevAll().find("strong:first").text();//获取当前引用的姓名
var content = $(this).parents("li").find(".vfhky_quote").html();//获取当前引用的内容
content = content.replace(/<\/?.+?>/g,"");//js去除html代码标记
var cmt_link = $(this).attr("href");
var output = $("#comment").val() + " <div class=\"quotescontents\">";
//注意下面这个div是控制引用内容的样式，你可以通过在主题style.css文件中自定义
output += "<strong>引用<a href=\"" + cmt_link + "\">"+ author+"<\/a>" +'原文：'+"<\/strong>"+content+"</div>";
$("#comment").val(output);
$("#comment").focus();
return false;
} else {
alert("评论已经关闭，无法引用。");
return false;
}
});
})
3、由于在添加@功能的时候，我已经上传了jquery.min.js（见文章 wordpress回复内容前面添加@作者样式 ），所以这个步骤我就不用做了。
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>
<script type="text/javascript" src="<? php bloginfo('template_directory'); ?>/js/quote.js"></script>
注意：如果使用了@功能（即已经添加了jQuery库）的话，直接写最后那句代码，即加载quote.js。（PS：由于一些因素，Google服务在中国还是不怎么稳定，所以比较推荐新浪SAE提供的jQuery库）
5、在合适的位置（一般是functions.php，和那个@功能是一样的文件）添加引用的按钮。例如我的就是
<a class="quote" href="#comment-<?php comment_ID() ?>">[引用]</a>
6、因为引用到原作者，所以把functions.php中的 <?php comment_author_link() ?> 改成（同@） ，以便使用jQuery。
<strong><?php comment_author_link() ?></strong>
7、把functions.php中的调用评论内容的标签 <?php comment_text() ?> 改成如下代码（同@），以便使用jQuery。
<div class="vfhky_quote"><?php comment_text() ?></div>
8、搞定，有问题的话可以留言
Update 2012.09.24 20:20
1、对于WP-UserAgent的博客，如果你选择的“Display location”不是“Custom （Advanced）”的话，很可能在引用的时候把这些信息加入到了被引用的内容中去。所以建议选择“Custom （Advanced）”，然后单独使用<? php useragent_output_custom(); ?>。
这样就不会在引用内容中加入多余信息。我之前也是由于这个原因调试了N久，最后才找出这个原因。
2、这个引用功能和@功能能够兼容额，不用担心用了这个就不能用那个了。另外它也兼容IE系列浏览器。所以推荐大家一试！！！
Comments »