利用JQuery为WordPress的嵌套回复添加@reply功能

在WordPress的评论中两种主流样式:嵌套回复和@回复的选择取舍上是不是经常让你难以决定?嵌套回复让评论的上下文清晰明瞭但样式混乱,@回复让评论样式整洁但对讨论前后模糊。我想这些应该是大家当然也包括我都会感觉到的,而Jinwen希望的是尽量能把它们的优点都整合,也就有了本文将要介绍的方法。

 利用JQuery为WordPress的嵌套回复添加@reply功能

1. 本文讨论的前提

对于未被回复的评论,也就是初始评论,我称为主评论;而每个回复主评论的评论,也就是应用了嵌套样式的评论,我称为从属评论。

另外是我使用的嵌套回复仅限一层。如果在第二层的嵌套中再应用@回复样式,那就失去本文的讨论初衷,因为那样的评论样式只会更乱。

最后也就是如文章题目一样,需要利用到JQuery的帮助,也就是说你的主题中必需首先加载了JQuery。

2. 设计的思路

如果要实现上图的样式,归根就是对评论中回复按钮的功能设计。简单来说就是:当点击主评论的回复按钮,会产生嵌套回复,回复的内容紧跟在主评论后;当点击从属评论的回复按钮,则在回复的内容中添加@XXX的字样,回复的内容也是紧跟在主评论之后。

3. 实验的方法

(1)主评论的回复按钮

Jinwen在这里不说了。因为它是WordPress中嵌套回复中默认就存在了。(如果你想知道嵌套回复的实现请看文末的参考)

(2)从属评论回复按钮

它的实现,也就是本文介绍的重点。按上面设计的思路,通过它产生的回复评论是需要紧跟在主评论之后的,这不就是和主评论的回复按钮一样吗?那么我们就把主评论的回复按钮分别复制到每一个属于它的从属评论中就行了,在主题的js中(ready function内)添加:

//这里假设你的评论样式是.commentlist
$('.commentlist li').each(function() {
//设置一个变量zzz,用来定义从属评论的按钮将要被复制到何位置,本例它将被得到到ul.children li内
var zzz = $(this).find('ul.children li .message_head');
//查找主评论按钮的设置样式,这个会因主题不同而不同(本例是.re_icon);
//然后把它复制,去除原有样式re_icon,重新对其定义一个样式atclass(如果你的主-从属两回复按钮样式将不一样,建议这样做)
//最后把复制的内容分别插入到变量“zzz”中
$(this).find(".re_icon:first").clone().removeClass("re_icon").addClass("atclass").appendTo(zzz);
});

这样我们就会在每一个从属评论后得到一个复制而来的按钮。当然这个通过复制得来的按钮其实与主评论的回复按钮是一样的!只是它比主评论的回复还多了一个功能:就是往评论框内发送@XXX的字样。我们接下来把它实现,在主题的js中(ready function内)添加:

//定义从属评论回复按钮被点击后的动作
$('.atclass').click(function() {
//定义一个变量atname
//查找在每条从属评论中留言者名称的样式(本例是cite),然后记录它的文字内容,也就是留言都的名字了
//你可以预先为评论的留言名称用一个包起,而这个“hisname”也就与本例的cite了。
var atname = $(this).parents(".message_head").find("cite").text();
//然后向留言框中输入@XXX的字样。需要指定留言框的ID,这里是#comment
//最后通过.focus()顺便激活留言框的输入状态
$("#comment").append("@" + atname + " ").focus();
});

其实也就是通过上面两段代码就可以了,并不复杂。实现的难点是你必需知道自己主题模板中评论部分的结构关系。如上面代码中的红字部分就是一个难点,因为它分别受插入按钮的位置和这个位置与留言者名称之间的位置关系决定。Jinwen在这里就不能将其总结,必需由大家自己多折腾一下了。

