WordPress中利用JQuery处理沙发头像

因为我的留言板是倒序,默认又只会展开最新的5条留言,对于较旧留言甚至是沙发的同学,很容易被忽略掉。我想这对沙发同学不太公平吧。昨天在看yinheli同学的《鼠标悬浮实现显示留言内容》一文(建议看看,好文章),就想到我何不把沙发的头像copy出来然后放在显眼的位置上呢,如下截图效果。

shafa screenshot WordPress中利用JQuery处理沙发头像

做法首先是你的网站加载了JQuery,然后在你需要放置沙发头像的地方添加一个<div>,内容为空即可:

<div id="shafa"></div>

然后要做的就是利用js复制沙发的头像,并把复制的内容填入上面设定的<div>内:

$(document).ready(function() {
$(".commentlist .avatar:last img").clone().appendTo("#shafa");
});

这样就可以啦,注意上面的avatar假设是你主题模板中包含头像图片的样式名称;然后:last这一处是对于象我一样的倒序留言板设定的,因为沙发的同学是在留言列表的最后;而对于顺序留言板,则改为:first

还有就是不要忘记进行CSS的样式定义。再有的是利用相同的方法你可以复制指定的内容,如沙发的留言内容,名字等,只要对应一下它们的样式名称则可。

分类:theme skill, WordPress;标签:, , ;收藏本文的永久链接

25 Responses to “WordPress中利用JQuery处理沙发头像”

  1. welee 回复此留言 2009/04/22 21:49 #comment-6165

    幸好还没睡,沙发,哈哈哈!!!

  2. Jinwen 回复此留言 2009/04/22 21:51 #comment-6166

    @welee 你厉害,真快!^_^

  3. 爱月 回复此留言 2009/04/23 05:13 #comment-6170

    哇呀呀~沙发竟然不是我~~我的头像那么好看还~

  4. zEUS. 回复此留言 2009/04/23 05:18 #comment-6171

    沙发没抢到咧... T_T

  5. 老时 回复此留言 2009/04/23 09:14 #comment-6182

    哈,高高挂。

  6. 小墨 回复此留言 2009/04/23 03:31 #comment-6168

    不过这样处理后,留言列表里反而没有沙发说的内容了。

  7. bssn 回复此留言 2009/04/23 10:04 #comment-6183

    哈哈哈,我是沙发高高挂。

  8. 西风 回复此留言 2009/04/23 12:01 #comment-6186

    越来越感觉你的主题真强大啊 哈哈 真棒啊

  9. Jinwen 回复此留言 2009/04/23 07:28 #comment-6179

    @小墨 留言列表内没有沙发内容是什么意思啊?我们也可以把沙发的内容copy一份,不过我担心有些沙发内容太多文字,影响样式,所以才不copy他们说的话。是不是这个意思呢?

  10. fendoua 回复此留言 2009/04/23 15:45 #comment-6188

    网站怎么加载jquery呢?

  11. zwwooooo 回复此留言 2009/04/23 20:00 #comment-6197

    不错的处理方法,可惜自己一点都不懂。

  12. Jinwen 回复此留言 2009/04/23 20:24 #comment-6198

    @zwwooooo 多折腾一下就懂了。。。我也是这样的。

  13. Jinwen 回复此留言 2009/04/23 23:17 #comment-6201

    @西风 谢谢呢。其实那些小功能都是平常无聊想到点,然后就找些时间折腾一下,就这样,嗯。

  14. 小墨 回复此留言 2009/04/24 03:37 #comment-6203

    我的意思是沙发说的话只有上面有,下面列表里面没有了。如果有时讨论话题有连贯性的话,新来的读者可能找不到沙发说的内容

  15. 万戈 回复此留言 2009/04/24 12:09 #comment-6210

    呵呵,挺有意思的,我的小站只是高亮管理员留言

  16. Jinwen 回复此留言 2009/04/24 07:22 #comment-6207

    @小墨 下面的列表有沙发啊!它在最底层啊。你没看到沙发的楼层?只是给折叠起来了。我这样做是怕楼层太多沙发就太低。

  17. 小墨 回复此留言 2009/04/25 06:33 #comment-6238

    @Jinwen 哦 我以为那个“我是沙发高高挂”也是沙发说的。。。@@

  18. Rui 回复此留言 2009/04/28 05:26 #comment-6303

    还真是个很有创意的想法^^

  19. 随影 回复此留言 2009/06/17 11:31 #comment-8118

    很有 创意的做法,决定在自己的博客上实践一下 看看效果如何啊

  20. 随影 回复此留言 2009/06/17 12:27 #comment-8121

    $(".commentlist .avatar:last img").clone().appendTo("#shafa"); 这句博主写错了点点吧 ,反正我是没有获取到沙发头像改了下
    $(".commentlist .avatar img:last").clone().appendTo("#first_comment"); 还有就是请问:last运算符是不是只能用于最后一个子节点啊,应该是吧!

  21. 随影 回复此留言 2009/06/17 16:00 #comment-8125

    恩 :last看来可以用在任意节点上啊 学习了饿 哈 谢谢提供思路 希望添加沙发功能后,能鼓励大家的留言啊!! 哈哈

  22. j 回复此留言 2009/11/16 14:24 #comment-10846

    :oops:


The trackbacks and pingpacks: