Old

用 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 中文手册自个折腾研究。

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/24817

176 comments

  1. Vicia Vicia Opera 10 Opera 10 Windows XP Windows XP

    沙发,终于沙发!

    61楼
  2. Vicia Vicia Opera 10 Opera 10 Windows XP Windows XP

    这个暂时用不上,以后自己折腾的时候也许需要,先记着。 :razz:

    62楼
  3. 纯粹 纯粹 Opera 10 Opera 10 Windows XP Windows XP

    :evil: twitter上果然不好抢沙发

    63楼
  4. ......
  5. zoe zoe Google Chrome 15 Google Chrome 15 Windows XP Windows XP

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

    61楼
  6. DaoFa DaoFa Firefox 9 Firefox 9 Windows 7 Windows 7

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

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

    Reply

    62楼
  7. DaoFa DaoFa Firefox 9 Firefox 9 Windows 7 Windows 7

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

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

    《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》

    63楼
  8. hemingway hemingway Firefox 10 Firefox 10 Windows 7 Windows 7

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

    65楼
  9. 御宅暴君 御宅暴君 Google Chrome 18 Google Chrome 18 Windows 7 Windows 7

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

    66楼
  10. OyolaSport OyolaSport Firefox 16 Firefox 16 Windows XP Windows XP

    看不懂= =

    68楼
  11. 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

    果断沙发了,嘿嘿

    69楼
    • 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

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

    • zwwooooo zwwooooo Firefox 16 Firefox 16 Windows 8 Windows 8

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

    • 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

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

    • 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

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

    • zwwooooo zwwooooo Firefox 16 Firefox 16 Windows 8 Windows 8

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

    • zwwooooo zwwooooo Firefox 16 Firefox 16 Windows 8 Windows 8

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

    • 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

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

    • 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

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

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

    • 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

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

    • zwwooooo zwwooooo Firefox 16 Firefox 16 Windows 8 Windows 8

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

    • zwwooooo zwwooooo Firefox 16 Firefox 16 Windows 8 Windows 8

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

    • 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

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

  12. peascloud peascloud Google Chrome 22 Google Chrome 22 Windows 8 Windows 8

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

    70楼
    • 哼哼猪 哼哼猪 Google Chrome 23 Google Chrome 23 Windows 7 Windows 7

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

  13. jerseys cheap jerseys cheap Firefox 17 Firefox 17 Windows XP Windows XP

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

    71楼
  14. 子寒互动视觉 子寒互动视觉 Firefox 19 Firefox 19 Windows XP Windows XP

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

    72楼
  15. 郑永 郑永 Firefox 19 Firefox 19 Windows XP Windows XP

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

    73楼

Leave a Reply