2010年01月20日 176条评论

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

    :arrow: 弱弱滴问哈,能帮俺解释下代码不?俺看不懂 :shock:

    1. zwwooooo says:

      @默玉
      你的太多父元素了,一个parent不行,得用parents,具体翻查jquery手册

  2. jquery点击回复加上@xxx | YY&Heson的双人WordPress情侣博客 says:

    [...] @reply js by zwwooooo */ jQuery(document).ready(function($){ //Begin jQuery $('.reply').click(function() { var atid = [...]

  3. [...] 我很长时间以来计划在自己的主题中,增加“回复wordpress评论加@”的小功能。在一个月以前写的《进一步美化强化主题的思路》中,就已提到这一点啦。为此,我特地收藏了Jinwen的《利用JQuery为WordPress的嵌套回复添加@reply功能》一篇文章。昨天晚上又谷歌到forece的《让 WordPress 回复评论自动加上@符号(代码版)》一文,才发现Zwwooooo也写过一篇《用 jQuery 实现点击回复之后显示@用户名的效果》。哈,这样参考文献足够多了,立刻动手来改吧。 [...]

  4. Junan says:

    :grin: 很不错~~我要折腾了~~

    1. zwwooooo says:

      @Junan
      慢慢折腾

  5. jafok says:

    好像多此一举了,每个回复你本来就在里面嵌套回复了,就不用家@了

    1. zwwooooo says:

      @jafok
      这主要是考虑无限嵌套后的处理,或者同一层楼讨论过多不至于混乱,多此一举会鲜明很多。

  6. 我现在能取到id,娶不到name,不知道是改怎么选择。

    1. zwwooooo says:

      @闲云野鹤
      现在搞定没有啊?

    2. @zwwooooo
      现在搞定了,不过又有棘手的问题了,太郁闷了。

    3. zwwooooo says:

      @闲云野鹤
      折腾不断,哈哈

    4. dh says:

      @闲云野鹤
      这个可以有几个?

    5. 。潇 says:

      @zwwooooo 还是有点纳闷,为什么回复的时候,评论不会超过两层?是你后台设置的不超过2层吗?如果是那样,可是那个第二层的回复按钮是怎么生成的? :?: 求解

    6. zwwooooo says:

      @。潇
      不是,我主题的评论代码我限制了。

  7. Alex says:

    你好,我想问一下,我用了你的代码,取消回复后评论框里还是有新添加的@作者,怎么回事呢,我模版用的wp_list_comments

    1. Alex says:

      @Alex
      这个问题解决了,有个新问题:就是@alex后面有7个空格,我把JS里的空格去掉了还有7个。 :???:

    2. zwwooooo says:

      @Alex
      因为你的cite里面有图片,不单是评论者名。把comment-info-detector插件的信息移开到其他地方

    3. Alex says:

      @zwwooooo
      谢谢啊!

    4. Alex says:

      @zwwooooo
      有个问题啊,我的评论是调用WP默认的,就一条函数:
      咋整啊!

    5. Alex says:

      @zwwooooo
      对不起,刚才发的那条函数没发出来:《?php wp_list_comments();?》

    6. zwwooooo says:

      @Alex
      一样的,分析一下结构就可以了

  8. 学习了~
    顺便试一试你的评论效果噢...

    1. zwwooooo says:

      @陨落de芳菲
      感觉怎么样?

  9. 我直接到你的JS合并放到我已加载过的JS里毫无反应

    1. zwwooooo says:

      @yesureadmin
      注意自己主题的html结构

  10. [...] 大 发表评论 (0) 查看评论 用了ZWW大哥的主题以后就一直开始折腾了,看到他的网站点击回复按钮会直接显示@用户名的效果,所以就把相关的代码转过来,做个笔记。更多的信息可以参考他的这篇文章(具体效果可以回复这篇文章看看) [...]

  11. [...] 感谢以下朋友对技术或者口粮方面的帮助,他们写了一些关于wordpress的东西让人很受用:一向都没良心的、万戈、willin、木木木木、zwwooooo、西门G 以及伟大的 google 和 W3Cschool. [...]

  12. WordPress中Mail To Commenter插件的回复邮件样式 | 乾坤 Blog says:

    [...] ZWW提供的jQuery代码在这里: /* @reply js by zwwooooo */ jQuery(document).ready(function($){ [...]

  13. [...] ZWW提供的jQuery代码在这里: /* @reply js by zwwooooo */ jQuery(document).ready [...]

  14. solazy says:

    我怎么从哪都是搜索到你的网页 :arrow:

    1. zwwooooo says:

      @solazy
      那就先我这找找,找不到才去搜吧,哈

  15. solazy says:

    刚刚试了一下,第6行可以这样改:
    改成 \n
    然后把前面的空格删除掉

    这样应该比较完美吧 :mrgreen:

    1. zwwooooo says:

      @solazy
      \n是换行,这个看需求了,有人喜欢名字后面接着评论

  16. liveme says:

    大叔,我那里@了之后,没有评论ID和评论者的名称,像这样“@ ”,怎么回事呢?

    1. liveme says:

      忘记HTML不能直接贴了 :arrow:
      贴图

    2. liveme says:

      @liveme 不支持贴图?? :arrow: …………

    3. zwwooooo says:

      @liveme
      说明你的评论结构不是WP默认那种,你要根据你的主题结构调整jQuery的选择器。

    4. 球犯 says:

      @zwwooooo
      我是也是这情况 是3.2的默认主题 不知道怎么改呢?

    5. zwwooooo says:

      @球犯
      要稍微懂点jQuery的选择器

    6. 球犯 says:

      @zwwooooo
      不懂。。自己瞎折腾一下试试。。

  17. 感觉嵌套的效果已经足够了,@的效果很是多余了!!-:G

    1. zwwooooo says:

      @G字头老大
      我这只有二级的,比较需要,呵呵

  18. [...] 放狗搜了以后,在zww大叔那找到了为评论自动添加 “@对象”的方法   见这里 [...]

  19. [...] 这个功能在老早就在很多地方都看到了,想有空了也搞过来玩玩。这个在搜索相关文章的时候也是个麻烦事儿啊,搜索引擎会忽略掉@符号,颇费周折的找到了大概两篇文章,一个是zwwooooo 的用 jQuery 实现点击回复之后显示@用户名的效果,教程很直白,画瓢,但效果却没有出来,很无奈(悲催的总是我)…… 另一个是MG12的WordPress 评论的 @ 回复,主要是介绍了实现的原理,但具体的操作处理却不得而知,对于小白只能望而兴叹干瞪眼。 [...]

  20. zoe says:

    :!:
    点回复传递的是空ID和空用户名。。是何原因?
    @
    就是这样..

    1. zwwooooo says:

      jQuery没有获取到用户名,你要针对你的主题写jQuery选择器

发表评论

昵称 *

网址

B em del U Link Code Quote