WordPress评论AJAX实时显示Gravatar头像

概述虽然我的WordPress用的是多说的评论系统，评论头像是自动采集对应账号的头像，那么没有登陆时或者使用WordPress原生的评论系统时，我们都是获取的Gravatar上的头像，可是Gravatar头像是要提交评论以后才能看到的，我们能在填完邮件地址以后就看到么?类似这样的效果：那么怎么实现呢?先分析…

虽然我的wordpress用的是多说的评论系统，评论头像是自动采集对应账号的头像，那么没有登陆时或者使用wordpress原生的评论系统时，我们都是获取的Gravatar上的头像，可是Gravatar头像是要提交评论以后才能看到的，我们能在填完邮件地址以后就看到么?类似这样的效果：

那么怎么实现呢?先分析方法，实时获得头像的方法：使用@R_403_6815@方式，当邮件输入框失焦的时候去拉取头像。其中邮箱对应的Gravatar地址为：http://www.gravatar.com/avatar/xxxx(xxxx为邮箱的md5加密值)

显示头像的方法：在评论框输入邮箱的右面的一个合适的地方增加一个div，用来显示上一步中得到的头像。具体实现：

1、因为我们在Js中对邮箱进行md5加密，所以下载md5.Js丢到你的主题目录中。

2、在你主题的comments.PHP文件中适当位置，加入如下代码：

<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&d=IDenticon&r=G" alt="gravatar" height="48" wIDth="48" />
</p>

然后我们在文件的末尾加入相应的Js代码：

<!-- 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&d=IDenticon&r=G";
newGravatar(new_ga);
}
function newGravatar(new_ga){
ga.setAttribute('src',new_ga);
}
/* ]]> */
</script>
<!-- end real time gravatar -->

现在，您搞定啦！

总结

以上是内存溢出为你收集整理的WordPress评论AJAX实时显示Gravatar头像全部内容，希望文章能够帮你解决WordPress评论AJAX实时显示Gravatar头像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。