0%

将WordPress部署到七牛云存储实现CDN加速

首先我们需要了解什么是 CDN 加速,CDN 加速简单的来说,就是把原服务器上数据复制到其他服务器上,用户访问时,那台服务器近访问到的就是那台服务器上的数据。CDN 加速优点是成本低,速度快。适合访问量比较大的网站。而且,如果你的博客所在的主机是限制流量的,一个很好的办法就是把图片还有其他静态文件部署到其他服务器,这样就会减少主机流量消耗了。 20141112194809 那么我们为什么要用七牛呢?七牛的优势总结如下: 1、安全性能:为用户数据创建至少三个副本并跨 IDC 存储到多个数据中心,同时支持防盗链设置。

2、数据存储:支持图片、音频、视频、JS、CSS 等多种静态文件的存储,并支持断点续传。 3、云端加速:七牛的 500 多个加速节点遍布全球,会自动选择离用户最近的节点,并实现数据上传下载的双向加速。 4、数据处理:支持云端在线压缩、裁剪等图片处理及音频、视频格式转换,还可在线进行视频截图。 5、开发合作:为开发者提供了多种接入工具及丰富的开发包,提供 API、SDK 教程示例。 6、域名绑定:已备案的网站可申请绑定自己的域名,未备案的用户可使用七牛的二级域名绑定。 7、镜像功能:通过一定的设置,可自动将网站原有图片等静态文件镜像到七牛,而无需重新上传到七牛服务器。 8、外链分享:由于七牛云支持外链,可以将文件上传至七牛,直接利用文件链接地址作外链调用。

首先我们需要先有一个七牛云存储的账号 七牛云存储网址:https://portal.qiniu.com/ 点击此链接申请一个七牛云存储账号,创建一个公开空间,比如我创建一个空间叫 cuiqingcai,和我的域名相对应。 QQ截图20141112184648 创建完成之后它就会为我的这个空间分配一个二级域名。我的就叫 cuiqingcai.qiniudn.com 然后我们需要部署我们的网站,点击右边的空间设置,选择镜像存储里面的一键加速网站,这时就需要你输入镜像源,这里就填写你的博客地址,然后勾选下方的使用默认的 robots.txt 配置文件。 Q:为什么要配置 robot.txt 文件? A:因为你配置了这个网址确定加速之后,七牛会为我们生成一个镜像空间,这个镜像空间的地址就是二级域名地址,我的便是 cuiqingcai.qiniudn.com,你访问之后发现它的内容和我的 cuiqingcai.com 博客网址是完全一致的,这也是为什么把它称为镜像空间的原因。因为内容是一致的,所以会导致搜索引擎对源站 也就是你的域名进行封锁,所以我们可以通过配置 robots.txt 文件避免这种情况的发生。 好,我们继续,点击确定之后我们就能配置好了镜像空间。 QQ截图20141112185908 下面还有一个域名设置,它默认会为你分配一个默认永久的空间,比如我的就是 cuiqingcai.qiniudn.com,这个是七牛的二级域名,七牛的一大特色就是支持域名绑定,在这里你可以添加你的二级域名,不过貌似需要你账户余额大于 10 块,但是它是不收费的。另外的要求就是你的域名需要备案,如果没有备案,那就不行了。 点击下面的申请域名绑定,然后点击新窗口右下角的自定义域名,会出现以下内容。 QQ截图20141112190327 比如你就可以在此处输入你自己定义的二级域名加备案号。比如我的输入 cdn.cuiqingcai.com 便可以,然后输入备案号,提交审核需要一周之内。你可以先用着它给你分配的二级域名。 好了,配置好了镜像空间和你的域名(或者用默认域名)便可以配置我们的 WordPress 了。 登陆 wordpress 仪表盘后,在浏览器中输入:http://你的域名/wp-admin/options.php,使用 Ctrl+F 命令找到 upload_url_path 选项,在其中输入 http://七牛二级域名/wp-content/uploads ,注意,后面一定不要加“/”,比如我的便输入 http://cuiqingcai.qiniudn.com/wp-content/uploads。最终格式如下图: 1114 设置之后,点击最下面的确定,这时你发现你的媒体库中的所有的图片的链接格式都已经更改了,已经不是原来的域名链接了。 而变成了七牛云存储你设置的二级域名的链接。比如我的一张图片链接就变成了 http://cuiqingcai.qiniudn.com/wp-content/uploads/2014/11/545ae06e25ea9.png 而你点击七牛云存储下的内容管理,就会发现你的博客下的所有图片都已经同步到了里面。截图如下: QQ截图20141112191445 以后你再新上传的照片也会自动同步到七牛上,此方法的好处在于你只需在 wordpress 中上传图片,就会自动同步到七牛空间,而无需登陆七牛上传并手动输入图片地址了。并且除了图片地址改变外,其他操作如常。引用图片时会自动加载七牛空间中的图片,实现 wordpress 免费 CDN 全网加速。不便之处是上传的图片仍会在 wordpress 空间中保留,占用空间容量。也就是说,它仍然在你的本地保存了一份,不过访问时会访问七牛的网址,也就可以实现 CDN 加速,而且为你的主机节省流量了。当然,由于图片已同步至七牛镜像空间中,你也可以选择删除 wordpress 中的图片。 现在浏览你的网站,如果现在没有问题,那么你就可以不用浏览下面的额外内容,如果有部分图片显示有问题,那么请继续看。 如果你的网站设置了特色图像功能,比较悲剧的事情就发生了。你的网站可能无法读取特色图像,整个页面也显得很难看。这是因为 WordPress 使用了 timthumb 缩略图剪裁插件,通过这个插件,用户在后台上传的各种图片都会按照预先在前端页面中设置的大小进行剪裁,大大降低了前端开发的难度。 由于 timthumb 默认设置中,出于安全考虑是不允许缓存外部地址图片的。因此我们打开 timthumb 缓存路径时会提示 “您可能无法从该网站获取的图像“。所以解决的办法来了。 找到这个主题所在的目录,找到 timthumb.php 文件,将下面一条语句

1
 define ('ALLOW_ALL_EXTERNAL_SITES', false)

替换为

1
 define ('ALLOW_ALL_EXTERNAL_SITES', true)

这样就可以实现通过外链抓取图片了,特色图像便显示出来了。 现在再浏览你的网站,看看还有没有什么问题,如果没有问题,现在就美美地享受移植到七牛上带来的便捷和欢乐吧! 如果还有问题,请继续阅读下方内容。 现在一般的网站模板加载都没有问题了,如果你用的 WordPress 模板比较高级,利用了 Ajax 异步加载功能,我们便会发现异步加载已经是不会生效的,也可能你的整个网站样式变得混乱。这是为什么?是因为你修改了路径为七牛的路径,加载 JS 或者 CSS 文件时便会去七牛那里寻找,但是现在七牛上只同步了图片,JS 和 CSS 文件是不存在的,这时因为找不到这些文件,你的网站便会出现问题了。 现提供两个解决方法: 1.使用水煮鱼的“七牛镜像存储 WordPress 插件”将你的其他文件(如 JS,CSS)同步到七牛 插件下载地址:https://wordpress.org/plugins/wpjam-qiniu/ 配置好这个插件之后,你可以点击 插件使用帮助 来配置这个插件,配置完了之后便可以将你的 js 和 css 文件上传到七牛中。你的 Ajax 异步加载就不会出现问题了。 2.使用 WP Super Cache 插件进行同步 插件下载地址:http://wordpress.org/plugins/wp-super-cache/ 贴心提示:插件安装之后可能出现如下错误 QQ截图20141112193509 固定链接出错,这时你更改下左边面板-设置-固定链接,更改为其他选项,不要选择原来的固定链接就好了,比如我选择文章名这个选项,插件就可以顺利进入啦。 在这里点击 CDN 选项卡,点击开启 CDN 支持。 112194058 其中 Off-site-URL 更改为你的七牛镜像域名,比如我的便是 cuiqingcai.qiniudn.com,这样点击确定之后便同样可以把你的 JS 等文件同步到七牛。你的样式或者 Ajax 异步加载就可以顺利实现啦。 通过以上步骤,我们就可以将我们的博客部署到七牛云存储上,提高网站加载速度,同时也节省我们的主机流量。一举两得,美哉美哉! 到此为止,我们的网站应该都没有问题了,尽情享受 CDN 加速之后带来的效果吧!如果还有问题,请评论或者给我留言。