即时显示评论者gravatar头像

先上图:

用途:在用户输入邮箱地址后即时显示其Gravatar头像。

再上代码(2011年26日16时55分修正,添加显示已登录用户头像的支持):
先上传md5-min.js到当前主题的js目录下面(如果没有就新建一个吧)。
md5-min.js 下载:

md5-min.js (5.2 KB)

再把下面代码添加到当前主题的functions.php文件中:
2011/04/28 修正代码
支持已评论用户、已登录用户、和正在输入的用户的头像即时显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
######## start #########gravatar 即时显示 by 荒野无灯 #####js 参考 live-gravatar##########
function show_gravatar_instantly()
{
global $post;
$default_hash='d41d8cd98f00b204e9800998ecf8427e';
if(is_page() || is_single() )
{
$user = wp_get_current_user();
if ( $user->ID ) {
    if(!empty( $user->user_email ) )
        $default_hash = md5( $user->user_email );
}
$md5_js=get_stylesheet_directory_uri().'/js/md5-min.js';
echo <<<EOT
<script type="text/javascript" src="{$md5_js}"> </script>
<script type="text/javascript">
    jQuery(function($) {
        var comment_bcolor = $('#comment').css('background-color');
        var email_hash = "{$default_hash}";
        var gravatar = 'http://www.gravatar.com/avatar/' + email_hash + '?d=' + '' + '&#038;s=' + '48';
        if( /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/.test( $('#email').val() ))
            {
            email_hash =  hex_md5( $('#email').val() );
            gravatar = 'http://www.gravatar.com/avatar/' + email_hash + '?d=' + '' + '&#038;s=' + '48';
            }
        $('#email').focusout(function() {
            email_hash =  hex_md5( $(this).val() );
            gravatar = 'http://www.gravatar.com/avatar/' + email_hash + '?d=' + '' + '&#038;s=' + '48';
            $('#comment').css({
                'background': 'url("' + gravatar + '") no-repeat 95% 20%',
                'background-color': comment_bcolor
            });
        });

        $('#comment').css({
            'background': 'url("' + gravatar + '") no-repeat 95% 20%',
            'background-color': comment_bcolor
        });
    });
</script>
EOT
;
}
}
add_action('wp_print_footer_scripts','show_gravatar_instantly',99);
######## end #########gravatar 即时显示 by 荒野无灯 ###############

以下是以前的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
######## start #########gravatar 即时显示 by 荒野无灯 #####js 参考 live-gravatar##########
function show_gravatar_instantly()
{
global $post;
$default_hash='d41d8cd98f00b204e9800998ecf8427e';
if(is_page() || is_single() )
{
$user = wp_get_current_user();
if ( $user->ID ) {
    if(!empty( $user->user_email ) )
        $default_hash = md5( $user->user_email );
}
$md5_js=get_stylesheet_directory_uri().'/js/md5-min.js';
echo <<<EOT
<script type="text/javascript" src="{$md5_js}"> </script>
<script type="text/javascript">
    var gravatar = 'http://www.gravatar.com/avatar/{$default_hash}?d=&#038;s=48';
    jQuery(function($) {
        var comment_bcolor = $('#comment').css('background-color');
        $('#email').focusout(function() {
            var email_content =  $(this).val();
            gravatar = 'http://www.gravatar.com/avatar/' + hex_md5(email_content) + '?d=' + '' + '&#038;s=' + '48';
            $('#comment').css({
                'background': 'url("' + gravatar + '") no-repeat 95% 20%',
                'background-color': comment_bcolor
            });
        });

        $('#comment').css({
            'background': 'url("' + gravatar + '") no-repeat 95% 20%',
            'background-color': comment_bcolor
        });
    });
</script>
EOT
;
}
}
add_action('wp_print_footer_scripts','show_gravatar_instantly',99);
######## end #########gravatar 即时显示 by 荒野无灯 ###############

最后,检查下你当前所用主题,footer.php 文件中有木有 这么一句:

1
<?php wp_footer(); ?>

如果木有,就在

1
</body>

前加上吧。

实现此功能需要 jquery库支持,如你的主题没有加载请注意加载。
注: focusout 事件需要 jquery 1.4 以上版本的支持!

更多
22 Responses Post a comment
  1. 倡萌

    新主题没用这个功能?看不到哦

  2. 王笨笨

    上面的代码放到functions.php中以保存就出错 :???:

  3. 。潇

    换了一个Jquery版本,还是不行。为什么啊 :?:

  4. 。潇

    木有啊,我自己在看看,是不是Jquery的版本问题。

  5. 蜗牛

    这个好。顺便问下。博主是不是用了下载插件?

  6. 荒野无灯

    都是设置背景的,不可能共存的。只有替代方法,比如在email旁边新建一DIV,指定其ID,然后把上面的代码中的#comment 替换为你指定的ID了。

  7. coldplains

    hi
    我装了你这个后,就不能跟http://qingge.de/20110217/619.html 这个文章中说的评论框背景共存了,有什么方法可以共存么?

  8. 荒野无灯

    PS:我博客以前用的是1.3.2版的jQuery ,木有 focusout 介个事件,肯定看不到头像啦 :mrgreen:

  9. 荒野无灯

    我刚才也试了下,知道你为甚么木有看到了。是因为JS缓存木有更新。我JS系用PHP输出的,默认缓存30天。。。删除缓存才看到了

  10. 万戈

    我的头像呢头像呢头像呢 :cool:

  11. 荒野无灯

    不错的主意,用ajax比用JS 的 md5 要少加载一个文件

  12. winy

    跟我用的一样,我还以为是ajax响应的 :mrgreen:

  13. Dianso

    我是用的插件完成的这个效果,收藏下

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS