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

/ WordPress / , , , , , , / 1,498ºC
21

为WordPress评论加上输入邮箱即时显示Gravatar头像功能
Gravatar是什么就不介绍了，不知道的自己Google去吧。新的主题加上了这个功能，实现起来不难，所以贴出来分享下，直接开始教程吧~

1. 将如下代码加到functions.php文件，在评论框里加上默认头像。

1
2
3
4
5
6

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

2. 用CSS设置下头像的位置，这里就固定在右上角。

1
2

#commentform { position: relative }
#commentform .avatar { position: absolute; top: 0; right: 20px }

3. 下载http://pajhome.org.uk/crypt/md5/2.2/md5-min.js，保存到主题文件夹里。

4. 重命名刚才的文件为gravatar.js，在这个文件的最后追加如下代码：

1
2
3
4
5

if (document.getElementById("email")) {
    document.getElementById("email").onblur = function () {
        if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(this.value)) document.getElementById("commentform").getElementsByTagName("img")[0].src = "http://www.gravatar.com/avatar/" + hex_md5(this.value) + "?d=mm&s=40";
    };
};

如果找到email输入框则当光标焦点移出email输入框时，用正则测试输入的是否是email格式，如果是就将之前插入的图片地址改为新生成的地址。

5. 打开footer.php，添加如下代码：

1
2
3

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

简简单单的5步，即时显示Gravatar功能就算是完整的实现了，快动手试试吧~

发表评论（已有 21 条评论）

设置头像

*

:wink: :twisted: :smile: :sleep: :shock: :sad: :roll: :razz: :oops: :neutral: :mad: :grin: :evil: :eek: :cry: :cool:

  1. 洋洋 说：

    看看头像。。。

    回复 @TA
  2. JokerTang 说：

    学习了 :cool:

    回复 @TA
  3. 心灵之路 说：

    @蓝星天宇
    我也经常来，现在已经有头像了。 :cool:

    回复 @TA
  4. andychow1989 说：

    学习了 这个功能挺好的 折腾折腾不错 :razz:

    回复 @TA
  5. eps线条 说：

    我的头像真丑 :evil:

    回复 @TA
  6. john 说：

    这个功能挺好的

    回复 @TA
  7. CleverZhang 说：

    挺好的功能 :wink:
    很久没有搞我的blog了，颓废中…… :neutral:

    回复 @TA
  8. 老新 说：

    我来看看，是不是有头像。

    回复 @TA
  9. Showfom 说：

    测试一下效果

    回复 @TA
  10. yiduqiang 说：

    这个细节我喜欢，但是，但是，但是~~~懒得弄了，反正最后都要显示头像的 :wink:

    回复 @TA
  11. 李逍遥 说：

    期待博主在新版的zine主题模板中加入即时显示头像的功能。

    回复 @TA
    • 小影 说：

      额，zine主题没地方放头像 :neutral:

      回复 @TA
  12. 茶干 说：

    不错不错

    回复 @TA
  13. ice 说：

    不错！ :cool:

    回复 @TA
  14. wmtimes 说：

    嗯。这个我的很早就加上了。是从winy那儿搞到 。

    回复 @TA
  15. 李逍遥 说：

    浅显易懂的文章！
    支持站长！ :oops:

    回复 @TA
  16. 有点蓝 说：

    深入浅出的文章，我也要试试。

    回复 @TA
  17. Felix2yu 说：

    那怎样做到当没有头像时在头像位置处提醒注册Gravatar

    回复 @TA
  18. 幽虫 说：

    不错！挺棒的。 :wink:

    回复 @TA
  19. tw 说：

    :razz: 顶！！！

    回复 @TA