分享几个WordPress本地缓存gravatar评论头像的方案

文章目录

由于 GFW 的关系，使用 gravatar 的博客评论头像经常会出现“图裂特效”，这肯定是很多站长小伙伴都遇到过的困扰。网络上也很多教程，通过更换 avatar 的来源，来解决图裂的问题。确实可以解决图裂困扰，但是这头像的加载速度确实还有待提高，下面本文就分享 3 种将头像缓存到本地的方法。

一、代码方案

代码缓存方案来自 Willin Kan 大师，内容摘自 WP 大学，以下是具体做法：

①、建立缓存目录

在 wp-content 的同級目录建立一个文件夹，命名为 avatar ，设置该文件夹的权限为 0755 (如果 0755 不行，就试一下 0777)。

②、设置默认头像

准备一张大小适合的默认头像,命名为"default.jpg" ，放在 avatar 文件夹里面。

③、添加缓存代码

将下面的代码复制到模板的 functions.php 文件中即可：

function my_avatar($avatar) {
    $tmp = strpos($avatar, 'http');
    $g = substr($avatar, $tmp, strpos($avatar, "'", $tmp) - $tmp);
    $tmp = strpos($g, 'avatar/') + 7;
    $f = substr($g, $tmp, strpos($g, "?", $tmp) - $tmp);
    $w = get_bloginfo('wpurl');
    $e = ABSPATH .'avatar/'. $f .'.jpg';
    $t = 1209600; //設定14天, 單位:秒
    if ( !is_file($e) || (time() - filemtime($e)) > $t ) { //當頭像不存在或文件超過14天才更新
        copy(htmlspecialchars_decode($g), $e);
    } else  $avatar = strtr($avatar, array($g => $w.'/avatar/'.$f.'.jpg'));
        if (filesize($e) < 500) copy($w.'/avatar/default.jpg', $e);
        return $avatar;
    }
add_filter('get_avatar', 'my_avatar');

function my_avatar($avatar) {

$tmp = strpos($avatar, 'http');

$g = substr($avatar, $tmp, strpos($avatar, "'", $tmp) - $tmp);

$tmp = strpos($g, 'avatar/') + 7;

$f = substr($g, $tmp, strpos($g, "?", $tmp) - $tmp);

$w = get_bloginfo('wpurl');

$e = ABSPATH .'avatar/'. $f .'.jpg';

$t = 1209600; //設定14天, 單位:秒

if ( !is_file($e) || (time() - filemtime($e)) > $t ) { //當頭像不存在或文件超過14天才更新

copy(htmlspecialchars_decode($g), $e);

} else $avatar = strtr($avatar, array($g => $w.'/avatar/'.$f.'.jpg'));

if (filesize($e) < 500) copy($w.'/avatar/default.jpg', $e);

return $avatar;

}

add_filter('get_avatar', 'my_avatar');

二、插件方案

前不久，知更鸟博主鸟哥在 begin 群里分享了一款将 gavatar 头像缓存到本地的插件，个人试用了下，发现还不错，这款插件的名字就叫：nix-gravatar-cache。貌似原版插件有点问题，鸟哥还 DIY 了一把。

如果，发现装了原版的有问题，那么就下载鸟哥改过的版本吧！

三、Nginx 方案

我在测试这个插件的过程中，看了下生效后的头像路径，突然灵感一现：这缓存完全可以通过 Nginx 的 proxy 反向代理来缓存到本地啊！就类似于方向代理谷歌，解决被墙问题。

说干就干，经过折腾测试，发现果然好用！下面分享一下具体做法。

①、编译 Nginx

如果你之前已经实操了过张戈博客分享的 Nginx 缓存教程，相信这一步就可以忽略。

Nginx 反向代理缓存需要集成 ngx_cache_purge 模块，如果没有，则需要重新编译 Nginx，具体做法请参考张戈博客之前分享的文章：

《为网站开启 Nginx 缓存加速，支持 html 伪静态页面》之代理模式，新增该缓存模块，并在 http 上下文模块中添加 proxy 缓存规则，比如：

Shell

proxy_connect_timeout 5; proxy_read_timeout 60; proxy_send_timeout 5; proxy_buffer_size 16k; proxy_buffers 4 64k; proxy_busy_buffers_size 128k; proxy_temp_file_write_size 128k; proxy_cache_path /tmp/cache/proxy_cache levels=1:2 keys_zone=cache_one:200m inactive=30d max_size=5g; proxy_temp_path /tmp/cache/proxy_cache/temp;

1
2
3
4
5
6
7
8
9

proxy_connect_timeout 5;
proxy_read_timeout 60;
proxy_send_timeout 5;
proxy_buffer_size 16k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
proxy_cache_path /tmp/cache/proxy_cache levels=1:2 keys_zone=cache_one:200m inactive=30d max_size=5g;
proxy_temp_path /tmp/cache/proxy_cache/temp;

②、Nginx 配置

在网站现有规则中加入如下规则，反向代理 gavatar 并缓存到本地：

location /avatar {
    proxy_pass http://cn.gravatar.com;
    proxy_redirect off;
    proxy_set_header Host cn.gravatar.com;
    proxy_cache cache_one;
    proxy_cache_valid 200 302 304 365d;
    proxy_cache_valid 301 1d;
    proxy_cache_valid any 1m;
    add_header Images-Cache "$upstream_cache_status from $host";
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    access_log off; log_not_found off; expires max;
}

location /avatar {

proxy_pass http://cn.gravatar.com;

proxy_redirect off;

proxy_set_header Host cn.gravatar.com;

proxy_cache cache_one;

proxy_cache_valid 200 302 304 365d;

proxy_cache_valid 301 1d;

proxy_cache_valid any 1m;

add_header Images-Cache "$upstream_cache_status from $host";

add_header Pragma public;

add_header Cache-Control "public, must-revalidate, proxy-revalidate";

access_log off; log_not_found off; expires max;

}

③、PHP 代码

在主题目录下的 functions.php 中插入如下代码：

//更改gavatar来源
function mytheme_get_avatar($avatar) {
    $avatar = str_replace(array("www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com"),"zhangge.net",$avatar); //请修改为自己的首页域名
    return $avatar;
}
add_filter( 'get_avatar', 'mytheme_get_avatar', 10, 3 );

//更改gavatar来源

function mytheme_get_avatar($avatar) {

$avatar = str_replace(array("www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com"),"zhangge.net",$avatar); //请修改为自己的首页域名

return $avatar;

}

add_filter( 'get_avatar', 'mytheme_get_avatar', 10, 3 );

即可将 WordPress 头像地址更改成自己的域名，因为头像地址二级目录字段是/avatar/，所以会匹配到我们在上一步 Nginx 新增的反向代理规则，从而从 cn.gravatar.com 拉取头像并缓存到服务器本地。

很明显这个方法支持各种建站程序（需要修改网站代码），比 PHP 代码或插件的逼格、效率都更高！而且还不会出现外部 url 地址了！

四、折腾拓展

上一篇文章，张戈博客分享了目前在用的优化方案，里面有一条是建议静态资源使用二级域名，并拒绝 cookies 的写入。所以本文还能继续拓展折腾一下：将头像地址改成二级域名。比如右键查看张戈博客评论头像，可以发现已经变成 res.zhangge.net 了。其实就是新增一个 res.zhangge.net 的 server 模块而已，非常简单，感兴趣的朋友可以自己折腾一下，本文就不多做说明了。

文件下载

百度网盘

目前评论：26 其中：访客 21 博主 5

陌小雨 5

广东省广州市联通
2015年06月19日下午4:49

很全面，一站式解决，不错！

西贝博客 4

河南省移动
2015年06月21日上午9:59

为什么每次来了都需要输入用户信息，有没有吧案发解决一下？

张戈 [博主] 广东省深圳市联通
2015年06月21日上午10:05

你自己的问题，我博客js记录信息用了一年多了。要不就是浏览器禁止了cookies记忆，要不就不是同一个环境。
- 西贝博客 4 河南省移动
  2015年06月21日上午11:09
  
  哦哦，那估计是

胡歌网摘 4

浙江省温州市电信
2015年06月21日下午3:53

Nginx反代的方法不错，学习了。

koty 1

广东省深圳市福田区电信
2015年06月23日下午2:13

张戈，请问一下为什么我网站的文章分享到微信朋友圈后会被转码，你的为什么不会？

张戈 [博主] 广东省广州市电信
2015年06月30日下午1:30

我还没分享过微信，没见过这个问题。

网站目录提交 0

广东省茂名市高州市电信
2015年06月23日下午6:22

很全面，一站式解决，不错

麓谷微澜 1

湖南省长沙市电信
2015年06月25日上午12:38

我用的是新浪的sae做的WordPress，就是延迟很高

boke123导航 4

广西南宁市 /桂林市
2015年06月30日上午11:54

我现在用的是第一种，不过这个文件夹是放在主题里面比较方便

张戈 [博主] 广东省广州市电信
2015年06月30日下午1:30

嗯，第一种简单易用。

友邻阅读网 3

江苏省苏州市电信
2015年07月03日上午11:38

用了第一个方法，超级棒。谢谢

友邻阅读网 3

江苏省苏州市电信
2015年07月03日上午11:39

识别浏览器用的那个插件，还是纯代码

明月登楼 6

河南省南阳市联通
2015年07月08日上午1:42

我比较喜欢第一种方案！简单实用！

同盟源 5

安徽省芜湖市电信
2015年07月21日下午4:20

nginx反向代理，我服务器国内的反代cn.gxxx的

牧羊人 5

重庆市电信
2015年09月06日下午4:30

这两天多说好像是不能外链了，折腾来折腾去，发现：Gravatar 除了给中国版，直接替换成 cn.gravatar.com 就很好用了。。。

请问张戈，像咱们的头像源码部分如下：

第一个SRC 是我们看到的头像，第二个 srcset 一般是用不到的，该如何修改才能去掉第二个呢？

牧羊人 5

重庆市电信
2015年09月06日下午4:31

评论系统把代码过滤掉了。。。

测试 1

河南省郑州市联通
2015年12月16日上午9:13

试下这个····

晨夜 2

湖南省长沙市联通
2016年05月27日下午4:33

大神你好！
请问你的域名：res.zhangge.net是直接绑定在zhangge.net上的，还是使用七牛云镜像或者使用的res.zhangge.net反代的zhangge.net

张戈 [博主] 广东省深圳市电信
2016年05月27日下午9:13

前者

晨夜 2

湖南省郴州市联通
2016年05月28日上午7:26

按照http://zhangge.net/5042.html开启了缓存，也配置了多站点，但是搞反代的时候报错，去处 proxy_cache cache_web2;就可以，这样是不是就不缓存，怎么解决啊大神，谢谢！面前a使用了很多大神博客的技术在网站上十分感谢

张戈 [博主] 广东省深圳市电信
2016年05月28日下午2:47

将站点配置文件打包发到我邮箱 ge#zhangge.net 看看
#换成@

小C博客 4

浙江省杭州市电信
2016年07月16日下午12:11

张哥,proxy_pass地址能带参数吗？

乐朦 0

青海省西宁市电信
2016年12月09日上午8:55

学习了，谢谢分享。

里维斯社 1

广东省广州市萝岗区电信
2017年08月22日上午8:50

gravatar头像昨天提交，在别人网站评论不显示头像，网上查说是需要时间缓存，我看博主的这个网站显示出来了，不知道是什么原因。

君宇网络 1

iPhone iPhone OS 11_0_3 like Mac OS X) AppleWebKit

广东省广州市电信
2017年10月22日上午9:56

请问博主，如何缓存国内第三登陆（微信微博 QQ）头像到本地呢。我的网站有用第三方登录，可以获取用户头像，但是用了是一种方法后，这些头像就不存在了只出现了代码网址 laowei8.co m

加载中,请稍候...

文章过于久远，评论已关闭！

陌小雨 5 广东省广州市联通
2015年06月19日下午4:49

很全面，一站式解决，不错！

西贝博客 4 河南省移动
2015年06月21日上午9:59

