利用又拍云/七牛云/阿里云/腾讯云存储调用（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-content和wp-includes目录及里面的文件完全上传到又拍云存储中。同理七牛云、阿里云、腾讯云也是一样的操作。

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

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

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

添加规则

保存。

4、添加边缘规则

功能选择：添加HTTP头
Header 域名：Access-Control-Allow-Origin
Header 域值：*

保存即可。

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

define('FocusCDNHost','https://shopee6.flxzz.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

插件后台搜索安装即可

设置方法和代码一样。

三、检查加速效果

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