玩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. carp king says:

    果然显示了!……

  2. […] 這個插件不算什麼新鮮玩意兒,是之前《为WordPress添加实时显示的Gravatar头像》中的代碼集合而成的插件。為了方便大家的使用,而不用修改模板,所以還是決定集合成插件。 […]

  3. Fanr says:

    确实啊…..显示的好快…

  4. micele says:

    真的是实时的

  5. 夏小淚 says:

    这个挺酷的!!我也去折腾折腾!!

  6. testdesu says:

    (⊙o⊙)?

  7. ylsnuha says:

    哈哈。。。才发现这么一个好的网站 先收藏了 以后多来支持

  8. 潜潜深南 says:

    哇~~~原来是这样啊

  9. 绿叶 says:

    为什么我的没显示诶。

  10. 姜轲 says:

    试试效果

  11. annhe says:

    我来测试下。

  12. wdsaf says:

    test!

  13. 皇家元林 says:

    这个不错。。。有机会试试

  14. fdferwe says:

    test

  15. 公子扶苏 says:

    如何?

  16. 我要 says:

    真的么 试试