WordPress为没有Gravatar头像的用户加载随机头像

投稿   INLOJV  2017-05-23 07:38:09  352 人阅读  36 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

当你想到判断用户是否有 gravatar 头像时,大多能找到网上搜到一些老办法,就是通过 get_headers 远程取得 gravatar 服务器响应一个 HTTP 请求所发送的所有标头。看看是否是 404,再回头判断是否该加载自定义头像。

WordPress为没有Gravatar头像的用户加载随机头像 WordPress 第1张

而我们通常不会采用上述方式,就是因为这个 get_headers 的过程非常耗时。今天 JV 给大家提供两个更快的思路,都是不通过 get_headers 直接使用前端和 wp 已有的默认手段来达到为没有 gravatar 头像的用户加载随机头像的目的。就是根据 gravatar 网站关于头像请求中 d 参的介绍,我们可以拿其中的 404 和 Default Image 两种形式来进行前端输出。

在主题的 functions.php 中加入以下代码:

  1. /**
  2.  * 为没有Gravatar头像的用户加载随机头像
  3.  * @author INLOJV
  4.  * @URI  http://www.inlojv.com/20170521randomgravatar.html ‎
  5.  * 
  6.  */
  7. add_filter( 'get_avatar' , 'inlojv_custom_avatar' , 10 , 5 );
  8. function inlojv_custom_avatar( $avatar$id_or_email$size$default$alt) {
  9.         global $comment;
  10.         $email = !emptyempty($comment->comment_author_email) ? $comment->comment_author_email : $id_or_email ;
  11.         $random_avatar_arr = array(
  12.             '//wx1.sinaimg.cn/square/6b002b97gy1ffs6ulm8ojj20690690sl.jpg',
  13.             '//wx1.sinaimg.cn/square/6b002b97gy1ffs6ulfp76j2069069t8p.jpg',
  14.             '//wx1.sinaimg.cn/square/6b002b97gy1ffs6ukuo5dj2069069a9w.jpg',
  15.             '//wx1.sinaimg.cn/square/6b002b97gy1ffs6ujijfoj206z05l746.jpg',
  16.             '//wx1.sinaimg.cn/square/6b002b97gy1ffs6uimd6zj207705edfr.jpg'
  17.         );
  18.         $email_hash = md5(strtolower(trim($email)));
  19.         $random_avatar = array_rand($random_avatar_arr,1);
  20.         $src = $random_avatar_arr[$random_avatar] ;
  21.         // JV提示:d参数404 onerror 方法 - 速度最快
  22.         $avatar = "<img alt='{$alt}' src='//secure.gravatar.com/avatar/{$email_hash}?d=404' onerror='javascript:this.src=\"{$src}\";this.onerror=null;' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
  23.         // JV提示:d参数default_img 方法 - 速度稍逊
  24.         // $src = urlencode( $src );
  25.         //$avatar = "<img alt='{$alt}' src='//secure.gravatar.com/avatar/{$email_hash}?d={$src}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
  26.     return $avatar;
  27. }

如代码中所注释的那样,第一种方法是直接采用 img 标签的 onerror 属性,当图片链接返回 404 时直接输出我们自定义的随机图片;第二种方法是利用 d 参数返回默认链接从而加载随机图片。

另外,我把随机图片写成了数组,这样你就可以使用外链图片链接作为随机头像的链接,若你需要添加新的图片,可以依样画葫芦每行添加一条图片外链即可。 以上!

参考资料

历史上的今天:

