解决WordPress的Gravatar头像被墙显示不出来的问题-威言威语

解决WordPress的Gravatar头像被墙显示不出来的问题

William2016-05-25 10:21设计64,369次阅读39条评论

Gravatar头像被墙或者打开缓慢已经是一个老问题了，网上也有各式各样的方法去解决这个问题。

目前流行的：1、使用官方https的头像链接，目前这个https方式没被墙，速度也还不错。2、使用多说的头像缓存服务，但是目前发现这个不是很稳定，要么加载慢，要么直接加载不出来。3、使用七牛缓存方案，这个好像使用要注册账号，安装插件什么的，不是那么方面，主要也没有试用过，稳定性未知。

我一直使用的是第一种方式，应该说使用了很久了，一直都算比较正常的。网上的代码是这样的：

function get_ssl_avatar($avatar) {
   $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2&d=mm" class="avatar avatar-$2" height="$2" width="$2">',$avatar);
   return $avatar;
}
add_filter('get_avatar', 'get_ssl_avatar');

但是从WordPress 4.2版开始，这种方式就会出现一个问题，就头像好像比以前大了一倍。当然我也没有细看，只是通过CSS对头像大小做了限制，但是后台的头像不可能每次升级都改下后台的css代码，那样也太麻烦了，于是研究下，发现从WordPress4.2版开始，引入了scrset，srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。也就是可以根据屏幕密度显示对应尺寸的图片，比如正常的PC显示器默认设备像素比都是1，iphone6是2，iphone6 plus就是3。

WordPress4.2+的scrset定义的2x的，之前的代码获取出来的图片大小是50，但是之后就获取到scrset里面的图片大小100上了，这就导致了为什么后来图片扩大一倍的缘故。

于是我就重写了下代码，解决了这个问题。

//替换Gavatar头像地址
function get_ssl_avatar($avatar) {
    if (preg_match_all(
        '/(src|srcset)=["\']https?.*?\/avatar\/([^?]*)\?s=([\d]+)&([^"\']*)?["\']/i',
        $avatar,
        $matches
    ) > 0) {
        $url = 'https://secure.gravatar.com';
        $size = $matches[3][0];
        $vargs = array_pad(array(), count($matches[0]), array());
        for ($i = 1; $i < count($matches); $i++) {
            for ($j = 0; $j < count($matches[$i]); $j++) {
                $tmp = strtolower($matches[$i][$j]);
                $vargs[$j][] = $tmp;
                if ($tmp == 'src') {
                    $size = $matches[3][$j];
                }
            }
        }
        $buffers = array();
        foreach ($vargs as $varg) {
            $buffers[] = vsprintf(
            '%s="%s/avatar/%s?s=%s&%s"',
            array($varg[0], $url, $varg[1], $varg[2], $varg[3])
           );
        }
        return sprintf(
                '<img alt="avatar" %s class="avatar avatar-%s" height="%s" width="%s" />',
                implode(' ', $buffers), $size, $size, $size
            );
    } else {
        return false;
    }
}
add_filter('get_avatar', 'get_ssl_avatar');

本文固定链接: https://www.weisay.com/blog/wordpress-gravatar-update.html | 威言威语

解决WordPress的Gravatar头像被墙显示不出来的问题：目前有 39 条评论

28楼
落英缤纷：

我干脆直接统一本地头像，难看就难看点吧。

2020-07-20 10:14 回复
27楼
呆哥：

我的博客评论区的gravatar头像特别模糊，分辨率只有42，请问怎么调清晰一点啊

2020-04-25 00:29 回复
- William文章作者：
  
  看你博客的头像大小就是42的，可以获取大一些，比如84，然后通过CSS控制大小。这样在高清屏上面会清晰一些。
  
  2020-05-06 18:15 回复
26楼
筱雨悠然：

好多人都不玩博客了

2018-04-21 09:16 回复
25楼
thornbird：

好像被墙了不能用了

2018-01-15 14:00 回复
24楼
个人博客：

一直没弄图像

2017-12-16 17:08 回复
23楼
爱科技博客：

可以考虑用本地上传头像

2017-12-04 01:38 回复
22楼
踏雪：

沙发板凳地板是不是反了

2017-05-07 23:22 回复
21楼
火星：

极验验证的滑动框没法显示请问怎么解决

2017-05-07 21:51 回复
20楼
妙家居：

博主，你的博客已经有一段时间没有更新了，希望你能坚持，另外，你这个方法我看行，借用一下

2017-03-04 23:36 回复
19楼
夏日草博客：

已经去掉g头像的显示了。

2017-02-20 17:43 回复
18楼
Gavin：

请问需要修改哪一份文件？谢谢

2017-02-08 11:33 回复
17楼
春暖花开：

博主现在使用的模板是什么，可以分享么。

2016-12-30 09:46 回复
16楼
maiaservers：

不明白为什么WP调用那么多谷歌的东西，自己开发偷懒? 被强了，打开速度影响很大

2016-12-17 14:27 回复
15楼
helsinglee：

最近没啥更新啊

2016-12-02 13:50 回复
14楼
pongba：

「我爱水煮鱼」有一个更简单的办法，只需替换http->https以及0.gravatar.com 1.gravatar.com -> secure.gravatar.com，代码简单很多，具体如下：

http://blog.wpjam.com/m/wordpress-gravatar-server/

2016-12-01 07:00 回复
13楼
阿柯博客：

感觉还是不行，还是使用本地缓存的方法。隔一段时间，翻墙，登陆博客后台，刷一下评论列表，让头像缓存下来

2016-10-29 19:47 回复
12楼
RaresNote：

感谢博主分享，我还一直没有这个远程头像的呢，学习中

2016-10-09 19:50 回复
11楼
刘明野的博客：

过来看看

2016-10-03 19:20 回复
10楼
zjjfx88：

我的头像还是不行，求指导啊，用的是wp4.6和您的主题

2016-09-06 11:04 回复
9楼
卢松松博客：

从百度点进来的，支持一下，希望站长您多出一些好文章。

2016-08-19 22:04 回复
8楼
尤克：

头像被墙很困扰

2016-07-15 18:36 回复
7楼
个人博客：

一直都没有头像~~~

2016-07-01 16:49 回复
6楼
夏日博客：

直接用的多说的缓存。。

2016-06-11 21:18 回复
5楼
李昌奎：

老大，正文字体变大，从哪里设置？谢谢！

2016-06-06 20:00 回复
- William文章作者：
  
  看看css有没有加载正常，或者css被修改了。评论的时候填网站地址，我可以看一下问题。
  
  2016-06-08 10:12 回复
- 李昌奎：
  
  lichangkui.com
  
  2016-06-08 10:23 回复
  - William文章作者：
    
    字体大小很正常啊，没有看到变大
    
    2016-06-08 13:49 回复
    - 李昌奎：
      
      老大，是我表述有问题。我希望字体能够变大一些，目前字体太小。
      
      2016-06-08 15:11 回复
      - William文章作者：
        
        在主题的style.css里面找到 .context
        然后在括号里面加上 font-size:14px;
        觉得还小可以自行调整数字大小。改好之后访问的时候清空浏览器缓存，防止缓存在导致看不到修改结果。
        
        2016-06-08 16:39 回复
        
        李昌奎：
        
        .context{position:relative;overflow:hidden;}
        .context p{padding:5px 0px;margin:0;line-height:22px;text-indent:2em;}
        .context h4{margin:10px 0 5px 0}
        .context h5{font-size:15px;padding:3px 8px;background:#ededed;border:1px #ddd solid;}
        是这里吧，具体改哪一行？
        
        2016-06-08 17:09 回复
        
        李昌奎：
        
        在第一行增加了，正文已经变大，首页还没有变化。
        
        2016-06-08 17:13 回复
        
        William文章作者：
        
        在主题的style.css里面找到 .entry_post
        还是同样的操作。
        
        2016-06-11 20:46 回复
4楼
掩耳：

希望更新到 Weisay Simple 2.2版本里

2016-06-04 09:03 回复
地板
大发：

挂在get_avatar_url就行了。

2016-06-01 14:31 回复
板凳
夏天烤洋芋：

我的主题好像没这个问题

2016-05-30 13:21 回复
- William文章作者：
  
  因为你目前主题用的是多说的头像路径。
  
  2016-06-01 09:46 回复
沙发
有点蓝：

感觉还是得用头像缓存，一劳永逸啊。

2016-05-27 06:05 回复
- William文章作者：
  
  万一头像有更新的，如果好用的吧还是使用官方的头像地址方便一些。
  
  2016-05-28 21:35 回复

发表评论

28楼

落英缤纷：

我干脆直接统一本地头像，难看就难看点吧。

2020-07-20 10:14 回复

27楼

呆哥：

我的博客评论区的gravatar头像特别模糊，分辨率只有42，请问怎么调清晰一点啊

2020-04-25 00:29 回复

William文章作者：

看你博客的头像大小就是42的，可以获取大一些，比如84，然后通过CSS控制大小。这样在高清屏上面会清晰一些。

2020-05-06 18:15 回复

26楼

筱雨悠然：

好多人都不玩博客了

2018-04-21 09:16 回复

25楼

thornbird：

好像被墙了不能用了

2018-01-15 14:00 回复

24楼

个人博客：

一直没弄图像

2017-12-16 17:08 回复

23楼

爱科技博客：

可以考虑用本地上传头像

2017-12-04 01:38 回复

22楼

踏雪：

沙发板凳地板是不是反了

2017-05-07 23:22 回复

21楼

火星：

极验验证的滑动框没法显示请问怎么解决

2017-05-07 21:51 回复

20楼

妙家居：

博主，你的博客已经有一段时间没有更新了，希望你能坚持，另外，你这个方法我看行，借用一下

2017-03-04 23:36 回复

19楼

夏日草博客：

已经去掉g头像的显示了。

2017-02-20 17:43 回复

18楼

Gavin：

请问需要修改哪一份文件？谢谢

2017-02-08 11:33 回复

17楼

春暖花开：

博主现在使用的模板是什么，可以分享么。

2016-12-30 09:46 回复

16楼

maiaservers：

不明白为什么WP调用那么多谷歌的东西，自己开发偷懒? 被强了，打开速度影响很大

2016-12-17 14:27 回复

15楼

helsinglee：

最近没啥更新啊

2016-12-02 13:50 回复

14楼

pongba：

「我爱水煮鱼」有一个更简单的办法，只需替换http->https以及0.gravatar.com 1.gravatar.com -> secure.gravatar.com，代码简单很多，具体如下：

http://blog.wpjam.com/m/wordpress-gravatar-server/

2016-12-01 07:00 回复

13楼

阿柯博客：

感觉还是不行，还是使用本地缓存的方法。隔一段时间，翻墙，登陆博客后台，刷一下评论列表，让头像缓存下来

2016-10-29 19:47 回复

12楼

RaresNote：

感谢博主分享，我还一直没有这个远程头像的呢，学习中

2016-10-09 19:50 回复

11楼

刘明野的博客：

过来看看

2016-10-03 19:20 回复

10楼

zjjfx88：

我的头像还是不行，求指导啊，用的是wp4.6和您的主题

2016-09-06 11:04 回复

9楼

卢松松博客：

从百度点进来的，支持一下，希望站长您多出一些好文章。

2016-08-19 22:04 回复

8楼

尤克：

头像被墙很困扰

2016-07-15 18:36 回复

7楼

一直都没有头像~~~

2016-07-01 16:49 回复

6楼

夏日博客：

直接用的多说的缓存。。

2016-06-11 21:18 回复

5楼

李昌奎：

老大，正文字体变大，从哪里设置？谢谢！

2016-06-06 20:00 回复

William文章作者：

看看css有没有加载正常，或者css被修改了。评论的时候填网站地址，我可以看一下问题。

2016-06-08 10:12 回复
李昌奎：

lichangkui.com

2016-06-08 10:23 回复
- William文章作者：
  
  字体大小很正常啊，没有看到变大
  
  2016-06-08 13:49 回复
  - 李昌奎：
    
    老大，是我表述有问题。我希望字体能够变大一些，目前字体太小。
    
    2016-06-08 15:11 回复
    - William文章作者：
      
      在主题的style.css里面找到 .context
      然后在括号里面加上 font-size:14px;
      觉得还小可以自行调整数字大小。改好之后访问的时候清空浏览器缓存，防止缓存在导致看不到修改结果。
      
      2016-06-08 16:39 回复
      - 李昌奎：
        
        .context{position:relative;overflow:hidden;}
        .context p{padding:5px 0px;margin:0;line-height:22px;text-indent:2em;}
        .context h4{margin:10px 0 5px 0}
        .context h5{font-size:15px;padding:3px 8px;background:#ededed;border:1px #ddd solid;}
        是这里吧，具体改哪一行？
        
        2016-06-08 17:09 回复
        
        李昌奎：
        
        在第一行增加了，正文已经变大，首页还没有变化。
        
        2016-06-08 17:13 回复
        
        William文章作者：
        
        在主题的style.css里面找到 .entry_post
        还是同样的操作。
        
        2016-06-11 20:46 回复

4楼

掩耳：

希望更新到 Weisay Simple 2.2版本里

2016-06-04 09:03 回复

地板

大发：

挂在get_avatar_url就行了。

2016-06-01 14:31 回复

板凳

夏天烤洋芋：

我的主题好像没这个问题

2016-05-30 13:21 回复

William文章作者：

因为你目前主题用的是多说的头像路径。

2016-06-01 09:46 回复

沙发

有点蓝：

感觉还是得用头像缓存，一劳永逸啊。

2016-05-27 06:05 回复

William文章作者：

万一头像有更新的，如果好用的吧还是使用官方的头像地址方便一些。

2016-05-28 21:35 回复

威言威语