WordPress评论AJAX实时显示Gravatar头像

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

那么怎么实现呢?先分析方法,实时获得头像的方法:使用ajax方式,当邮件输入框失焦的时候去拉取头像。其中邮箱对应的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的默认接口路由改掉,愿意是默认的带一个 wp...
wordpress自定义分类法之后,我看到链接都自动在后面添加了一...
事情是这样的,我用 get_post_type 函数创建了一个自定义分类...
最近网站莫名其妙的被顶上了,过一个多小时,就注册一个账号...
最近服务器要到期了,就想着把网站转移到另外一台服务器,本...
今天在写wordpress的接口,然后碰到个奇怪的问题,怎么访问都...