You are here: Home » All Categories » WordPress » WordPress » WP Trick » 用 jQuery 实现点击回复之后显示@用户名的效果

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

Jan 20th, 2010 15:34 | Leave a comment?(149) Go to comments

今早 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

Filed under

WordPress, WP Trick

| Tags:

, ,

Related Posts

Most Popular

149 Comments.

⊕Leave a comment?
  1. Vicia Vicia Opera 10.10Windows XP

    沙发,终于沙发!

    沙发!软软很舒服!1
  2. Vicia Vicia Opera 10.10Windows XP

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

    板凳!有点硬!2
    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

  3. 纯粹 纯粹 Opera 10.10Windows XP

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

    地板!又硬又冷!3
  4. Socekin Socekin Firefox 3.5.7Windows 7

    @Vicia
    同上,顺便看看效果

    4楼
  5. bolo bolo Firefox 3.5.7Windows 7

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

    5楼
    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

  6. A.shun A.shun Opera 10.10Windows XP

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

    7楼
  7. huangjun huangjun Internet Explorer 6.0Windows Server 2003

    过来坐坐~

    8楼
  8. huangjun huangjun Internet Explorer 6.0Windows Server 2003

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

    9楼
  9. koobai koobai Firefox 3.6Windows 7

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

    10楼
    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

      @koobai 嘿嘿 :idea:

    • koobai koobai Firefox 3.6Windows 7

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

    • koobai koobai Firefox 3.6Windows 7

      @zwwooooo wp_list_comments2

    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

    • koobai koobai Firefox 3.6Windows 7

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

    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

    • koobai koobai Firefox 3.6Windows 7

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

    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

    • koobai koobai Firefox 3.6Windows 7

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

    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

    • koobai koobai Firefox 3.6Windows 7

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

    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

  10. 王盼盼 王盼盼 Firefox 3.5.7Windows XP

    咦,什么叫CP党啊。

    11楼
  11. 万戈 万戈 Firefox 3.5.7Windows XP

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

    12楼
    • zwwooooo zwwooooo Firefox 3.5.7Windows XP

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

  12. Dianso Dianso Google Chrome 4.0.303.0Windows XP

    效果很好,酷!

    13楼
  13. Timothy Timothy UC Browser 7.0.2.37Windows CE

    jQuery很强大,我也正在学

    14楼
  14. Jutoy Jutoy Google Chrome 4.0.295.0Windows 7

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

    15楼
  15. mytion mytion Firefox 3.6Windows XP

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

    16楼
  16. mytion mytion Firefox 3.6Windows XP

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

    17楼
  17. g g Firefox 3.5.7Windows XP

    菜鸟过来看看!

    18楼
  18. itlobo itlobo Firefox 3.6Windows XP

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

    19楼

Leave a Reply


Trackbacks and Pingbacks: