用 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. zoe says:

    忘了能解析HTML了。。去掉了a的
    a href="#">@ a

  2. DaoFa says:

    您好,来请教了,看到这个代码很想用,可是试了几天怎么都不行,请帮助,谢谢。
    我的评论结构上这样的:

    DaoFa :
    2012年2月3日 at 13:04
    这里是评论内容。

    Reply

  3. DaoFa says:

    对不起代码没有显示,再发一次。

    您好,来请教了,看到这个代码很想用,可是试了几天怎么都不行,请帮助,谢谢。
    我的评论结构上这样的:

    《li id="comment-11786" class="comment even thread-even depth-1"》
    《div class="comment-body" id="div-comment-11786"》
    《div class="comment-author vcard"》
    《cite class="fn">DaoFa 《span class="says"》 :</span》2012年2月3日 at 13:04这里是评论内容。
    《div class="reply">
    《a onclick='return addComment.moveForm("div-comment-11786", "11786", "respond", "2633")' href="/autolist.html?replytocom=11786#respond" class="comment-reply-link">Reply
    </div》</li》

    1. zwwooooo says:

      @DaoFa
      你的结构不完整

  4. [...] 原文出处:http://zww.me/archives/24817 [...]

  5. hemingway says:

    我成功了,谢谢你哦 :razz:

    1. zwwooooo says:

      @hemingway
      不用客气,慢慢折腾

  6. 失败了Q_Q,帮忙检查下我的博客吧。

    1. zwwooooo says:

      @御宅暴君
      文中已经说了,需要注意自己主题的评论结构。

  7. [...] mail to commmenter,这个插件也比较不错,可以自动通知管理员和评论者(虽然wordpress本身也有通知管理员的功能),你还可以通过这个插件的测 试功能看看是不是确实可以发送邮件,经过测试,发送邮件是可以的,但是问题总是存在,就是回复的时候无法后台实现邮件回复(这点儿就很鸡肋了,管理员不能 总在前台丫),然后就是回复的时候必须通过按钮加入需要邮件通知的人的信息,但是奶牛测试的时候回复的信息默认加入的老是最后一个评论者的,呃,然后就跟 fcola询问了一下,他下班之前告诉我他解决了,然后给了我个地址,是zww写的,用 jQuery 实现点击回复之后显示@用户名的效果  ,奶牛摘取一下更改步骤过来 [...]

  8. OyolaSport says:

    看不懂= =

  9. 哼哼猪 says:

    果断沙发了,嘿嘿

    1. 哼哼猪 says:

      @哼哼猪
      嘿嘿,我测试下你博客的快捷输入,看来档不到人工垃圾评论。
      请教一个问题,最近各种人工垃圾评论,刚刚我把"#comment"改成了"#h_comment",评论什么都正常,但是这个“@用户名”这个效果有点不正常,光标焦点跑到了评论框开始位置,而不是正常的“@用户名”后面的位置,求助解决方法

    2. zwwooooo says:

      @哼哼猪
      改jQ代码或者别改ID。人工垃圾怎么能防囧,就像你现在评论发个广告哪里能防呢,除非你带2个链接或者没头像自然就不会放出来。

    3. 哼哼猪 says:

      @zwwooooo
      我说意思不是纯粹的人工,如果都是人工输入的那真没法防。
      我意思是通过JS快捷发布垃圾评论的,就像我上面的回复一样,那些都是点一下就发出来的。而获取的值就是评论的ID,所以我才想看能不能修改默认的ID,预防半人工的垃圾评论

    4. 哼哼猪 says:

      @zwwooooo
      点击回复后的光标位置该怎么修改呢?
      这两天好多英文垃圾评论,本来我用了防止英文垃圾评论,不过因为“@用户名”这个回复前缀已经包含了中文,造成了英文评论畅通无阻

    5. zwwooooo says:

      @哼哼猪
      jQ找#comment啊,替换为你更改过的那个

    6. zwwooooo says:

      @哼哼猪
      原来还有这种半人工,我说怎么那么多没意义的评论(跟文章无关,说了等于白说的评论),我也改一下好了,哈。

    7. 哼哼猪 says:

      @zwwooooo
      奇怪我没在jQ里面找到#comment,你修改的comment-209就可以

    8. 哼哼猪 says:

      @zwwooooo
      嗯,现在机器人也聪明了,如果再借助一些辅助程序,不通过post方式照样全自动发送垃圾评论。

      另外你有没发现,“@用户名”有一个小小的弊端,聪明的机器人知道你使用了纯英文垃圾评论拦截,现在都不直接发了,而是随机发给已有的评论者,这样回复内容就有了“@用户名”的中文前缀,英文垃圾评论就长驱直入了

    9. 哼哼猪 says:

      @哼哼猪
      已经修改完毕,话说评论框上面那些按钮也要修改下,要不点击无效

    10. zwwooooo says:

      @哼哼猪
      囧,我忘了这桩了 :arrow: ,看来关联的东西太多了

    11. zwwooooo says:

      @哼哼猪
      沙发???哪里来的沙发?

    12. 哼哼猪 says:

      @zwwooooo
      :evil: 上次测试的,你忘了啊

  10. peascloud says:

    如果不要超链接,只要@user,删除哪部分代码?

    1. 哼哼猪 says:

      @peascloud
      $("#comment").attr("value","@" + atname + ":").focus();
      });
      改成这样,把a标签去掉就行了

  11. 这些代码我试了 好像在阿帕奇上不行

    1. zwwooooo says:

      @jerseys cheap
      跟这些无关

  12. :oops: 测试一下效果,但貌似我用上了没啥多大效果,修改了一下还是出现不了评论者的名字

    1. zwwooooo says:

      @子寒互动视觉
      注意主题的评论结构,不同自己修改下jq选择器。

  13. 郑永 says:

    今天博客也加上了这个,未来用了你的楼层号的方法,结果出了点问题,哈哈。。今天修改好了。

    1. zwwooooo says:

      @郑永
      稍微检查下就 ok 了,不复杂的。

发表评论

昵称 *

网址

B em del U Link Code Quote