利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速

利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图

现在很多站长都利用CDN或者云存储进行WordPress加速,一般都喜欢设置动静分离。今天虾皮路再介绍一下利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速的教程。

之前虾皮路也介绍了不少WordPress的优化加速的文章,比如:

利用Cachify插件实现网站加速-WordPress必备插件之一
WordPress使用又拍云CDN云存储网站加速及图片Webp优化全教程
优化减少数据库查询次数 加快WordPress访问速度》等等

或者通过插件进行CSS和JS进行CDN加速,如《CommonWP插件-使用免费CDN加速JS及CSS文件让海外网站访问更快》,今天虾皮路就介绍无需通过插件,纯代码的方式进行CSS和JS调用加速。

本次虾皮路以又拍云为例。同理七牛云腾讯云、阿里云等都是可以使用的。

一、原理说明

一般我们WordPress的访问速度主要分为图片、CSS、JS等静态资源和php这些动态资源。前面我们习惯将图片放到图床上进行动静分离去加速网站,但是CSS和JS文件也是影响网站速度的一大因素。这里虾皮路将CSS和JS文件放到又拍云的存储中,打开网站时无需调用本地的CSS和JS文件,直接调用又拍云存储的CSS和JS文件。从而达到网站加速的目的。

注意:因为又拍云存储是自带CDN的,在各地调用时会就近调用,加快网站加载速度。不过这种方法对于国内主机的话加速不算明显,如果是海外主机完全可以尝试。

二、加速教程

1、首先我们利用FTP登陆又拍云的云存储,将自己站点的wp-contentwp-includes目录及里面的文件完全上传到又拍云存储中。同理七牛云、阿里云、腾讯云也是一样的操作。

注意:必须将文件夹里的文件完整上传。

2、登陆又拍云的后台,点击配置

利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图(1)

3、点击访问控制,打开CORS 跨域共享

利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图(2)

添加规则

利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图(3)

保存。

利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图(4)

4、添加边缘规则

利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图(5)
利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图(6)
利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图(7)
功能选择:添加HTTP头
Header 域名:Access-Control-Allow-Origin
Header 域值:*

保存即可。

5、在WordPress的主题的functions.php文件加入如下代码

define('FocusCDNHost','https://www.shopee6.com');//wordpress网站网址
define('FocusCDNRemote','https://cdn.shopee6.com');//cdn域名
define('FocusCDNIncludes','wp-content,wp-includes');//设置加速目录
define('FocusCDNExcludes','.php|.xml|.html|.po|.mo');//设置文件白名单
define('FocusCDNRelative','');//Check this if you want to have links like <wp-content/abc.png> rewritten - i.e. without your blog's domain as prefix.

function do_cdnrewrite_ob_start() {
$rewriter = new FocusCDNRewriteWordpress();
$rewriter->register_as_output_buffer();
}
add_action('template_redirect', 'do_cdnrewrite_ob_start');

class FocusCDNRewriteWordpress extends FocusCDNRewrite
{
function __construct() {
$excl_tmp = FocusCDNExcludes;
$excludes = array_map('trim', explode('|', $excl_tmp));

parent::__construct(
FocusCDNHost,
FocusCDNRemote,
FocusCDNIncludes,
$excludes,
!!FocusCDNRelative
);
}
public function register_as_output_buffer() {
if ($this->blog_url != FocusCDNRemote) {
ob_start(array(&$this, 'rewrite'));
}
}

}

class FocusCDNRewrite {
var $blog_url = null;
var $cdn_url = null;
var $include_dirs = null;
var $excludes = array();
var $rootrelative = false;

function __construct($blog_url, $cdn_url, $include_dirs, array $excludes, $root_relative) {
$this->blog_url = $blog_url;
$this->cdn_url = $cdn_url;
$this->include_dirs = $include_dirs;
$this->excludes = $excludes;
$this->rootrelative = $root_relative;
}

protected function exclude_single(&$match) {
foreach ($this->excludes as $badword) {
if (stristr($match, $badword) != false) {
return true;
}
}
return false;
}

protected function rewrite_single(&$match) {
if ($this->exclude_single($match[0])) {
return $match[0];
} else {
if (!$this->rootrelative || strstr($match[0], $this->blog_url)) {
return str_replace($this->blog_url, $this->cdn_url, $match[0]);
} else {
return $this->cdn_url . $match[0];
}
}
}

protected function include_dirs_to_pattern() {
$input = explode(',', $this->include_dirs);
if ($this->include_dirs == '' || count($input) < 1) {
return 'wp\-content|wp\-includes';
} else {
return implode('|', array_map('quotemeta', array_map('trim', $input)));
}
}

public function rewrite(&$content) {
$dirs = $this->include_dirs_to_pattern();
$regex = '#(?<=[(\"\'])';
$regex .= $this->rootrelative
? ('(?:'.quotemeta($this->blog_url).')?')
: quotemeta($this->blog_url);
$regex .= '/(?:((?:'.$dirs.')[^\"\')]+)|([^/\"\']+\.[^/\"\')]+))(?=[\"\')])#';
return preg_replace_callback($regex, array(&$this, 'rewrite_single'), $content);
}

}

将以上域名改为自己的域名。刷新后台缓存即可。

如果不想使用代码的,可以试一下WordPress插件,比如CDNsun

插件后台搜索安装即可

设置方法和代码一样。

利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速插图(8)

三、检查加速效果

检查方法很简单,打开网站,检查源代码即可。

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

虾皮路版权所有,未经允许不得转载:虾皮路 » 利用又拍云/七牛云/阿里云/腾讯云存储调用(CSS、JS)进行WordPress CDN加速

分享到: 更多 (0)
坚持下去不容易,打个赏呗

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活