由于往留言框输入的@XXX可能在“取消回复”后依然存在,所以Jinwen建议再加上一段代码,作一点点清洁,保证点击“取消回复”后清除留言框内的文字内容:

$('#cancel-comment-reply-link').click(function() {
$("#comment").empty();
});

要实现本文开始时候介绍的样式,方法当然并不局限上我上面所介绍的。无论如何,Jinwen还是希望上面的思路能让大家对嵌套回复的设计有点启发,那就很荣幸了。

4. 留言的邮件回复通知

这可能又是大家关心的问题了,Jinwen这里推荐通过国人两个精彩插件就可以实现了。

对于嵌套回复的邮件通知,建议通过Comment Reply Notification这个插件实现。在后台激活使用就可以了。

而@reply回复的邮件通知,则建议通过Mail To Commenter这个插件实现。由于这个插件是能自动检测评论中带@的字段而自动发送通知邮件的,所以我们同样只要在后台激活这个插件就可以了。

5. 结语

嵌套回复是会让访客了解到已有留言中的相关,从而更容易加入其讨论;这样,也就大大增加了博客中的讨论热度。另外一个很重要的是,Jinwen想让每一个被回复的主评论都能成为一个小的讨论区。就是说,对一些有价值的评论,大家可以通过嵌套继续延伸对其的讨论;而加入@reply的回复样式会让那些有价值的评论(主评论)下的讨论(从属评论)更加有序和可追索。就目前来说本站所用的评论样式,基本想能达到Jinwen所设想的。不知大家意见如何?

6. 参考

下面的一些文章链接,或者能让你更为了解嵌套和@reply各自精彩的讨论和用法,谢谢下面文章的各位作者。

分类:WordPress;标签:, , , , ;收藏本文的永久链接