文章标签: ,   ,  
原文地址:http://www.inlojv.com/20170521randomgravatar.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 INLOJV 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 小苍老师
    小苍老师 【进士】 @回复

    这方法感觉不错,收下了!

  2. 蚂蚁博客
    蚂蚁博客 【举人】 @回复

    比较不错的方法,收下了!
    这样评论区看起来就比较多样化了

    • boke112导航
      boke112导航【村长】2017-05-24 23:35  回复

      @蚂蚁博客是的,比起同一个默认头像,随机头像,或者字母头像还是比较不错的

  3. 金榜台博客
    金榜台博客 【状元】 @回复

    今天怎么还没更新呢

  4. 灵异世界网
    灵异世界网 【进士】 @回复

    今天的新文章还没更新啊。。。

  5. 钛客志
    钛客志 【秀才】 @回复

    其实我觉得没有头像的,统一一个图标也可以的

    • boke112导航
      boke112导航【村长】2017-05-24 09:32  回复

      @钛客志好像没有gravatar头像的就是一个默认头像,不过感觉比较死板,弄成随机头像或字母头像,感觉会比较好

  6. 聚赚园
    聚赚园 【秀才】 @回复

    点赞,顺便占个位置

  7. 夏日博客
    夏日博客 【进士】 @回复

    现在的G头像都需要调国内的缓存服务器了。

    • boke112导航
      boke112导航【村长】2017-05-24 09:33  回复

      @夏日博客是的,很多都做成缓存头像,或调用国内的头像服务器

  8. 薅羊毛
    薅羊毛 【秀才】 @回复

    学习 感谢分享

  9. 吃货小栈
    吃货小栈 【秀才】 @回复

    不错,支持一下!

  10. 倚楼听风雨
    倚楼听风雨 【书童】 @回复

    收藏下。现在用的七牛缓存,感觉也不错的!

  11. 励志语录
    励志语录 【进士】 @回复

    学习了,来看看

  12. 玉满斋
    玉满斋 【尚书】 @回复

    七牛缓存头像的飘过!

  13. videoclub
    videoclub 【尚书】 @回复

    一直是很围观的

  14. 闲鱼
    闲鱼 【进士】 @回复

    这个也不错哈

  15. 黎叔
    黎叔 【举人】 @回复

    随机其实内置有这个比如抽象图形(自动生成)
    avatar Wavatar(自动生成)
    avatar 小怪物(自动生成)
    avatar 复古(自动生成) 不过这些都不好看

  16. 明月登楼
    明月登楼 【王爷】 @回复

    用缓存了就不需要了!

  17. 码农BTS
    码农BTS 【状元】 @回复

    有了gavatar还要随机头像干啥

    • boke112导航
      boke112导航【村长】2017-05-24 09:34  回复

      @码农BTS这个是为没有gravatar头像的用户准备的

  18. 钱探子
    钱探子 【举人】 @回复

    不错,你博客的gravatar有缓存吧?

  19. 出售转让本博客
    出售转让本博客 【丞相】 @回复

    很久没折腾技术文章了

  20. Mr.Li
    Mr.Li 【举人】 @回复

    按照我几年前的恶性子,恼一恼直接关闭评论 [思考]

    • 出售转让本博客
      出售转让本博客 【丞相】2017-05-23 10:31  回复

      @Mr.Li哈哈,这个比较干脆

    • boke112导航
      boke112导航【村长】2017-05-23 11:20  回复

      @Mr.Li[威武] 不过个人博客如果连评论都关闭了,感觉就不好玩了

  21. 演绎法
    演绎法 【进士】 @回复

    这个还好吧

  22. 大伟哥博客
    大伟哥博客 【举人】 @回复

    现在gravatar头像用的多吗?

    • boke112导航
      boke112导航【村长】2017-05-23 11:22  回复

      @大伟哥博客一般打算长期玩独立博客的,都会注册gravatar头像

  23. 金榜台博客
    金榜台博客 【状元】 @回复

    每天来看看

  24. 灵异世界网
    灵异世界网 【进士】 @回复

    我的本地化了

  25. 龙笑天
    龙笑天 【状元】 @回复

    这个就非常棒了~ [赞]

  26. 爱时尚
    爱时尚 【尚书】 @回复

    我的没有头像,能弄出来吗,不想用Gravatar头像

  27. 企业战略
    企业战略 【举人】 @回复

    这两个思路都不错