前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >开启生态新姿势 | 使用 WordPress 远程附件存储到 COS

开启生态新姿势 | 使用 WordPress 远程附件存储到 COS

原创
作者头像
云存储
修改于 2022-06-28 02:24:33
修改于 2022-06-28 02:24:33
1.5K00
代码可运行
举报
文章被收录于专栏:腾讯云存储腾讯云存储
运行总次数:0
代码可运行

在看到这篇文章前,你大概已经听说过 WordPress 了,它是使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设属于自己的网站,也可以把 WordPress 当作一个内容管理系统(CMS)来使用。

WordPress 功能强大、扩展性强,这主要得益于其插件众多,易于扩充功能,基本上一个完整网站该有的功能,通过其第三方插件都能实现所有功能。

本文将介绍如何通过使用插件实现远程附件功能,将 WordPress 的媒体库附件存储在腾讯云对象存储 COS 上,并通过腾讯云 CDN 进行加速,实现所有功能。

一、简介

首先,我们了解下将媒体库附件保存在 COS 上有以下好处:

  • 附件将拥有更高的可靠性;
  • 用户查看图片附件时将直连 COS 服务器,不占用您服务器的下行带宽/流量,用户访问速度更快;
  • 可配合腾讯云 CDN 进一步提升用户查看图片附件的速度,优化网站访问速度。

二、准备工作

1、搭建 WordPress 博客平台。

  • 您可以在 WordPress 官方页面 下载 WordPress 的最新版并查看安装指南。
  • 您也可以在安装服务器系统时在 镜像市场 中选择预装 WordPress 博客平台的云服务器(Cloud Virtual Machine,CVM)镜像。

2、创建一个公有读私有写的存储桶,存储桶的地域建议与运行 WordPress 博客平台的 CVM 的地域相同,创建详情请参见 创建存储桶 文档。

3、在存储桶列表中找到刚才创建的存储桶,并单击其存储桶名称,进入存储桶页面。

4、在左侧导航栏中,单击概览,查看访问域名并记录。

三、安装并配置插件

(一)安装插件

在 WordPress 后台,单击插件 > 安装插件,开始安装插件。您可通过下面两种方式获取插件并安装:

  • 后台直接搜索 Sync QCloud COS 进行安装(推荐使用)。
  • 您也可以从 Github 下载最新 releases 源码,通过 WordPress 后台上传安装,或者直接将源码上传到 WordPress 插件目录 wp-content/plugins,然后在后台启用。

(二)配置插件

1、单击 WordPress 左侧导航栏设置,然后在页面中配置 COS 的相关信息,配置说明见下表:

配置项

配置值

存储桶名称

创建存储桶时自定义的名称

存储桶地域

创建存储桶时所选择的地域

APPID

APPID 是您在成功申请腾讯云账户后所得到的账号,由系统自动分配,具有固定性和唯一性,可在 账号信息 中查看

SecretID、SecretKey

访问密钥信息,可前往 云 API 密钥 中获取

不上传缩略图

勾选后不会上传对应的缩略图文件,建议不勾选

不在本地保留备份

勾选后不会在本地保留源文件,建议不勾选

本地文件夹

本地保存路径,例如wp-content/uploads

URL 前缀

2、配置完成后,单击保存即可。

3、上传一个新文件进行测试,查看附件详情,查看附件图片的 URL,确认附件图片的 URL 指向腾讯云 COS。

四、扩展

1、使用 CDN 加速访问:

存储桶如果需要配置 CDN 加速,可参见 CDN 加速配置 文档。在插件设置中将 URL 前缀修改为默认 CDN 加速域名或自定义加速域名即可。

2、替换数据库中的资源地址:

如果不是新创建的站点,数据库当中必定是旧的资源链接地址,我们需要将资源地址进行替换,插件提供了替换功能,请在首次替换前记得备份。

3、设置跨域访问:

在文章中引用对应的资源链接,控制台会提示跨域的错误No 'Access-Control-Allow-Origin' header is present on the requested resource。

原因是没有添加 header。您需要在跨域访问 CORS 设置中添加 HTTP Header 配置。下面提供两种途径进行配置:

i. 在 CDN 控制台上配置

  • 如允许所有域名,则配置如下:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Access-Control-Allow-Origin: *

ii. 只允许您个人的域名访问,则配置如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Access-Control-Allow-Origin: https://example.com

4、设置回源:

如果不在 WordPress 后台媒体库处上传资源,建议开启回源设置。开启之后,客户端首次访问 COS 源文件时,COS 发现无法命中对象时,对客户端返回 302 HTTP 状态码并跳转至回源地址对应的地址,此时对象由源站提供给客户端,保证访问。

同时 COS 从源站复制该文件并保存至存储桶对应的目录中;第二次访问时 COS 直接命中对象并返回给客户端。

五、总结

本文介绍 WordPress 的媒体库附件远程到对象存储 COS 实践分享到此结束,后续将会给大家带来系列关于生态平台/插件相关内容,另外,我们还会为大家带来丰富多彩的生态赋能活动,请敬请期待!

有关生态插件及其他活动信息 欢迎加入交流群,获取生态活动最新资讯

