玩WordPress » 技巧方法 » 2009 » 09 » 12 » 为WordPress添加实时显示的Gravatar头像

为WordPress添加实时显示的Gravatar头像

两天前折腾出一个用JavaScript实时显示Gravatar头像的效果。也就是说留言时,你输入email后,就会实时显示你的Gravatar头像。你要说这个效果有什么用,我的答案是“没什么用,只是用来耍耍酷而已 😆 ”。

把这个效果加入Wordpress也不费什么事,仅仅需要四步走:

  1. 打开主题的comments.php文件,在适当的位置,如我的主题是下面代码的上方:

    <?php if ( get_option('comment_registration') && !$user_ID ) : ?>

    加入下面的代码:

        <p>
            <?php $useremail = ($user_ID) ? get_the_author_meta('user_email', $user_ID) : $comment_author_email;?>
            <img id="real-time-gravatar" src="http://www.gravatar.com/avatar/<?php echo md5($useremail);?>?s=48&amp;d=identicon&amp;r=G" alt="gravatar" height="48" width="48" />
        </p>
    

    PS:上面代码中的48可以修改为你想要的Gravatar头像的大小尺寸。

  2. 接下来,同样是在comments.php中,拉到最后一个输入框(input标签)的位置(这个位置是最佳的),也就是:

    <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
            <label for="url"><small>Website</small></label></p>

    在这段代码的下面,加入:

    <!-- real time gravatar -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js-md5.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */
    var ga = document.getElementById("real-time-gravatar");
    var email = document.getElementById("email");
    var Ka=navigator.userAgent.toLowerCase();
    var chrome = Ka.indexOf('webkit') != -1;
    
    if (chrome) email.onblur = changeGravatar;
    else email.onchange = changeGravatar;
    
    function changeGravatar(){
        email_value = email.value;
        email_md5 = hex_md5(email_value);
        new_ga = "http://www.gravatar.com/avatar/" + email_md5 +"s=48&amp;d=identicon&amp;r=G";
        newGravatar(new_ga);
    }
    
    function newGravatar(new_ga){
        ga.setAttribute('src', new_ga);
    }
    /* ]]> */
    </script>
    <!-- end real time gravatar -->

    PS:上面代码中的48,同样改成你想要的Gravatar头像的大小尺寸。

  3. 下载js-md5.js,并把它上传到主题文件夹中。
  4. 这里就已经完成了!

测试效果,在这里留言试试。

78 Responses to “为WordPress添加实时显示的Gravatar头像”

  1. […] 为WordPress添加实时显示的Gravatar头像 Category: 站长相关 Tag: gravatar, javascript, md5 […]

  2. aisinvon says:

    来试试鸟……

  3. joojen says:

    这个倒是很炫,可以试试

  4. chen says:

    试了下,很好啊。

  5. 柳净园 says:

    果然实时,比较爽!

  6. Kusanagi says:

    不错啊,Cool!

  7. lhb5883 says:

    不错!有意思!

  8. aiv1 says:

    嘿嘿,好像最新版本的wordpress自带的就有这个功能呀!斑竹你out了。

  9. 浮生 says:

    凑够热闹~~~

  10. ycren says:

    还真是OK了!

  11. seri says:

    ^^很好的方法!偶试试!

  12. FreshOutlook says:

    看看实际效果

  13. 精灵 says:

    厉害,很好玩

  14. […] 为 WordPress 添加实时显示的 Gravatar 头像 […]

  15. Ambrosino says:

    还真是OK了!;

  16. underone says:

    这个好赞…

  17. YOYO says:

    看起来不错嘛,我也试试。

  18. […] 为 WordPress 添加实时显示的 Gravatar 头像 […]

  19. 猪头 says:

    不错的玩法,只是貌似用处不太大

  20. eo says:

    很好啊

  21. wucheng says:

    测试

  22. 小cake says:

    有实时吗?

  23. […] 留言测试来这里 为WordPress添加实时显示的Gravatar头像 […]

  24. gray13 says:

    没有这个文件啊

  25. Kioto says:

    每次我的头像都显示不出来,不知道这次怎么样。

    • 冰古 says:

      抱歉,我上次搬主机的时候把那个js文件弄丢了,所以效果出不来。

      • Kioto says:

        其实吧,是我自己悲剧了…我昨天发现我把我的gravatar头像的级别设置成了PG…所以有的显示的出来有的显示不出来…= =

  26. Kioto says:

    如此悲剧。

  27. xiao3 says:

    怎么用它显示一次以后后面还是显示的是评论者头像呢?

  28. bonlly says:

    我的默认人像都出不来

  29. 无聊 says:

    测试

  30. 海派 says:

    不错,找到了。。

  31. 文夕 says:

    好玩,看起来不错~

  32. 山茶 says:

    呵呵,你这个效果不错啊!

  33. SErHo says:

    很有趣,很Cool

  34. WangJiaRong says:

    这个有意思
    O(∩_∩)O:roll: 😮
    I Like!

  35. says:

    测试下,头像是随机的吗

  36. cyc says:

    测试一下

  37. 阡陌交通 says:

    确实酷!mail地址刚输完,头像就出现了,
    跟楼主学了好多东西,谢谢啦!

  38. HI says:

    试试看

  39. denver0sun says:

    h

  40. 河蟹 says:

    哈,果然好使~~~