分享

评论回复插件修改:利用JQuery为WordPress的嵌套回复添加@reply功能

 回风石舞 2010-08-20

在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();
});

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

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

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

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

4. 留言的邮件回复通知

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

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

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

5. 结语

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

6. 参考

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多