实现方法一：

把这个效果加入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;?>
        ?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、这里就已经完成了！

实现方法二：
1. 将如下代码加到functions.php文件，在评论框里加上默认头像。

add_filter('comment_form_top', 'show_gravatar');
function show_gravatar() {
	global $current_user;
	get_currentuserinfo();
	echo get_avatar( $current_user->user_email , 40 );  // 40是指头像的尺寸，第4步也一样
}

2、用CSS设置下头像的位置，这里就固定在右上角。

#commentform { position: relative }
#commentform .avatar { position: absolute; top: 0; right: 20px }

3、下载md5-min.js，保存到主题文件夹里。

4. 重命名刚才的文件为gravatar.js，在这个文件的最后追加如下代码：

if (document.getElementById("email")) {
    document.getElementById("email").onblur = function () {
        if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(this.value)) document.getElementById("commentform").getElementsByTagName("img")[0].src = "http://www.gravatar.com/avatar/" + hex_md5(this.value) + "?d=mm&s=40";
    };
};

如果找到email输入框则当光标焦点移出email输入框时，用正则测试输入的是否是email格式，如果是就将之前插入的图片地址改为新生成的地址。

5. 打开footer.php，添加如下代码：

<?php if ( is_singular() && comments_open() ) { ?> //判断是不是单独的post页面且评论打开
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/gravatar.js"></script>
<?php } ?>

转自https://devework.com/real-time-gravatar-for-wordpress.html