为WordPress添加实时显示的Gravatar头像

两天前折腾出一个用JavaScript实时显示Gravatar头像的效果。也就是说留言时，你输入email后，就会实时显示你的Gravatar头像。你要说这个效果有什么用，我的答案是“没什么用，只是用来耍耍裤酷而已 ”。

把这个效果加入Wordpress也不费什么事，仅仅需要四步走：

1. 打开主题的comments.php文件，在适当的位置，如我的主题是下面代码的上方：

   <?php if ( get_option('comment_registration') && !$user_ID ) : ?>

   加入下面的代码：

       <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&amp;d=identicon&amp;r=G" alt="gravatar" height="48" width="48" />
       </p>
   

   PS：上面代码中的48可以修改为你想要的Gravatar头像的大小尺寸。

2. 接下来，同样是在comments.php中，拉到最后一个输入框（input标签）的位置（这个位置是最佳的），也就是：

   <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
           <label for="url"><small>Website</small></label></p>

   在这段代码的下面，加入：

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

   PS：上面代码中的48，同样改成你想要的Gravatar头像的大小尺寸。

3. 下载js-md5.js，并把它上传到主题文件夹中。
4. 这里就已经完成了！

测试效果，在这里留言试试。