威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

Gravatar头像被墙或者打开缓慢已经是一个老问题了,网上也有很多方法去解决这个问题。通过之前替换secure.gravatar.com的方式使得头像扩大了一倍。从WordPress4.2版开始,引入了scrset,但是原来代码没有考虑这个问题导致的。srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。
解决WordPress的Gravatar头像被墙显示不出来的问题

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

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

推荐使用方式

$gravatar_urls = array('www.gravatar.com', '0.gravatar.com', '1.gravatar.com', '2.gravatar.com', 'secure.gravatar.com', 'cn.gravatar.com');
function weisayavatar($avatar)
{
    global $gravatar_urls;
    return str_replace($gravatar_urls, 'cravatar.cn', $avatar);
}
add_filter('get_avatar', 'weisayavatar');
add_filter('get_avatar_url', 'weisayavatar');

这里我使用的cravatar.cn来替换的,网上的Gravatar头像的镜像源还有其他的,比如:weavatar.com、gravatar.loli.net,也可以把上面代码里面的 cravatar.cn 替换成其他的源。

下面的文字可以不用看了。

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


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上了,这就导致了为什么后来图片扩大一倍的缘故。

于是我就重写了下代码,解决了这个问题,头像图片的路径也使用了目前比较稳定的方法Cravatar头像。Cravatar是lifepress团队在国内做的一个公益项目,是目前Gravatar相对完美的替代品,看了官方的文档,Cravatar 100%兼容Gravatar的头像API,目前我也是通过替换域名的方式来使用Cravatar接替Gravatar。

将下面的代码放到主题的functions.php里面就行。


//替换Gavatar头像地址
function get_ssl_avatar($avatar) {
    if (preg_match_all(
        '/(src|srcset)=["\']https?.*?\/avatar\/([^?]*)\?s=([\d]+)&([^"\']*)?["\']/i',
        $avatar,
        $matches
    ) > 0) {
        $url = 'https://cravatar.cn';
        $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');

您可能还会对这些文章感兴趣!

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

  1. 佐语先森
    30楼
    佐语先森:QQ浏览器 10.9.4615.400 Windows 10

    代码用上了,感谢!

    2022-04-23 17:44 回复
  2. 青木
    29楼
    青木:Google Chrome 100.0.4896.75 Windows 7

    怎么搞这么复杂 ,装个china-yes插件就好了

    2022-04-20 15:05 回复
    • William
      WilliamFirefox 99.0 Windows 10

      @青木几行代码的事情,也就没有比较再装个插件了。

      2022-04-21 14:32 回复
  3. 常瑞
    28楼
    常瑞:Microsoft Edge 99.0.1145.0 Windows 10

    可以看看我的镜像 :cool:

    2022-01-26 07:44 回复
  4. 黑桃三
    27楼
    黑桃三:Google Chrome 95.0.4621.0 Windows 7

    V2EX的镜像源也不能用了,V2EX被墙了

    2021-11-01 13:25 回复
    • Lvtu
      LvtuSafari 15.1 Mac OS X  10.15.7

      @黑桃三现在可用的镜像很多呀,网上一搜一大把,只是不长久,过一段时间可能要换一下。。。

      2021-11-21 09:38 回复
  5. cindy
    26楼
    cindy:Google Chrome 78.0.3904.108 Windows 10

    看看有没有显示呢

    2021-02-27 00:38 回复
  6. 落英缤纷
    25楼
    落英缤纷:Google Chrome 78.0.3904.108 Windows 7

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

    2020-07-20 10:14 回复
  7. 呆哥
    24楼
    呆哥:QQ浏览器 10.2 Android 9

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

    2020-04-25 00:29 回复
    • William
      WilliamMicrosoft Edge 81.0.416.68 Windows 10

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

      2020-05-06 18:15 回复
  8. 筱雨悠然
    23楼
    筱雨悠然:Firefox 59.0 Windows 7

    好多人都不玩博客了

    2018-04-21 09:16 回复
  9. thornbird
    22楼
    thornbird:Google Chrome 55.0.2883.87 Windows 7

    好像被墙了 不能用了

    2018-01-15 14:00 回复
  10. 爱科技博客
    21楼
    爱科技博客:UC Browser 6.2.3831.407 Windows 10

    可以考虑用本地上传头像

    2017-12-04 01:38 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry