添加引用按钮——轻松打造属于你的WordPress引用回复功能
之前的《完美解决WordPress嵌套回复的层深问题（无限嵌套）<一>》这篇文章中我讲了自己关于实现WordPress无限嵌套的一个思路。今天又有同学询问引用功能是如何实现的，我就简单说一下，有能力的同学可以折腾试试。
回复功能已经在WordPress上屡见不鲜了，可以说回复促进了访客与博主之间的互动，使得评论更加有趣。
引用功能也是一个不错的选择，因为某些情况下我们可能需要向一个人(A)解释说明一个问题时需要引用另一个人(B)所说过的话，如果有一个引用按钮就好办多了。
引用按钮需要实现的有，取得被引用人（B）的名字和所说的内容，我们给其加上适当的标签，如 <blockquote>、<strong>等，我就以WordPress的默认评论模板(通过回调函数定义，一般在function.php文件中)来简单说一下如何实现引用功能。
先说明一下，jQuery也是可以实现引用功能的，我之前有实现过，不过不完美。相比于这儿的纯JavaScript，jQuery强大的选择器可以不修改评论模板实现相关功能，甚至是对于直接调用wp_list_comment()函数的主题。而这儿的js方法则需要你配合修改一些地方，方便js获取调用。下面是步骤——
第一步：首先获取B的姓名
评论人的名字都在class="comment-author vcard"这个div里
<div class="comment-author vcard">
<?php echo get_avatar($comment,$size='40',$default='<path_to_url>' ); ?>
<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>
我们需要做的是给这个div加个容易识别的ID，如id="author-<?php comment_ID() ?>"
变为：
<div id="author-<?php comment_ID() ?>" class="comment-author vcard">
<?php echo get_avatar($comment,$size='40',$default='<path_to_url>' ); ?>
<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>
第二步：获取B的评论内容
默认评论模板里，评论内容是直接在<div id="comment-<?php comment_ID(); ?>">这个div下的，由于这个盒子里还有其他内容，不利于我们获取评论内容，所以我们给评论内容加个“外壳”，即是给<?php comment_text() ?>这个函数加个DIV：
<div id="commentText-<?php comment_ID() ?>">
<?php comment_text() ?>
</div>
id值为id="commentText-<?php comment_ID() ?>"
第三步，添加相关JavaScript函数
我们前两部分别通过修改评论模板得到了可以轻松取得被引用人姓名和评论内容的“捷径”——id值，所以JavaScript函数中的参数也就是这两个id值。
代码如下：
(function(){
function $(id){
return document.getElementById(id);
}
function quote(authorId, commentBodyId) {
var author = $(authorId).innerHTML.replace(/<.+?>/gim,"").replace(/\t|\n|\r\n/g, "");
var comment = $(commentBodyId).innerHTML;
$("comment").value+='<blockquote>\n<strong><a href="#comment-' + authorId.replace(/author-/,"") + '">' + author + '</a> :</strong>' + comment.replace(/\t/g, "") + '</blockquote>\n';
$("comment").focus();
}
window['SIMPALED'] = {};
window['SIMPALED']['quote']=quote;
})();
将这段js放在页面内任何位置都可，可直接放在你的js文件中或通过<script>标签放在页面某一地方。
第四步，最后一步：添加引用按钮
这一步就简单多了，引用按钮放在哪里，看你自己意愿，我推荐和回复按钮放在一起。回复按钮是在<div class="reply">这个盒子中，你就可以在这里添加
<a onclick="SIMPALED.quote( 'author-<?php comment_ID() ?>','commentText-<?php comment_ID() ?>')" href="#respond" class="comment-reply-link ">quote</a>
做完以上四部，你就成功的在博客上添加了引用回复功能。恭喜你！
以上步骤我尽量说的简单明了，如果折腾中有问题，欢迎留言交流。
有按以上步骤折腾成功的同学也欢迎留言回馈一下。
PS：这两天更新很频繁，因为过两天后不知道还会不会有时间更新。一连几天分别写了《完美解决WordPress嵌套回复的层深问题（无限嵌套）<一>》、《我是如何处理文章中图片的》、《 评论框的简单计数器（无需改动模板，附带输入字数限制功能）》等文章。希望到北京后还有时间继续更新博客。
Post url: http://qiqi.boy.im/1k. You can ReTweet This Post.
25 Responses to this post.
Comments (22) Trackbacks (3)[...] 添加引用按钮——轻松打造属于你的WordPress引用回复功能 [...]
[...] 评论支持无限级嵌套，评论引用、回复功能。——注：无限嵌套参考《完美解决WordPress嵌套回复的层深问题（无限嵌套）》，引用功能参考《添加引用按钮——轻松打造属于你的WordPress引用回复功能》 [...]
[...] [...]