当前位置: 首页 > Wordpress > 正文

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

这个不是什么新鲜的功能了,这个功能即是实现当留言评论时,你输入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文件,在评论框里加上默认头像。


 

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


 

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

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


 

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

5. 打开footer.php,添加如下代码:


 

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

本文来自:http://devework.com/real-time-gravatar-for-wordpress.html

本文固定链接: http://web.wqz.me/24.html | 网络手抄本

该日志由 网络手抄本 于2014年06月03日发表在 Wordpress 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 添加WordPress评论输入邮箱实时显示Gravatar头像功能 | 网络手抄本
关键字: ,
【上一篇】
【下一篇】

添加WordPress评论输入邮箱实时显示Gravatar头像功能:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter