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

    沙发,终于沙发!

    1. 砼砼 says:

      你这不是一直有这功能么?

    2. zwwooooo says:

      @砼砼 有人要+文囧=写出来

  2. Vicia says:

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

    1. zwwooooo says:

      @Vicia 嘿嘿,我是为了解决文囧才发的,发前就知道需要的人不会有多少

  3. 纯粹 says:

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

    1. zwwooooo says:

      @纯粹 twitter会稍慢,订阅最快,当然不是feedsky的

    2. 纯粹 says:

      @zwwooooo twitter上也是FeedBurner直接输出RSS,时间上对比好像差不多是即时的,快慢那么一点吧

    3. Vicia says:

      @zwwooooo 订阅也不快的,每次看到订阅再来,沙发早就没了。T_T 最快的是直接访问,哈哈。我今天就是碰上的。

    4. zwwooooo says:

      @Vicia Feedburner速度还是很快的,基本是几秒中就更新。

    5. Vicia says:

      @zwwooooo reader里么?我这儿为啥不行呢?我曾经试过,手动刷新也刷不出来。@_@

    6. zwwooooo says:

      @Vicia reader那里不知道啊,不过feedburner是很快的,基本我发布了也就更新了

  4. Socekin says:

    @Vicia
    同上,顺便看看效果

  5. bolo says:

    我觉得不用jQuery也可以实现这个效果的,不过不能用嵌套生成的那个回复按钮,我还没有测试过我的想法

    1. zwwooooo says:

      @bolo 这个给有加载jQuery的朋友的,呵呵。不用 jQuery 的方法我就不知道,期待你的想法测试

  6. A.shun says:

    恭喜你终于消灭文囧了 :lol:

  7. huangjun says:

    过来坐坐~

  8. huangjun says:

    晕,刚才域名多打了个字母。

    1. zwwooooo says:

      @huangjun 我已经帮你纠正

  9. koobai says:

    呀,这么快就出来了,太感谢了 :wink: ~~
    晚上折腾下~~ :mrgreen:

    1. koobai says:

      @zwwooooo 我的主题函数貌似用了,后面多了个2,如果把这2去掉就正常了,但去掉之后主题评论样式就丢了~~,这应该咋改下

    2. koobai says:

      @zwwooooo wp_list_comments2

    3. zwwooooo says:

      @koobai 你看看你的主题是不是自定义了评论样式,去function.php里面看,如果你的主题评论结构改的太大的话就要修改代码中对应的id或者class

    4. zwwooooo says:

      @koobai 刚才去你博客看了下你的评论结构,汗,这主题是谁做的?怎么还用table、td、tr…… :arrow: ,而且结构相当复杂化,难怪你用不了。

    5. koobai says:

      @zwwooooo 这主题是国外的 :mrgreen: ~~

    6. zwwooooo says:

      @koobai 我去看了,你把主题发到我邮箱吧,我明天有时间帮你看看,邮箱地址你博客有

    7. koobai says:

      @zwwooooo 好地,谢了 :neutral: ~~已发到你邮箱,jQuery代码在all.js文件里

    8. zwwooooo says:

      @koobai 已经搞定,发到你邮箱了。

    9. koobai says:

      @zwwooooo 嗯,已经收到替换上了,非常感觉。不过有点小问题请教下,当评论者评论时没写入网站的时(也就是用户名没链接),回复的时候不是显示@用户名,而是显示@回复~~。可能没表达清楚,如果可以,可以点击我博客上最新日志中的第一条评论看下效果~~谢谢,嘿嘿

    10. zwwooooo says:

      @koobai 你试试把 find("a:first") 改为 find("span:first") 看看能否解决

    11. koobai says:

      @zwwooooo OK,解决了。再次感谢~~ :wink:

    12. zwwooooo says:

      @koobai 不用客气,举‘鼠’之劳 :mrgreen:

  10. 王盼盼 says:

    咦,什么叫CP党啊。

  11. 万戈 says:

    先收藏起来,我用的是嵌套,用@reply有必要吗?
    不过方法很值得借鉴!

    1. zwwooooo says:

      @万戈 我的也是嵌套,不过我的是两层而已,我觉得2层很好,你看你楼上的楼上的嵌套多么漂亮 :lol: 就像论坛的一个贴。这个只是细节问题,用不用都无所谓 :lol:

  12. Dianso says:

    效果很好,酷!

  13. Timothy says:

    jQuery很强大,我也正在学

    1. zwwooooo says:

      @Timothy 我没有学,一边看手册直接cp,然后test出效果

    2. Timothy says:

      @zwwooooo
      这样很好啊,实践出真知

    3. zwwooooo says:

      @Timothy 但这样就是懒得去记东西啦,要用时就要翻手册

  14. Jutoy says:

    强大,不过我用的是嵌套~

    1. zwwooooo says:

      @Jutoy 我的也是嵌套啊

  15. mytion says:

    我来参考、学习。一时半会还看不懂先备份收藏啦!向自称是CP党的Z大童鞋学习。

  16. mytion says:

    文章右上角的“Leave a comment”是用了锚记,还是什么呢?希望Z大撰文赐教!

    1. zwwooooo says:

      @mytion 现在用了 jQuery 来实现滚动效果

  17. g says:

    菜鸟过来看看!

    1. zwwooooo says:

      @g 荒淫荒淫

  18. itlobo says:

    我之前也用这个效果,昨天干掉了,觉得花俏.而且,加载一个js,影响打开速度.

    1. zwwooooo says:

      @itlobo 因为我的评论Ajax效果本身就假载了jQuery,所以再加些效果也所谓了

    2. 动力火车 says:

      @itlobo
      效果如何

  19. 林晨 says:

    第二行应该是

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

    不是zsofa.js吧?

    1. zwwooooo says:

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

  20. 柳城 says:

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

    1. zwwooooo says:

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

发表评论

昵称 *

网址

B em del U Link Code Quote