126 Responses to “利用JQuery为WordPress的嵌套回复添加@reply功能”

  1. 吖Bee 回复此留言 2009/07/19 03:48 #comment-8817

    啊~~不折腾啦........

  2. bolo 回复此留言 2009/07/19 05:45 #comment-8818

    嗯,这种方法真不错!

  3. 小明猪 回复此留言 2009/07/19 06:16 #comment-8819

    哈哈,嵌套回复跟@回复一起来嘛~在嵌套中添加@,这样的话如果一个评论下面很多人回复的话不是更加一目了然,你不可能将嵌套设置成无限层嘛,那样看上去就不美观了..

    • Jinwen 回复此留言 2009/07/19 13:21 #comment-8835

      其实这个方法是针对第一层;当然我们可以把它利用ID中的depth-1,depth-2来对第二层,第三层的嵌套添加reply。

  4. joel 回复此留言 2009/07/19 06:40 #comment-8820

    测试下看看

  5. joel 回复此留言 2009/07/19 07:48 #comment-8829

    评论被reply了邮箱会收到两份回复信息,这个好像不太好

    • Jinwen 回复此留言 2009/07/19 08:00 #comment-8830

      当主评论和需要回复的从属评论都是同一个人时候,就会收到两份信息了;相反,他们不是同一人时候,则相关的两人也会收到通知的。
      所以不建议用reply的形式回复那个既是主评论又是从属评论的人,有点复杂。

    • zwwooooo 回复此留言 2009/07/19 11:34 #comment-8833

      测试一下效果,总是觉得要自己测试才了解

  6. 林木木 回复此留言 2009/07/19 03:25 #comment-8815

    坐下再说,喜欢看JINWEN的技术文章!

    • shamas 回复此留言 2009/07/20 13:25 #comment-8848

      我也喜欢jinwen的文章,现在正想把K2再弄嵌套回复,原来主题自带的早给我改得面目全非了

    • kenny 回复此留言 2009/07/28 05:53 #comment-8965

      @shamas 
      奇怪。。和我想的不一样。。。

    • alluse 回复此留言 2009/10/31 09:53 #comment-10463

      @kenny 你丫的有才啊!

    • albert 回复此留言 2010/01/31 18:33 #comment-12516

      @kenny 测试回复一下,这个貌似是我想要的。。。

  7. 林木木 回复此留言 2009/07/19 03:44 #comment-8816

    简单来说,就是实现点击一下“回复”,自动在嵌套的评论框中添加@XXX。JQuery就是强大,可是我就是不懂……

  8. Sivan 回复此留言 2009/07/19 06:40 #comment-8821

    WTC以前的即嵌套又@reply模式最好用了,当不用嵌套时,@reply还能生效。
    现在用WP原生的嵌套系统怎么弄都弄不出WTC的那个效果……

    • Jinwen 回复此留言 2009/07/19 06:51 #comment-8826

      能介绍下不?我不太明白“当不用嵌套时,reply还能生效。”这一句。是不是就是嵌套和reply的回复按钮都提供出来?

    • Sivan 回复此留言 2009/07/19 06:56 #comment-8827

      @Jinwen 如果只用嵌套不用@,不用嵌套的时候评论就乱了。如果都支持,没有嵌套的格式但@reply还有显示,不会乱。

      你这个代码真的太有用了,让使用原生评论的也有日后放弃嵌套的选择。我已经试验成功了。但我没有用前面复制评论的代码,因为主评论和嵌套评论本来都有按钮,而且每一层都能用@了。

    • Jinwen 回复此留言 2009/07/19 07:03 #comment-8828

      @Sivan 的确是都已经存在着按钮。复制的方法介绍其实是想能灵活控制插入按钮的位置。复制主评论的按钮,是为了让从属的评论都归为第一层嵌套;如果使用第一层自带的回复按钮,那么评论后就变成第二层嵌套了。

  9. zwwooooo 回复此留言 2009/07/19 11:33 #comment-8832

    看来我的5级嵌套就不适合了。我想问下Jinwen,有没有办法给主评论和嵌套的评论都加上个@,而且这个@只能博主看得见,@的功能是在评论框添加@xxx的功能,因为有时不想每个人都分别用嵌套回复,想用一个评论同时回复多人评论,因为这样比较方便(其实是懒)

    • Jinwen 回复此留言 2009/07/21 19:32 #comment-8864

      话说你这个留言怎么被视为spam了?给我捡回来了,呵呵。
      要给主评论添加@的原理和文章说的是一样的,可以的;至于你想只有admin才能看到的功能,我想在那些回复按钮的代码前后用WordPress的条件语句包括起来,如is_admin()这个功能。这样用来保证只有某些用户才能看到那按钮。不过我还没试验过。

    • Jinwen 回复此留言 2009/07/21 19:36 #comment-8865

      我再想了下,用下面的把按钮代码包括起来应该可以:
      [?php global $user_ID; if( $user_ID ) : ?]
      [?php if( current_user_can('level_10') ) : ?]

      按钮代码

      [?php else : ?]
      [?php endif; ?]
      [?php endif; ?]

    • zwwooooo 回复此留言 2009/07/22 04:13 #comment-8878

      @Jinwen 这两天试试,昨天我博客所在的主机给拔线了——因为有人没备案……现在临时搬回我以前的国外空间

    • zwwooooo 回复此留言 2009/07/22 06:52 #comment-8884

      @Jinwen 试了一下,没有搞定,不知道怎么复制一个回复按钮加到原回复按钮旁边(或者下面),不知道是不是因为我的评论是这样调用的:[?php wp_list_comments('avatar_size=32'); ?]

    • 二手贴片机 回复此留言 2011/08/01 13:49 #comment-21221

      我来测试一下看看@zwwooooo 

    • 二手贴片机 回复此留言 2011/08/01 13:51 #comment-21222

      @Jinwen 现场动车放错地方

  10. 所以说 回复此留言 2009/07/19 16:23 #comment-8837

    虽然设计起来挺好,但是对于陌生访客来说似乎看起来还是挺复杂

  11. Alex 回复此留言 2009/07/19 17:03 #comment-8838

    最近工作忙都没有什么时间折腾wordpress主题了,现在换上了MG12的经典主题用用先。。。
    不知道为啥子,升级到了2.7版本后就不怎么喜欢使用嵌套了。。。

    • Jinwen 回复此留言 2009/07/20 07:42 #comment-8847

      这个还是生活重要点吧;我也是很久才写一篇这样的文章了,呵呵。

  12. 西风 回复此留言 2009/07/20 03:18 #comment-8843

    我刚刚换了一个呵呵呵

  13. Showfom 回复此留言 2009/07/21 17:13 #comment-8859

    要的就是这个效果 哦哈哈

  14. shamas 回复此留言 2009/07/22 08:05 #comment-8889

    我现在在主题里面加上了嵌套评论,居然出现怪现象就是嵌套的字比一般评论的字大一个号,而且每多一层,字还在加大,不知道什么原因,大哥可否指点迷津啊,呵

    • shamas 回复此留言 2009/07/22 11:29 #comment-8896

      @Jinwen 多谢指点,我去改改

    • Jinwen 回复此留言 2009/07/22 08:21 #comment-8890

      我看了。如果要保证回复正文的字体一样大,需要在CSS中的.commentlist li p还有.comment-meta还有.commentlist cite还有再增加一个.say的样式,这4句都要添加增加font-size的属性就好了。

    • shamas 回复此留言 2009/07/23 07:19 #comment-8909

      搞定,我只是在P里面加了个字大小,我改评论风格里面很多样式都没用,没仔细看

  15. Leeiio 回复此留言 2009/07/22 11:33 #comment-8897

    话说我的主题还木有实现嵌套。。

  16. shamas 回复此留言 2009/07/24 09:47 #comment-8937

    这些代码是不是放到主题functions文件里面啊,我的放了老是提示错误:Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' in /home/cn12/domains/3284265.cn/public_html/wp-content/themes/k2/functions.php on line 24

    • Jinwen 回复此留言 2009/07/24 23:12 #comment-8945

      这些代码是放在主题的js文件中的啊,不是放在function中。

    • shamas 回复此留言 2009/07/26 03:28 #comment-8949

      @Jinwen  我太菜了,还是搞不定,我把它加在那个comment-reply.js好像不行,是不是一定要单独建一个js文件放进去

  17. 大脚 回复此留言 2009/07/26 04:37 #comment-8950

    相当的不错的设置..只可惜俺太菜了!!

  18. ucax 回复此留言 2009/07/28 16:34 #comment-8972

    有難度! 我..放棄.

  19. Sivan 回复此留言 2009/08/04 03:11 #comment-9062

    我想给插入的内容加上该评论的链接,可是用jquery试了好几个都不对,估计语法错误=。=

    var aturl = $(this).parents(".status-body").find(".commenturl").attr("href");

    commenturl就是a的类。

  20. 弓也设计 回复此留言 2009/08/04 09:52 #comment-9071

    太难了,对于我这种菜鸟来说!得经常来这里看看了

    • houkai 回复此留言 2009/09/16 15:34 #comment-9680

      测试一下 看看什么效果

  21. 同志 回复此留言 2009/08/13 15:58 #comment-9346

    呵呵,我也是菜鸟,只能帮你顶了

  22. 还不错 回复此留言 2009/08/31 12:46 #comment-9560

    这个功能不错。

  23. Rui 回复此留言 2009/09/20 14:08 #comment-9724

    啊啊啊啊啊啊~拜读,研究,折腾~!!!
    谢谢:)

  24. 天涯 回复此留言 2009/10/11 10:29 #comment-9913

    很喜欢,什么时候能够开发成插件啊?

  25. 阿修 回复此留言 2009/10/19 08:39 #comment-10008

    谢谢jinwen,成功啦~~

  26. 阿修 回复此留言 2009/11/04 00:19 #comment-10515

    为什么 @+名字 的嵌套在firefox不起作用呢?在chrome,IE下都是可以的~~

    • Jinwen 回复此留言 2009/11/04 00:25 #comment-10516

      应该不会的啊,我就是常用FF的呢。是不是缓存了什么?

    • 阿修 回复此留言 2009/11/06 15:09 #comment-10559

      @Jinwen 不对啊,删除所有缓存都没办法在FF里显示~~还挺郁闷的~~

    • Nomessi 回复此留言 2009/11/16 09:43 #comment-10845

      :sad: :smile: test!

  27. zwwooooo 回复此留言 2009/11/24 12:02 #comment-11090

    今天才正式折腾这个,我把我主题的5级嵌套后的处理用你这个方法处理,由于对jQuery的元素不熟 + 我们的主题结构完全不一样,折腾了一下午才搞定

  28. zwwooooo 回复此留言 2009/11/24 13:52 #comment-11091

    碰到了一个难题,就是评论如果输入了文字后,这时取消,然后再点击回复按钮就失效了,我用attr方式代替append方式解决,但Jinwen这里貌似没这个问题

    • Jinwen 回复此留言 2009/11/24 16:19 #comment-11095

      你的方法等我在周末也试一下,其实这个评论还有很多地方可以改,就是自己太懒了,能用就行 :grin:

    • zwwooooo 回复此留言 2009/11/24 16:50 #comment-11100

      @Jinwen 晚上来你这自动切换为黑色主题了,黑色真是够诱惑,自己都有使用的冲动了

    • Jinwen 回复此留言 2009/11/24 16:54 #comment-11101

      @zwwooooo 就是那些人懒,我之前在前台的切换按钮都没有去换,我干脆按时间来自动切换好了;免得我的心血白费 :mad:

    • zwwooooo 回复此留言 2009/11/24 17:03 #comment-11102

      @Jinwen 我一般都切换为黑色。还是自动切换好,这样非常不错。我也有这个冲动,但最近很懒——对于主题。

  29. 杭州广告设计 回复此留言 2009/12/03 09:36 #comment-11283

    你的方法等我在周末也试一下

  30. niuhuifei 回复此留言 2009/12/30 06:36 #comment-11970

    这个方法好,已用上,谢谢。

  31. Anderlu 回复此留言 2010/01/08 16:38 #comment-12097

    我现在做的comment也是这样嵌套~hehe

  32. Leeiio 回复此留言 2010/01/09 16:26 #comment-12108

    呃,测试成功!

  33. Leeiio 回复此留言 2010/01/09 17:04 #comment-12109

    如果是两次ajax会如何插入新评论呢?

  34. sameasy 回复此留言 2010/02/27 16:35 #comment-13054

    方法思路能看明白,就我的技术程度实施起来有点难度啊,如果能整成插件就好了,幸福我们这种技术部咋样的人,还有个问题问下,这个代码放到模板里的JS文件里,可我的模板文件有好多个JS,不知道放哪个呢,难道是自己新建一个是吗?

  35. sameasy 回复此留言 2010/02/27 23:58 #comment-13067

    再问下,网站中的哪个主题自带你的评论样式呢?可以的话,直接用你的主题不就好了,呵呵

  36. ithillad 回复此留言 2010/05/09 16:28 #comment-14337

    关于这篇文章,之前我有写过两封email求助,但是到现在都没有收到回信,有点难过啊……是因为不经常收邮件的关系吗?所以上来留言打个招呼,我改了一些代码,已经可以正常使用了,就这样~~

    • Jinwen 回复此留言 2010/05/09 23:50 #comment-14339

      实在不好意思,忙着没办法回复你。但我看你邮件里描述的,其实我也不知道怎样解决。

    • ithillad 回复此留言 2010/05/10 02:05 #comment-14340

      @Jinwen 哈,没事~反正是看了你的文以后我就对jquery开始感兴趣了,所以要谢谢你呀~~刚换了种方法实现了相同的留言样式,现在开始改css。等改好以后,我的blog应该也能上线见人了吧,到时候去我那里踩踩呀~~

  37. CAZE 回复此留言 2010/05/22 17:28 #comment-14552

    很不错的文章。

  38. winw-google blogs 回复此留言 2010/06/03 15:47 #comment-14673

    折腾到一回复就出两个邮件了

    • Jinwen 回复此留言 2010/06/04 00:23 #comment-14675

      我也有出现这种情况,当自己的主评论被人用嵌套回复的时候。。。

  39. 金冈 回复此留言 2010/06/07 23:33 #comment-14694

    想法很不错,“嵌套回复仅限一层”这个是重点

  40. 金冈 回复此留言 2010/06/11 02:43 #comment-14711

    将$("#comment").append("@" + atname + " ").focus();});改为:$("#comment").val("@" + atname + " " + $("#comment").val()).focus();试试更加合理呢,谢谢,append()在输入一段文字后在点击回复按钮时出现BUG

  41. SolidWorks培训 回复此留言 2010/08/24 09:45 #comment-15552

    我也是来测试的

  42. 不羡鱼 回复此留言 2010/11/21 02:39 #comment-16439

    jinwen写得很清楚,差不多是看明白了。从属评论的按钮除了通过“复制”的办法获得以外,有没有更直接的方法。还是就是回复邮件提示,有没有免插件的方法。还是再仔细研究一下。

  43. xiao.z 回复此留言 2010/12/01 00:57 #comment-16519

    我也来测试一个, :grin:

  44. xiao.z 回复此留言 2010/12/01 00:57 #comment-16520

    我擦勒,需要评论审核。 :eek:

  45. 杭州双眼皮 回复此留言 2010/12/09 15:49 #comment-16573

    测试 测试 呵呵
    确实不错哦

  46. mg12 回复此留言 2011/01/10 22:18 #comment-17330

    嵌套回复什么都是浮云, 就不再费心了.

  47. wisfern 回复此留言 2011/01/18 14:19 #comment-17533

    留个记号,还真没有时间来折腾。

  48. 罗迦费升格 回复此留言 2011/01/22 18:15 #comment-17625

    进来测试看看!

  49. likebeta 回复此留言 2011/05/14 01:29 #comment-19081

    楼主有没有非插件实现回复通知?

  50. likebeta 回复此留言 2011/05/23 21:55 #comment-19311

    博主,这样,别人换主题或者换评论模板了怎么办?可不可以考虑@段只在前台显示,不存入数据库? :evil:

  51. 搞毛线 回复此留言 2011/05/26 14:45 #comment-19368

    您好,有空指导 :roll: 下我吗?

  52. gen 回复此留言 2011/06/29 12:28 #comment-20351

    hi,这篇技术贴太好了,太强了。但还是又一个留言的回复问题,我没有搞懂,查了很多资料,都不是太详细明了。

    我的主题留言后找不到“回复”按钮。即使是”主评论的回复“按钮也没有。可能是我的主题的comment。php里没有写出reply等等功能。但是具体的我不会添加类似代码。所以特想冒昧请教!

    多谢!

  53. 动漫系 回复此留言 2011/07/08 13:29 #comment-20618

    仔细看了下,发现看不懂……

  54. skkettchh 回复此留言 2011/08/27 18:53 #comment-21815

    貌似还是嵌套啊,只不过加了@符号,你也太忽悠人了吧...

  55. 小米04 回复此留言 2011/11/26 11:53 #comment-26129

    请问下 第三层回复出现@ 是什么原因呢 :arrow:

  56. 小米04 回复此留言 2011/11/26 11:54 #comment-26130

    额 补充下


The trackbacks and pingpacks: