解决 wordpress 七牛云存储插件无法 CDN 加速 hestia 主题的首页 banner 图片

更新日期: 2018-06-13 阅读次数: 6345 分类: wordpress

现象

使用了 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 聊聊, 查看更多联系方式