实现wordpress评论输入邮箱即时显示gravatar头像

博客吧前面介绍过zblog asp 1.8版本《实现 Z-Blog 留言输入邮箱立即显示Gavatar头像》功能,最近在更新一个主题的时候也加入了该功能效果,实现的方法是通过加载javascript的md5函数转换捕获的邮箱输入框的输入的email地址,然后组合成对应的gravatar头像链接,最后用setAttribute改变img的src地址。

实现wordpress评论输入邮箱即时显示gravatar头像

操作步骤:

1、下载js文件,并上传至当前主题文件夹

http://pan.baidu.com/s/1eQriF3k

2、编辑当前主题的comments.php文件,在要即时显示头像对应的文件位置添加代码:

1
2
<?php $email = ($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($email);?>?s=60&d=identicon&r=G" alt="gravatar头像" />

注:代码中的60表示图像图片的大小

3、在comments.php文件第一行添加以下调用代码:

1
2
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>js-md5.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/gravatar.js"></script>

注:如果js文件路径有改动,请修改相应的路径位置

保存文件,刷新网页后,测试成功。

网友留言:

  1. zl
    2016-11-24回复

    必须是汉子

  2. 2016-04-25回复

    添加好代码,没有输入邮箱,自定位置就已经输出头像,不知道是谁的。

    • 博主板凳
      2016-04-26回复

      那是传说中的默认头像!

      • 2016-04-26回复

        不能获取头像什么原因?谢谢

  3. 2016-03-10回复

    测试头像

发表留言