为什么每次来了都需要输入用户信息，有没有吧案发解决一下？
- 张戈 [博主] 广东省深圳市联通
  2015年06月21日上午10:05
  
  你自己的问题，我博客js记录信息用了一年多了。要不就是浏览器禁止了cookies记忆，要不就不是同一个环境。
  - 西贝博客 4 河南省移动
    2015年06月21日上午11:09
    
    哦哦，那估计是

胡歌网摘 4 浙江省温州市电信
2015年06月21日下午3:53

Nginx反代的方法不错，学习了。

koty 1 广东省深圳市福田区电信
2015年06月23日下午2:13

张戈，请问一下为什么我网站的文章分享到微信朋友圈后会被转码，你的为什么不会？
- 张戈 [博主] 广东省广州市电信
  2015年06月30日下午1:30
  
  我还没分享过微信，没见过这个问题。

网站目录提交 0 广东省茂名市高州市电信
2015年06月23日下午6:22

很全面，一站式解决，不错

麓谷微澜 1 湖南省长沙市电信
2015年06月25日上午12:38

我用的是新浪的sae做的WordPress，就是延迟很高

boke123导航 4 广西南宁市 /桂林市
2015年06月30日上午11:54

我现在用的是第一种，不过这个文件夹是放在主题里面比较方便
- 张戈 [博主] 广东省广州市电信
  2015年06月30日下午1:30
  
  嗯，第一种简单易用。

友邻阅读网 3 江苏省苏州市电信
2015年07月03日上午11:38

用了第一个方法，超级棒。谢谢

友邻阅读网 3 江苏省苏州市电信
2015年07月03日上午11:39

识别浏览器用的那个插件，还是纯代码

明月登楼 6 河南省南阳市联通
2015年07月08日上午1:42

我比较喜欢第一种方案！简单实用！

同盟源 5 安徽省芜湖市电信
2015年07月21日下午4:20

nginx反向代理，我服务器国内的反代cn.gxxx的

牧羊人 5 重庆市电信
2015年09月06日下午4:30

这两天多说好像是不能外链了，折腾来折腾去，发现：Gravatar 除了给中国版，直接替换成 cn.gravatar.com 就很好用了。。。
请问张戈，像咱们的头像源码部分如下：
第一个SRC 是我们看到的头像，第二个 srcset 一般是用不到的，该如何修改才能去掉第二个呢？

牧羊人 5 重庆市电信
2015年09月06日下午4:31

评论系统把代码过滤掉了。。。

1

测试 1 河南省郑州市联通
2015年12月16日上午9:13

试下这个····

晨夜 2 湖南省长沙市联通
2016年05月27日下午4:33

大神你好！
请问你的域名：res.zhangge.net是直接绑定在zhangge.net上的，还是使用七牛云镜像或者使用的res.zhangge.net反代的zhangge.net
- 张戈 [博主] 广东省深圳市电信
  2016年05月27日下午9:13
  
  前者

晨夜 2 湖南省郴州市联通
2016年05月28日上午7:26

按照http://zhangge.net/5042.html开启了缓存，也配置了多站点，但是搞反代的时候报错，去处 proxy_cache cache_web2;就可以，这样是不是就不缓存，怎么解决啊大神，谢谢！面前a使用了很多大神博客的技术在网站上十分感谢
- 张戈 [博主] 广东省深圳市电信
  2016年05月28日下午2:47
  
  将站点配置文件打包发到我邮箱 ge#zhangge.net 看看
  #换成@

小C博客 4 浙江省杭州市电信
2016年07月16日下午12:11

张哥,proxy_pass地址能带参数吗？

乐朦 0 青海省西宁市电信
2016年12月09日上午8:55

学习了，谢谢分享。

里维斯社 1 广东省广州市萝岗区电信
2017年08月22日上午8:50

gravatar头像昨天提交，在别人网站评论不显示头像，网上查说是需要时间缓存，我看博主的这个网站显示出来了，不知道是什么原因。

君宇网络 1 广东省广州市电信
2017年10月22日上午9:56

请问博主，如何缓存国内第三登陆（微信微博 QQ）头像到本地呢。我的网站有用第三方登录，可以获取用户头像，但是用了是一种方法后，这些头像就不存在了只出现了代码网址 laowei8.co m