七月
15

添加引用按钮——轻松打造属于你的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嵌套回复的层深问题(无限嵌套)<一>》、《我是如何处理文章中图片的》、《 评论框的简单计数器(无需改动模板,附带输入字数限制功能)》等文章。希望到北京后还有时间继续更新博客。

本文标签: , , , , ,

分享

本文短网址: http://qiqi.boy.im/1k

这篇文章已经有 32 条评论

Comments (27) Trackbacks (5)
You can leave a response or Trackback this entry .
  1. 自由人 -#1

    沙发哈~~ inove好像已经替我做好这个了

    • QiQiBoY --#1

      @自由人
      哈哈,但是好多同学还没有这个功能。。。。我这个可以说是inove的简化版。。

  2. 丕子 -#2

    嗯 就不用插件了

  3. 万戈 -#3

    这个也不错,去试试

  4. A.shun -#4

    哇,这么快就放出教程。

    不过我这种水平的看起来还是蛮复杂 :!:
    等手头上的东西折腾完就弄这个。
    引用功能还是挺好的

  5. 阿邙 -#5

    有嵌套了 引用的意义就不是很明显了

  6. zwwooooo -#6

    QiQiBoY :@阿邙
    有了嵌套@回复就真正没用了,但是引用我觉得还是很必须的。。

    测试一下,哈

  7. MOPVHS -#7

    QiQiBoY :@自由人
    哈哈,但是好多同学还没有这个功能。。。。我这个可以说是inove的简化版。。

    :arrow: 现场测试…然后学习~~

    诶,没有快捷键提交啊·~

  8. 小邪 -#8

    zwwooooo :

    QiQiBoY :@阿邙
    有了嵌套@回复就真正没用了,但是引用我觉得还是很必须的。。

    测试一下,哈

    试一下看看 O(∩_∩)O

  9. sky -#9

    不错,不错的

  10. 海天 -#10

    好东西 回去加一个~

  11. 海天 -#11

    QiQiBoY :@阿邙
    有了嵌套@回复就真正没用了,但是引用我觉得还是很必须的。。

    呵呵 我来测试一下~

  12. Bee君 -#12

    这个也要收藏哈~

    好像这个功能可以用JQurey

  13. yong -#13

    海天 :

    QiQiBoY :@阿邙
    有了嵌套@回复就真正没用了,但是引用我觉得还是很必须的。。

    呵呵 我来测试一下~

    测试一下引用的效果如何!

  14. chung -#14

    研究中.准备加进去

  15. chung -#15

    QiQiBoY :@chung 呵呵。。如有问题可以交流。。

    主题没回复功能咋整- -

  16. lauyu -#16

    测试

    A.shun :哇,这么快就放出教程。
    不过我这种水平的看起来还是蛮复杂
    等手头上的东西折腾完就弄这个。
    引用功能还是挺好的

    zwwooooo :

    QiQiBoY :@阿邙
    有了嵌套@回复就真正没用了,但是引用我觉得还是很必须的。。

    测试一下,哈

    …..hg jhghg jg j g

  17. Popptise -#17

    你好 看了你的方法 我照着做了 但是 点击回复里的Quote之后哦 跳转到留言栏 但是里面没有引用的内容 不知道是怎么回事~ 求解惑~

  18. ganxb2 -#18

    QiQiBoY :
    @自由人
    哈哈,但是好多同学还没有这个功能。。。。我这个可以说是inove的简化版。。

    小邪 :

    zwwooooo :

    QiQiBoY :@阿邙
    有了嵌套@回复就真正没用了,但是引用我觉得还是很必须的。。

    测试一下,哈

    试一下看看 O(∩_∩)O

    引用多个试试

  1. 博客加入若干Ajax效果

    [...] 添加引用按钮——轻松打造属于你的WordPress引用回复功能 [...]

  2. 【SimPaled篇】Introduce My Blog Theme For You

    [...] 评论支持无限级嵌套,评论引用、回复功能。——注:无限嵌套参考《完美解决WordPress嵌套回复的层深问题(无限嵌套)》,引用功能参考《添加引用按钮——轻松打造属于你的WordPress引用回复功能》 [...]

  3. Hello WordPress!

    [...] 2010.07 我开始爆发了,我折腾了很多,首先是wordpress无限嵌套的完美解决WordPress嵌套回复的层深问题(无限嵌套)<一>,还有如何通过JS自动处理文中的图片宽高,这个方法我一直在用哦:我是如何处理文章中图片的。想知道我评论框的那么多功能从哪里来的么,你看完这些你也能拥有和我评论框一样强大的功能了:评论框的简单计数器(无需改动模板,附带输入字数限制功能),添加引用按钮——轻松打造属于你的WordPress引用回复功能、为评论框添加文字格式化编辑器、【多彩的评论】:让评论可以插入图片,更改文字大小、颜色、让你的评论框自由粘贴代码、修正关于Ajax comments的一个小问题。还有关于如何创建邮件表单页面的创建一个可设置cookie相关信息的内置Email联系表单;如果你也想要知道wordpress不同页面显示不同的评论数以及楼层的显示,那么这篇文章也许会给你帮助wordpress指定页面评论数+支持分页的楼层显示 [...]

  4. wordpress评论系统的回复、引用二合一

    [...] 我在前面的时候介绍过引用功能的添加(非jquery方法):《添加引用按钮——轻松打造属于你的WordPress引用回复功能》。 [...]

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: