现象
使用了 wordpress 七牛云存储插件之后，首页的 banner 及博文的 banner 图片都加载缓慢。而产品图片，以及博文中的图片则加载迅速。从 chrome 的 network 查看，的确部分使用了 CDN，而部分没有。
最简单的方法是查看源代码
vim wp-content/plugins/wpjam-basic/wpjam-cdn.php
可以看到，七牛云存储插件的实现原理就是在生成页面代码时，将图片资源的源站地址替换为了 CDN 地址。代码实现就是找 img 标签，然后替换。
但是，问题就来了，hestia 主题，大量采用了 inline css 的 background-image, 所以，会看到各种 banner 没有被 CDN 加速。
例如：
<div class="header-filter" style="background-image: url(http://www.sunzhongwei.com/wp-content/uploads/2018/06/wanhua.jpg)"></div>
解决方法
不太敢改插件的代码，因为说不定哪天插件会升级，所以我决定改主题的代码了。毕竟主题代码已经做了不少改动。
首页 banner
vim ./wp-content/themes/hestia/inc/sections/hestia-big-title-section.php
$hestia_big_title_background = str_replace("www.sunzhongwei.com", "cdn.sunzhongwei.com", $hestia_big_title_background);
博文 banner
vim ./wp-content/themes/hestia/inc/template-tags.php
$background_image = str_replace("www.sunzhongwei.com", "cdn.sunzhongwei.com", $background_image);
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式