为WordPress评论加上输入邮箱即时显示Gravatar头像功能

天外飘仙

　　

　　Gravatar是什么就不介绍了，不知道的自己Google去吧。新的主题加上了这个功能，实现起来不难，所以贴出来分享下，直接开始教程吧~
1. 将如下代码加到functions.php文件，在评论框里加上默认头像。

1. add_filter('comment_form_top'， 'show_gravatar');
   
2. function show_gravatar() {
   
3. global $current_user;
   
4. get_currentuserinfo();
   
5. echo get_avatar( $current_user-user_email ， 40); // 40是指头像的尺寸，第4步也一样
   
6. }

复制代码

2. 用CSS设置下头像的位置，这里就固定在右上角。
　　#commentform
#commentform .avatar
3.  下载http://pajhome.org.uk/crypt/md5/2.2/md5-min.js，保存到主题文件夹里。
　　4. 重命名刚才的文件为gravatar.js，在这个文件的最后追加如下代码：

1. if (document.getElementById("email")) {
   
2. document.getElementById("email").onblur = function () {
   
3. if  
   
4. (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-])$/.test(this.value))  
   
5. document.getElementById("commentform").getElementsByTagName("img")[0].src
   
6. =  “http://www.gravatar.com/avatar/” + hex_md5(this.value) +
   
7. "？d=mms=40";
   
8. };
   
9. };

复制代码

如果找到email输入框则当光标焦点移出email输入框时，用正则测试输入的是否是email格式，如果是就将之前插入的图片地址改为新生成的地址。
　　5. 打开footer.php，添加如下代码：

1. <?php if (is_singular() && comments_open()) { ?> //判断是不是单独的post页面且评论打开
   
2. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/gravatar.js"></script>
   
3. <?php } ?>

复制代码

简简单单的5步，即时显示Gravatar功能就算是完整的实现了，快动手试试吧~
查看更多 wordpress教程 wordpress主题