DeveWork

添加WordPress评论输入邮箱实时显示Gravatar头像功能

Jeff

这个不是什么新鲜的功能了，这个功能即是实现当留言评论时，你输入email后，就会实时显示你的Gravatar头像。对于提高用户体验是有非常的帮助，特别是用户评论量非常大的用户。Jeff 本来也考虑在本站DeveWork.com 的主题上实现它，但看到需要加载7kb左右的javascript文件，我就不干了——虽然7kb不大，但我在意。自己也权衡一下是否为自己的主题添加这个功能吧~

实现原理：实时显示是用JavaScript来实现的，Gravatar图片的链接没有什么秘密，很简单就能得到，“http://www.gravatar.com/avatar/”加上用md5转换email得到的一组字符串，就是该email对应的Gravatar头像图片。关键的是JavaScript没有内置md5加密函数，但也很幸运，早就有人编写了JavaScript的md5函数。既然有了md5函数，那实现实时显示Gravatar头像也就变得简单了，只需用onchange捕获email输入框中的变化，然后用hex_md5函数转换email地址并组合成对应的Gravatar图片链接，最后用setAttribute改变img的src地址就搞定了。

网络上一共有两种方法，都是大同小异的，由于不同主题的相关代码不同，如实添加代码后功能是否有效还需要多调试，要善于利用浏览器的开发者工具。

效果演示：点击查看

实现方法一：

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

加入下面的代码：

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

2、接下来，同样是在comments.php中，拉到最后一个输入框（input标签）的位置（这个位置是最佳的），也就是：

在这段代码的下面，加入：

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

3、下载js-md5.js，并把它上传到主题文件夹中。完成！

 

实现方法二：

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，添加如下代码：

 //判断是不是单独的post页面且评论打开

本文非原创，方法一来源：点击查看，感谢原作者。方法二未知。