简单分享wordpress免插件代码版实现动静分离的心得体会

关于wordpress动静分离的心得体会分享

不管你使用wordpress的那一款主题,都逃不过一个问题,那就将wordpress本地服务器上的动态资源和静态资源分为远程存放(静态资源)和本地存放(动态),这样做的好处只有一个,就是提高网站的访问速度,提升网站的并发能力,有效提升用户体验和搜索引擎的友好度,毕竟,在这个快节奏的生活里,没有谁有耐心能慢慢的等待你的网页打开,这里,可能你的用户就流失了。废话不多说,为此,我也走过不少弯路,虽然网上有很多教程,但大多不是很全面,为此我也折腾得也不是一天两天,当然,还有一路各路好友的帮助与指导。所以今天整理出来,分享给有需要的朋友。

一、建立一个OSS,以存放网站的静态文件

1、以阿里为例:新建一个Buckets,读写权限设置为“公共读”

随后设置基础设置—镜像回源—创建两个这样的规则

然后到权限管理—跨域设置里添加你的域名,你的主域名和你需要准备的一个二级域名(用来访问静态资源的)

在传输管理—域名管理里配置自己需要绑定这个OSS的域名,然后点击配置CDN,因为我需要最终让CDN来访问这个OSS,当CDN上没有资源的时候会加到OSS上来取,OSS上没有时会回源到你的主服务器。

2、配置CDN,回源源站选择刚才创建的OSS

这里需要注意的是,如果你希望访问图片是WEBP格式的。按下面两步设置即可:

1、CDN里找到边缘脚本,按下图这样设置,必须先将脚本发布到“模拟环境”后,再发布到生产环境。


代码如下:

m1 = and($http_accept, match_re($http_accept, '.*image\/webp.*'))
m2 = match_re($uri, '.+(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png)$')
 
if and(m1, m2) {
    rewrite(concat($uri, '!webp'), 'enhance_redirect', 301)
}

2、回到OSS里,选择数据处理—图片处理,新建一个名为webp名字的样式,按下面图中的操作即可。
设置访问选择自定义分隔符。

二、部署本地代码,定义那些是静态文件

1、将以下代码放到functions.php文件,文件类型可以自行添加。

代码来源:张戈

/**
 * WordPress CDN代码版 By 张戈博客
 * 原文地址:https://zhang.ge/4905.html
**/
function QiNiuCDN(){
    function Rewrite_URI($html){
        $domain = 'wzzme\.com';   //填写主站域名,小数点前需要加上反斜杠转义
        $static = 'cdn.tzzme.com'; //填写二级静态域名
        //更多静态资源需要替换,可以将后缀加到后面的括号,使用分隔符分割
        $html = preg_replace('/http(s|):\/\/'.$domain.'\/wp-([^"\']*?)\.(jpg|png|gif|bmp|jpeg|css|js|woff|woff2|ttf|eot|svg|dat|ico)/i','//'.$static.'/wp-$2.$3',$html);
        return $html;
    }
    if(!is_admin()){
        ob_start("Rewrite_URI");
    }
}
add_action('init', 'QiNiuCDN',100);

2、安装OSS插件,推荐老部落的WPOSS(阿里云对象存储)

很简单,按说明填写即可。


到此,设置完成。如果你是老站点,用此方法后,需要自行到数据库替换之前网站地址,比如搜索:https://你的域名/wp-content/uploads/,然后用静态的二级域名批量替换。当然你不替换也是可以的,只是替换后效果更佳,毕竟静态文件是直接访问的OSS上的,而不是通过正规则匹配给你的。

三、写在最后

今天的分享就到这里,写了这么多,也只是一点点个人的心得体会,如果你有更好的方法,欢迎留言探讨。

人已赞赏
资源分享

Mozilla为什么要宣布暂停Firefox Send文件共享服务

2020-7-13 23:41:11

资源分享

Wordpress B2主题迅虎移动支付演示页面(暂时需要登录)

2020-7-20 17:21:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索