用 jQuery 实现点击回复之后显示@用户名的效果

今早 koobai 的评论提出“什么时候写一篇点击回复之后会显示@用户名的效果日志”,刚好这两天我正在为“文囧”而“囧”,所以就把这个效果的实现方法写出来,因为我是伟大的 CP 党,所以老鸟请飘菜鸟请参考

经常来我这的朋友都会发现我的评论回复用的是“@用户”来回复评论的,具体说明我在《启用新 WordPress 主题: zSofa ( Alpha 版本)》这篇文章里面说过,这里就不累说了。

下面只讲“用 jQuery 实现点击回复之后显示@用户名的效果”的方法步骤,同样因为我是 CP 党,所以我尽量做到贴出的代码直接 CP 就能用。

下面是详细步骤:

1. 确定自己的主题评论结构基本是 WordPress 默认的结构(也就是说主题的评论结构比较标准),而且用的是 WordPress 2.7 以上版本的 wp_list_comments 函数,具体可以参考 http://codex.wordpress.org/Template_Tags/wp_list_comments

2. 确定自己已经加载 jQuery 库,如果没有加载,在主题文件 header.php 里面找到下面这个

<?php wp_head(); ?>

在它前面加入以下代码:(注:jquery 1.3.2 一样效果)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/reply.js"></script>

3. 把下面的 jQuery 代码保存为 reply. js 文件,并存到主题所在目录(也可以加在主题本身已有的 js 文件里面)

/* @reply js by zwwooooo */
jQuery(document).ready(function($){	//Begin jQuery
	$('.reply').click(function() {
	var atid = '"#' + $(this).parent().attr("id") + '"';
	var atname = $(this).prevAll().find('cite:first').text();
	$("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>").focus();
});
	$('.cancel-comment-reply a').click(function() {	//点击取消回复评论清空评论框的内容
	$("#comment").attr("value",'');
});
})	//End jQuery

4. OK 啦,可以试试了。加些说明:如果你的主题评论结构符合上面第 1 点所说,原则上支持 WordPress 2.7 版本以上的自带评论嵌套

需要了解原理的可以借助 FirebugjQuery 中文手册自个折腾研究。

zww
or
oooo