— END —

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Linux常用命令记录
一旦有空,就开始学习Linux常用命令,不想求学会多少,只要每天学习一点点就行了。之所以记录一下所学习的东西,是为了加深一下印象,下次再次遇到也就印象深刻了。教程如下:
王小婷
2025/05/18
270
Linux常用命令记录
在服务器上安装Web服务器Apache
在阿里云上购买主机和服务器之后,需要在服务器上面安装一些环境,今天要安装的是Web服务器Apache。
王小婷
2025/05/18
1190
在服务器上安装Web服务器Apache
在windows下安装Python(Python入门教程)
在搭建自己博客的过程之中,对于一个零基础的小白来说,其实要做的东西非常多,我把这个过程之中遇到的一些东西都写在了这个专题里面。今天之所以安装Python,是打算把之前写的所有的文章都爬下来,之后封装成接口,直接调用数据,展示在自己搭建的博客的界面里面。
王小婷
2025/05/18
3600
在windows下安装Python(Python入门教程)
从零开始学习React-开发环境的搭建(一)
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使用两个,不让下一份工作可能就很难了~
王小婷
2025/05/19
3240
从零开始学习React-开发环境的搭建(一)
'wepy' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
在学习安装wepy创建项目的时候,开启实时编译,出现了这样的一个报错: 'wepy' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
王小婷
2019/03/06
3.2K0
'wepy' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
eclipse里面如何查看svn提交记录日志
1:在菜单栏处找到“Window” 找到“Show View” 找到“Other”,点击打开“Other”
王小婷
2025/05/18
1330
eclipse里面如何查看svn提交记录日志
Install fail! Error: EBUSY: resource busy or locked, symlink
从github上面下载了一个项目并且运行学习,如果不会可以看:如何运行查看github上的项目(新手教程二)https://www.jianshu.com/p/29a854c23c82
王小婷
2019/05/17
4K1
Install fail! Error: EBUSY: resource busy or locked, symlink
小程序计时器
之前写了一个小程序倒计时的demo,在网上查看了一下,计时器很少有demo,现在来写一个。
王小婷
2019/06/24
3.1K0
小程序计时器
Install fail! Error: EBUSY: resource busy or locked, symlink
从github上面下载了一个项目并且运行学习,如果不会可以看:如何运行查看github上的项目(新手教程二)https://www.jianshu.com/p/29a854c23c82
王小婷
2025/05/18
930
Install fail! Error: EBUSY: resource busy or locked, symlink
微信小程序wepy框架入门教程-查看并运行wepy源码(二)
在之前,已经准备好几个源码 现在要运用的是wepy仿微信聊天界面 多看看源码,然后动手做一下 差不多就可以了解一二了 查看并运行源码-wepy仿微信聊天界面 https://github.com/wepyjs/wepy-wechat-demo
王小婷
2025/05/18
410
微信小程序wepy框架入门教程-查看并运行wepy源码(二)
小程序从零开始开发到上线的过程
1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: https://mp.weixin.qq.com/ 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。注册完成之后开始登录。
王小婷
2019/04/09
7540
小程序从零开始开发到上线的过程
Vue项目新建一个路由页面
2:打开App.vue {name:'/components/Test',navItem:'测试界面'},
王小婷
2025/05/18
770
Vue项目新建一个路由页面
wepy框架-触摸内容滑动组件使用步骤
2:在WebStorm里面打开初始化生成的项目 编写index.wpy界面的代码 以下代码来自插件 (复制过来即可使用) https://github.com/dlhandsome/wepy-com-swiper
王小婷
2025/05/18
380
wepy框架-触摸内容滑动组件使用步骤
如何反编译H5界面的源代码(fiddler抓包)
查看端口号:8888 依次点击: Tools ->Options -> Connections -> Allow remote computers to connect.
王小婷
2019/04/17
2.7K0
如何反编译H5界面的源代码(fiddler抓包)
如何查看后端接口数据结构
如何查看后端接口数据结构?拿echarts来说,首先,使用ajax向后端请求数据,各个值拼接成一个字符串返回 tooltip: { formatter: functi
王小婷
2019/05/31
1K0
微信小程序wepy框架入门教程 - 安装less/sass(四)
王小婷
2025/05/18
490
微信小程序wepy框架入门教程 - 安装less/sass(四)
Uncaught (in promise) DOMException
这是一个困扰我许久的bug,debugger的时候没有找到错误的地方,然后今天早晨进公司,换了代码的加载位置和顺序,终于在浏览器里面找到了报错。
王小婷
2019/04/18
4.2K0
Uncaught (in promise) DOMException
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
在echarts的叠堆折线图中,有这样的一个问题,从后端请求过来的数据是正确的,但是请求的y轴的值和y轴坐标对不上。
王小婷
2025/05/18
1210
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
wepy踩坑-未发现相关 sass 编译器配置,请检查wepy.config.js文件
执行 wepy build编译的时候,会出现这样的错误 [WARNING] 找不到编译器:wepy-compiler-sass。 [Error] 未发现相关 sass 编译器配置,请检查wepy.co
王小婷
2019/03/21
1.7K0
wepy踩坑-未发现相关 sass 编译器配置,请检查wepy.config.js文件
Github提交更新的代码
项目已经上传到github,现在修改了文件里面的某些代码,(修改了按钮的颜色,改成了蓝色)要把修改部分的代码提交上去,那么如何覆盖Github上的同一文件代码呢?
王小婷
2019/03/19
1.7K0
Github提交更新的代码
推荐阅读
相关推荐
Linux常用命令记录
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验