今早 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 原创,转载请以链接形式标明本文地址!
感觉嵌套的效果已经足够了,@的效果很是多余了!!-:G
@G字头老大
我这只有二级的,比较需要,呵呵
点回复传递的是空ID和空用户名。。是何原因?
@
就是这样..
jQuery没有获取到用户名,你要针对你的主题写jQuery选择器
忘了能解析HTML了。。去掉了a的
a href="#">@ a
您好,来请教了,看到这个代码很想用,可是试了几天怎么都不行,请帮助,谢谢。
我的评论结构上这样的:
DaoFa :
2012年2月3日 at 13:04
这里是评论内容。
Reply
对不起代码没有显示,再发一次。
您好,来请教了,看到这个代码很想用,可是试了几天怎么都不行,请帮助,谢谢。
我的评论结构上这样的:
《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》
@DaoFa
你的结构不完整
我成功了,谢谢你哦
@hemingway
不用客气,慢慢折腾
失败了Q_Q,帮忙检查下我的博客吧。
@御宅暴君
文中已经说了,需要注意自己主题的评论结构。
看不懂= =
果断沙发了,嘿嘿
@哼哼猪
嘿嘿,我测试下你博客的快捷输入,看来档不到人工垃圾评论。
请教一个问题,最近各种人工垃圾评论,刚刚我把"#comment"改成了"#h_comment",评论什么都正常,但是这个“@用户名”这个效果有点不正常,光标焦点跑到了评论框开始位置,而不是正常的“@用户名”后面的位置,求助解决方法
@哼哼猪
改jQ代码或者别改ID。人工垃圾怎么能防囧,就像你现在评论发个广告哪里能防呢,除非你带2个链接或者没头像自然就不会放出来。
@zwwooooo
我说意思不是纯粹的人工,如果都是人工输入的那真没法防。
我意思是通过JS快捷发布垃圾评论的,就像我上面的回复一样,那些都是点一下就发出来的。而获取的值就是评论的ID,所以我才想看能不能修改默认的ID,预防半人工的垃圾评论
@zwwooooo
点击回复后的光标位置该怎么修改呢?
这两天好多英文垃圾评论,本来我用了防止英文垃圾评论,不过因为“@用户名”这个回复前缀已经包含了中文,造成了英文评论畅通无阻
@哼哼猪
jQ找#comment啊,替换为你更改过的那个
@哼哼猪
原来还有这种半人工,我说怎么那么多没意义的评论(跟文章无关,说了等于白说的评论),我也改一下好了,哈。
@zwwooooo
奇怪我没在jQ里面找到#comment,你修改的comment-209就可以
@zwwooooo
嗯,现在机器人也聪明了,如果再借助一些辅助程序,不通过post方式照样全自动发送垃圾评论。
另外你有没发现,“@用户名”有一个小小的弊端,聪明的机器人知道你使用了纯英文垃圾评论拦截,现在都不直接发了,而是随机发给已有的评论者,这样回复内容就有了“@用户名”的中文前缀,英文垃圾评论就长驱直入了
@哼哼猪
已经修改完毕,话说评论框上面那些按钮也要修改下,要不点击无效
@哼哼猪
囧,我忘了这桩了 ,看来关联的东西太多了
@哼哼猪
沙发???哪里来的沙发?
@zwwooooo
上次测试的,你忘了啊
如果不要超链接,只要@user,删除哪部分代码?
@peascloud
$("#comment").attr("value","@" + atname + ":").focus();
});
改成这样,把a标签去掉就行了
这些代码我试了 好像在阿帕奇上不行
@jerseys cheap
跟这些无关
测试一下效果,但貌似我用上了没啥多大效果,修改了一下还是出现不了评论者的名字
@子寒互动视觉
注意主题的评论结构,不同自己修改下jq选择器。
今天博客也加上了这个,未来用了你的楼层号的方法,结果出了点问题,哈哈。。今天修改好了。
@郑永
稍微检查下就 ok 了,不复杂的。