拽立网 – Loper主题增加输入邮箱速显头像功能

Loper主题增加输入邮箱速显头像功能，这个功能即是实现当留言评论时，你输入邮箱账号会马上显示你的gravatar头像，对于提高用户体验是有非常的帮助，特别是用户评论量非常大的用户，拽立网，如果你没使用gravatar全球通用头像那就去申请一个把很简单的，这方法是针对研究Loper主题而写，如果喜欢这功能的可以自己研究到其他主题，今天我把Loper主题增加输入邮箱速显头像功能方法分享给大家，请看以下操作！

添加前的效果图！

1.登陆你的后台管理，选择【外观】-【编辑】-【 loper: 评论 (comments.php)】

2.登陆你的后台管理，选择【外观】-【编辑】-【 loper: guestcomments.php】

【comments.php】和【guestcomments.php】2个里面都要添加下面全部代码：【</div>后面】

<!-- Loper主题增加输入邮箱速显头像-->
<div id="gravatarEmail">
<?php $email = ($user_ID) ? get_the_author_meta('user_email', $user_ID) : $comment_author_email;?>
<a href="http://en.gravatar.com" target="_blank" title="没头像？去申请自己Gravatar全国通用头像吧！"/>
<img id="gravatar-Email" src="https://en.gravatar.com/avatar/<?php echo md5($email);?>?s=60&amp;d=mm&amp;r=g"/></a></label></div>
<script src="<?php bloginfo('template_url');?>/scripts/gravatar.js"></script>
<script type="text/javascript">
var ga = document.getElementById("gravatar-Email");
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://cn.gravatar.com/avatar/" + email_md5 +"?s=60&amp;d=mm&amp;r=g";
newGravatar(new_ga);}
function newGravatar(new_ga){ga.setAttribute('src', new_ga);}
</script>

3.登陆你的后台管理，选择【外观】-【编辑】-【 loper: 样式表 (style.css)】

直接添加下面全部代码：【位置随便】

/*Loper主题增加输入邮箱速显头像*/
#gravatarEmail {position:absolute;margin:-110px 0px 0px 534px;}
#gravatarEmail img{width: 50px;height: 50px;border: 1px solid #ddd;padding: 3px;}
 /*Loper主题邮箱头像旋转变圆*/
#gravatarEmail img { z-index: 999;transition: all 0.3s ease-in 0s;}
#gravatarEmail img:hover{ border-radius: 100px; -webkit-transform: rotate(720deg); }

4.然后上传2个JS文件，gravatar.js【loper主题】-【scripts文件夹目录里】

都打包好给大家使用，必须解压在上传！

增加后的效果图！