WordPress博客接入七牛CDN

前言

博客往往带有很多的配图及资源文件，使用CDN可以对资源文件进行加速，加快访问速度。

有很多网站提供云服务，这里介绍的是结合七牛CDN云服务，将图片、JS、CSS等资源文件进行加速。

同时七牛有免费提供10G存储空间、每个月10G的HTTP国内下载流量、10G海外下载流量，同时有图片处理，可以加上水印，可以基本满足需求。

接下来将介绍如果处理七牛和域名相关配置，将资源文件转至CDN。如轩枫阁将js|css|png|jpg|jpeg|gif|ico等文件请求由www.xuanfengge.com替换为cdn.xuanfengge.com。

一、配置七牛

1.1 添加对象存储

1.2 设置镜像源

1.3 添加绑定加速域名

二、配置CNAME

配置CNAME的目的在于，可以将本站的子域名请求指向至其它域名处理。

比如请求cdn.xuanfengge.com而指向至七牛的CDN服务器，并缓存返回相关资源。

登录域名服务商
解析域名，添加CNAME
重新解析，一般解析时间为10分钟
具体可参考七牛官方文档：https://support.qiniu.com/hc/kb/article/68977

三、替换url

将页面中的资源文件URL替换成CDN域名即可，具体步骤如下：

在functions.php文件中添加以下代码

// 七牛CDN
if ( !is_admin() ) {
    add_action('wp_loaded','cdn_ob_start');
 
    function cdn_ob_start() {
        ob_start('qiniu_cdn_replace');
    }
 
    // 修改自七牛镜像存储 WordPress 插件
    function qiniu_cdn_replace($html){
        $local_host = 'http://www.xuanfengge.com'; //博客域名
        $qiniu_host = 'http://cdn.xuanfengge.com'; //七牛域名
        $cdn_exts   = 'js|css|png|jpg|jpeg|gif|ico|webp'; //扩展名（使用|分隔）
        $cdn_dirs   = 'wp-content|wp-includes'; //目录（使用|分隔）
 
        $cdn_dirs   = str_replace('-', '\-', $cdn_dirs);
 
        if ($cdn_dirs) {
            $regex  =  '/' . str_replace('/', '\/', $local_host) . '\/((' . $cdn_dirs . ')\/[^\s\?\\\'\"\;\>\<]{1,}.(' . $cdn_exts . '))([\"\\\'\s\?]{1})/';
            $html =  preg_replace($regex, $qiniu_host . '/$1$4', $html);
        } else {
            $regex  = '/' . str_replace('/', '\/', $local_host) . '\/([^\s\?\\\'\"\;\>\<]{1,}.(' . $cdn_exts . '))([\"\\\'\s\?]{1})/';
            $html =  preg_replace($regex, $qiniu_host . '/$1$3', $html);
        }
        return $html;
    }
}

// 七牛CDN

if ( !is_admin() ) {

add_action('wp_loaded','cdn_ob_start');

function cdn_ob_start() {

ob_start('qiniu_cdn_replace');

}

// 修改自七牛镜像存储 WordPress 插件

function qiniu_cdn_replace($html){

$local_host = 'http://www.xuanfengge.com'; //博客域名

$qiniu_host = 'http://cdn.xuanfengge.com'; //七牛域名

$cdn_exts = 'js|css|png|jpg|jpeg|gif|ico|webp'; //扩展名（使用|分隔）

$cdn_dirs = 'wp-content|wp-includes'; //目录（使用|分隔）

$cdn_dirs = str_replace('-', '\-', $cdn_dirs);

if ($cdn_dirs) {

$regex = '/' . str_replace('/', '\/', $local_host) . '\/((' . $cdn_dirs . ')\/[^\s\?\\\'\"\;\>\<]{1,}.(' . $cdn_exts . '))([\"\\\'\s\?]{1})/';

$html = preg_replace($regex, $qiniu_host . '/$1$4', $html);

} else {

$regex = '/' . str_replace('/', '\/', $local_host) . '\/([^\s\?\\\'\"\;\>\<]{1,}.(' . $cdn_exts . '))([\"\\\'\s\?]{1})/';

$html = preg_replace($regex, $qiniu_host . '/$1$3', $html);

}

return $html;

}

更新文件，查看图片URL是否生效

四、注意点

如果将JS、CSS文件进行CDN加速，最好将发布的资源文件加上md5版本号，否则需要手动刷新缓存新文件才会生效。
可以自行设置robots.txt