“用 jQuery 实现点击回复之后显示@用户名的效果”有176条评论

  1. Blog评论功能再次改进 | 君看一叶舟,出没风波里 | Timothy's Space says:

    [...] 3.这个修改源自Zww同学的提议,在每条评论中增加”回复”按钮,原以为我的皮肤不支持嵌套评论的,尝试着在WordPress的设置项中,把嵌套评论给Enable了,这样的话,每条评论就自动有了个回复按钮。接下来,想实现点击回复的时候,自动把评论的同学的名字填入到评论框中,也就是类似 @XXX: 的形式。大体思路是通过jQuery来实现,绑定这些回复按钮的click事件,获取评论的同学的名称,设置到评论框中。其实Zww同学早就实现了这样的功能(前去围观),所以jQuery也可以偷师过来了: ?View Code JS1 2 3 4 5 $(".reply").click( function(){ var name = $(this).prevAll().find("cite:first").text(); $("#comment").text("@"+name+":").focus(); }); [...]

  2. 林晨 says:

    第二行应该是

    <script type="text/javascript" src="/reply.js">

    不是zsofa.js吧?

    1. zwwooooo says:

      @林晨 对,忘了替换了,粗心了 :lol:

  3. 柳城 says:

    好。学习了。 拿来试试,不过貌似为了这个就多jQuery,有点划不来阿?

    1. zwwooooo says:

      @柳城 这个要看你了,我的评论ajax方式本身就加载了jQuery,所以无所谓。

  4. says:

    :evil: 评论列表好长..另外表情很搞笑

    1. zwwooooo says:

      @成 呃~表情是我修改玩儿 :mrgreen:

  5. fcola says:

    这个问题我也问过,好在还是在这找到了 :mad:

    1. zwwooooo says:

      @fcola 慢慢折腾

  6. says:

    什么时候写个沙发,板凳,教程,成叔叔那个跟你楼号代码混合了,就不知道怎么搞了

    1. zwwooooo says:

      @洁 成叔叔是谁?我不是写了楼号方法么?至于沙发板凳加个if判断楼号不就可以了?

  7. Zbench主题的代码使用调整手记 | 邪罗刹的菠萝阁 says:

    [...] 1. 用 jQuery 实现点击回复之后显示@用户名的效果 - http://zww.me/archives/24817 > 2. WordPress主题发布: zBench - http://zww.me/archives/25131 > 3. WordPress [...]

  8. 小邪 says:

    杯具了,有木有空帮我看看 ~
    我用了这个以后,先AJAX发表一次评论 ~
    后一次点击回复,就没有出现 @用户名 了 ~ :cry:

    1. 小邪 says:

      @小邪 喔喔,知道为什么木有@显示了 ~
      因为原先的JS是无法处理AJAX返回后的数据的 ~
      所以就让返回后的数据里面也带了这样的JS ~
      就完工鸟 ~ 嘻嘻 ~ :oops: :oops: :oops:

    2. zwwooooo says:

      @小邪 哈哈,小邪应该比我懂很多js才对

  9. ZH CEXO says:

    刚做了主题,参考了你的代码实现的@reply,但是不知道为什么,mail to commentors这个插件再也不会发邮件了,特来请教一下,有办法解决么?谢谢!

    1. zwwooooo says:

      @ZH CEXO 看看是否跟其他插件冲突

    2. ZH CEXO says:

      @zwwooooo 应该不会跟别的插件冲突,因为我以前使用的插件和现在使用的插件没有变化,而以前的@reply是用插件的函数实现的,这次是用js实现的,结果就有问题了 :cry:

    3. zwwooooo says:

      @ZH CEXO 你看我这有问题么?所以问题不在这个代码,应该是其他代码/插件引起的,用排除法测试

  10. [...] 以后我会慢慢把这些功能的使用方法介绍给大家,今天先介绍一篇《用 jQuery 实现点击回复之后显示@用户名的效果》by zwwooooo [...]

  11. Mucid says:

    偶也弄好了,感谢ZWW大神啊!亲一个 :oops: :oops:

    1. zwwooooo says:

      @Mucid 囧,你要是女的还好

  12. snowxh says:

    为什么我折腾半天还是不显示呢= =
    willin的ajax 为什么呢为什么呢为什么呢

    还有额 你的只有第二层嵌套缩进是怎么弄的呀

    1. zwwooooo says:

      @snowxh 你是说2级以下的嵌套全部放在第二层?如果是的话我用的是QiQiboy的无限嵌套方法,具体去他那里吧

  13. 安装VnstatVPS流量监控与伪无限嵌套 | 邪罗刹的菠萝阁 says:

    [...] > 完美的WordPress无限嵌套回复方法 - http://zww.me/archives/25191 > 折腾:5级嵌套改为2级嵌套 & 主评论内悬浮显示 @ 评论 - http://zww.me/archives/24737 > 用 jQuery 实现点击回复之后显示@用户名的效果 - http://zww.me/archives/24817 [...]

  14. [...] 3. 因为最后那层评论都是堆积在最后那层评论上一级,所以如果评论很多的话,就会出现不知道谁回复谁的情况,可以考虑给每个评论加上 @评论者 ,实现方法参考《用 jQuery 实现点击回复之后显示@用户名的效果》 [...]

  15. Wordpress中实现“回复评论邮件告知”的几种方式 | Nxun's Blog says:

    [...] 4.嵌套评论+@user通知 需要安装1.Mail To Commenter的插件。作者zww提供了一段jQuery的代码可以在点击“回复”时自动添加@user到评论框中,这样在保留嵌套评论的前提下,让评论者灵活选择是否要邮件通知对方,或是邮件通知多个人。 [...]

  16. 你是怎么做的?
    IE9不支持

    1. zwwooooo says:

      @blueandhack
      ie9?它刚出来,不鸟它

  17. 点击回复显示@用户名 | Note:ongakuer says:

    [...] 要用上的。转自zwwooooo 用 jQuery 实现点击回复之后显示@用户名的效果 前略,假设已经加载 jQuery 具体代码是: [...]

  18. YesCola says:

    想知道oo的嵌套回复是不是用的WP Thread Comment这个插件?

    1. zwwooooo says:

      @YesCola
      不是,wp原生的,wp自带何必用插件

    2. YesCola says:

      @zwwooooo
      了解,不过我还是用插件吧。。懒得折腾了。不然又要改主题。。

    3. zwwooooo says:

      @YesCola
      你说的是ajax回复吧,如果只是嵌套那么现在的主题都支持

  19. 默玉 says:

    :arrow: 貌似我的不能读取用户名和链接,郁闷,大神什么时间有时间去我那里看看

    1. zwwooooo says:

      @默玉
      呃,我不是大神……你注意id/class的选择,还有看看你的主题结构修改代码。打不开你的网站,超慢。

    2. 默玉 says:

      @zwwooooo
      我的网站打不开?不会吧?
      看来要换主机咯
      :roll: 把那些换来换去都读不出用户名和链接,只是独处一个UN什么的,貌似是空吧

    3. zwwooooo says:

      @默玉
      嗯,就是空了,找不到目标。看看自己的主题评论结构然后修改jq代码吧。

    4. 默玉 says:

      @zwwooooo
      var atid = '"#' + $(this).parent().attr("id") + '"';
      var atname = $(this).prevAll().find('cite:first').text();
      应该是这两句吧