今早 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 版本以上的自带评论嵌套
需要了解原理的可以借助 Firebug 和 jQuery 中文手册自个折腾研究。
zww
赏
oooo
or
- 本文标题:用 jQuery 实现点击回复之后显示@用户名的效果
- 本文链接:https://zww.me/archives/24817
- 发布时间:2010年01月20日 15:34
- 版权声明:除非注明,文章均为 zwwooooo 原创,转载请以链接形式标明本文地址!
沙发,终于沙发!
你这不是一直有这功能么?
@砼砼 有人要+文囧=写出来
这个暂时用不上,以后自己折腾的时候也许需要,先记着。
@Vicia 嘿嘿,我是为了解决文囧才发的,发前就知道需要的人不会有多少
twitter上果然不好抢沙发
@纯粹 twitter会稍慢,订阅最快,当然不是feedsky的
@zwwooooo twitter上也是FeedBurner直接输出RSS,时间上对比好像差不多是即时的,快慢那么一点吧
@纯粹 应该是
@zwwooooo 订阅也不快的,每次看到订阅再来,沙发早就没了。T_T 最快的是直接访问,哈哈。我今天就是碰上的。
@Vicia Feedburner速度还是很快的,基本是几秒中就更新。
@zwwooooo reader里么?我这儿为啥不行呢?我曾经试过,手动刷新也刷不出来。@_@
@Vicia reader那里不知道啊,不过feedburner是很快的,基本我发布了也就更新了
@Vicia
同上,顺便看看效果
我觉得不用jQuery也可以实现这个效果的,不过不能用嵌套生成的那个回复按钮,我还没有测试过我的想法
@bolo 这个给有加载jQuery的朋友的,呵呵。不用 jQuery 的方法我就不知道,期待你的想法测试
恭喜你终于消灭文囧了
@A.shun 哼哼
过来坐坐~
晕,刚才域名多打了个字母。
@huangjun 我已经帮你纠正
呀,这么快就出来了,太感谢了 ~~
晚上折腾下~~
@koobai 嘿嘿
@zwwooooo 我的主题函数貌似用了,后面多了个2,如果把这2去掉就正常了,但去掉之后主题评论样式就丢了~~,这应该咋改下
@zwwooooo wp_list_comments2
@koobai 你看看你的主题是不是自定义了评论样式,去function.php里面看,如果你的主题评论结构改的太大的话就要修改代码中对应的id或者class
@koobai 刚才去你博客看了下你的评论结构,汗,这主题是谁做的?怎么还用table、td、tr…… ,而且结构相当复杂化,难怪你用不了。
@zwwooooo 这主题是国外的 ~~
@koobai 我去看了,你把主题发到我邮箱吧,我明天有时间帮你看看,邮箱地址你博客有
@zwwooooo 好地,谢了 ~~已发到你邮箱,jQuery代码在all.js文件里
@koobai 已经搞定,发到你邮箱了。
@zwwooooo 嗯,已经收到替换上了,非常感觉。不过有点小问题请教下,当评论者评论时没写入网站的时(也就是用户名没链接),回复的时候不是显示@用户名,而是显示@回复~~。可能没表达清楚,如果可以,可以点击我博客上最新日志中的第一条评论看下效果~~谢谢,嘿嘿
@koobai 你试试把 find("a:first") 改为 find("span:first") 看看能否解决
@zwwooooo OK,解决了。再次感谢~~
@koobai 不用客气,举‘鼠’之劳
咦,什么叫CP党啊。
@王盼盼 Copy Paste
先收藏起来,我用的是嵌套,用@reply有必要吗?
不过方法很值得借鉴!
@万戈 我的也是嵌套,不过我的是两层而已,我觉得2层很好,你看你楼上的楼上的嵌套多么漂亮 就像论坛的一个贴。这个只是细节问题,用不用都无所谓
效果很好,酷!
jQuery很强大,我也正在学
@Timothy 我没有学,一边看手册直接cp,然后test出效果
@zwwooooo
这样很好啊,实践出真知
@Timothy 但这样就是懒得去记东西啦,要用时就要翻手册
强大,不过我用的是嵌套~
@Jutoy 我的也是嵌套啊
我来参考、学习。一时半会还看不懂先备份收藏啦!向自称是CP党的Z大童鞋学习。
文章右上角的“Leave a comment”是用了锚记,还是什么呢?希望Z大撰文赐教!
@mytion 现在用了 jQuery 来实现滚动效果
菜鸟过来看看!
@g 荒淫荒淫
我之前也用这个效果,昨天干掉了,觉得花俏.而且,加载一个js,影响打开速度.
@itlobo 因为我的评论Ajax效果本身就假载了jQuery,所以再加些效果也所谓了
@itlobo
效果如何
第二行应该是
不是zsofa.js吧?
@林晨 对,忘了替换了,粗心了
好。学习了。 拿来试试,不过貌似为了这个就多jQuery,有点划不来阿?
@柳城 这个要看你了,我的评论ajax方式本身就加载了jQuery,所以无所谓。