WordPress评论AJAX实时显示Gravatar头像
发布时间:2020-12-14 14:11:38 所属栏目:wordpress 来源:网络整理
导读:虽然我的WordPress用的是多说的评论系统,评论头像是自动采集对应账号的头像,那么没有登陆时或者使用WordPress原生的评论系统时,我们都是获取的Gravatar上的头像,可是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 --> 现在,您搞定啦! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |