起因

wordpress的头像加载一般是最头疼的地方。原因有三,其一是头像缓存的服务器在国外。所以国内使用的话,网络慢得可怜;其二是可以使用国内的头像缓存服务,但是指不定哪天就给关闭了;其三,我们可以直接禁用该服务,目前如果我们需要此服务的话,就只能使用默认头像。所以我想到,是不是可以自己写一个服务去缓存这些头像。就像CDN一样。

Gravatar是一图像跟随著您到访过的网站,当您在博客中留言或发表文章,它将会出现在您的名称旁。头像协助识别您在博客和论坛发表的文章,何乐而不为呢?

cn.gravatar.com

当然,我们也可以直接百度一下,查找本地缓存的例子。博主也查了一下。大部分的代码都年久失修,直接拿来用是不可能的。而他们的一些例子基本上都是写在插件里面,或者functions.php里面。其实这样做也是不合理的,因为会导致页面加载时间变长。毕竟第一次载入还是有些耗时的。所以只有做成服务再加上懒加载技术,才是解决这样的问题最好的路径。



设计

基于这一诉求。我设计了如下服务流程:

用户访问页面时,使用wordpresshook功能,拦截获取头像的方法,然后注入我们的头像服务地址。接着我们的头像服务会根据请求的查询字符串,生成一串唯一ID,并以这个ID做为文件名称,缓存至指定的路径。这就是缓存的步骤。如果该唯一ID的文件存在,则直接返回该文件即可。

所以头像的访问由原来的
https://secure.gravatar.com/avatar/8d94cb8be36f163c7a6148d4dc9a53d9?s=96&d=mm&r=g
调至
https://taliove.com/avatar/8d94cb8be36f163c7a6148d4dc9a53d9?s=96&d=mm&r=g

这两个链接只有域名不同,其它的均相同,返回的结果也一致。只不过从头像缓存主服务器同步缓存至本机而已。

动工

Let’s do it!

头像服务

  • 在网站根目录创建一个目录wp-avatar
  • 在该目录创建文件avatar_service.php,并拷贝以下代码至该文件
  • 给该目录网站的权限 sudo chown -R nginx:nginx ./wp-avatar
    • 我的php-fpm使用的是nginx用户名。不同的服务会不同。所以我这里使用的是nginx
  • 修改nginx配置vim /etc/nginx/conf.d/www.taliove.com.conf,新增如下配置:

修改完nginx后,重启服务systemctl restart nginx

头像缓存服务代码

自定义插件

定义好服务之后,我们需要将所有的头像访问地址,都指向我们新的服务地址。使用自定义的插件,可以进行灵活的配置。

在网站根目录wp-content/plugins创建文件夹taliove,在其下创建文件functions.php,添加如下代码:

自定义插件

然后在wordpress管理后台启用刚刚创建好的插件。

结尾

头像服务,是网站的个性化功能之一。有的人喜欢,有的人不喜欢。我是属于前者。基于以上操作后,头像服务不依赖于第三方。且访问速度快很多。当然这些缓存的头像也可以走CDN,但是httpsCDN是要收费的。所以暂时先从本地访问。

最终访问效果是,首次访问时,耗时会较长。第二次访问速度将会有质的飞跃。对于这种情况,我们需要安装一下懒加载插件即可。我使用的是a3-lazy-load插件,效果还是挺OK的。

最后博主采用了自建伪CDN,将这个缓存服务放在了CDN域名下。所有的静态资源能走CDN走CDN。毕竟第三方厂商的https CDN服务是要收费的。

Enjoy it!