WordPress評論AJAX實時顯示Gravatar頭像
來源：程序員人生 發布時間：2014-03-22 00:09:10 閱讀次數：2804次
雖然我的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 -->
現在，您搞定啦！
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
