如何 WordPress 使用 OSS 上传图片、文件

35次阅读

共计 2222 个字符,预计需要花费 6 分钟才能阅读完成。

如何 WordPress 使用 OSS 上传图片、文件插图

简介:  如何使用 OSS 上传 WordPress 的图片文件

准备

可访问的 wordpress 站点

OSS

操作

1、OSS 相关

创建 Bucket 取名为 wordpress-test1 , 按照控制台指引填入其他的信息,点击确定即可:

如何 WordPress 使用 OSS 上传图片、文件插图1
如何 WordPress 使用 OSS 上传图片、文件插图2

创建完成后,进入到 Bucket 详情,点击  Bucket 配置 > 域名管理 绑定 OSS 访问域名:

如何 WordPress 使用 OSS 上传图片、文件插图3

输入域名后,阿里云会自动检测域名的管理是否也在阿里云,如果域名管理也在阿里云,开启自动添加 CNAME 记录会自动帮你做解析处理。如果没有可以到对应的域名管理控制台自行添加,这里不再赘述。

如何 WordPress 使用 OSS 上传图片、文件插图4

为了访问速度更快,这里还需要配置一下 CDN。在添加域名成功后点击第二列的 阿里云 CDN 加速,然后会自动跳转到 CDN 创建页面,参考控制台步骤创建即可:

如何 WordPress 使用 OSS 上传图片、文件插图5

最后一步,创建完成后到域名解析里面找到刚刚绑定的域名,将域名解析到 CDN 对应的 CNAME 即可。

2、设置 Ram 用户访问 OSS

进入到  访问控制  控制台,创建新用户或者选择已有用户,为其分配 OSS 的使用权限:

如何 WordPress 使用 OSS 上传图片、文件插图6

回到  认证管理 页面,如果没有 AccessKey 的话可以创建一个。这个 key 和 secret 用于后面 wordpress 插件配置使用,请保存好。

如何 WordPress 使用 OSS 上传图片、文件插图7

3、安装 OSS 上传插件

进入到 wordpress 的管理后台,进入  插件 > 安装插件 ,在搜索框中输入 oss 进行搜索,然后选择“WPOSS 阿里云对象存储”这个插件进行安装。

如何 WordPress 使用 OSS 上传图片、文件插图8

启用刚安装的扩展,进行设置:

如何 WordPress 使用 OSS 上传图片、文件插图9

设置完成后保存,进入到 wordpress 的媒体库页面可实验一下是否可用。

如何 WordPress 使用 OSS 上传图片、文件插图10
如何 WordPress 使用 OSS 上传图片、文件插图11

如上图,上传成功后图片可正常显示,并且在  文件 URL  中的连接为绑定的 OSS 域名,红框中的路径为上面配置中填写的路径。

4、上传插件问题

插件使用后,会发现上传的文件为图片的各个尺寸的缩略图,如下图的文件名,但是该图片的原始图片并没有在目录中,这就导致在 wordpress 中使用原图的时候会出现图片找不到的情况。

如何 WordPress 使用 OSS 上传图片、文件插图12

对插件的源代码进行了一下修改,进入到文件 wp-content/plugins/wposs/index.php,找到 upload_and_thumbs 方法,将代码改为如下内容:

/**

* 上传图片及缩略图

* @param $metadata: 附件元数据

* @return array $metadata: 附件元数据

* 官方的钩子文档上写了可以添加 $attachment_id 参数,但实际测试过程中部分 wp 接收到不存在的参数时会报错,上传失败,返回报错为“HTTP 错误”

*/

public function upload_and_thumbs($metadata) {

// 新增修改内容 —— start

if (isset( $metadata[‘original_image’] )) {

# 1. 原始图片

$attachment_key = dirname($metadata[‘file’]) . ‘/’ .$metadata[‘original_image’]; // 远程 key 路径, 此路径不是以 / 开头

$attachment_local_path = $this->wp_upload_dir[‘basedir’] . ‘/’ . $attachment_key; # 在本地的存储路径

$this->_file_upload($attachment_key, $attachment_local_path); # 调用上传函数

}

// 新增修改内容 —— end

if (isset( $metadata[‘file’] )) {

# 1. 先上传主图

$attachment_key = $metadata[‘file’]; // 远程 key 路径, 此路径不是以 / 开头

$attachment_local_path = $this->wp_upload_dir[‘basedir’] . ‘/’ . $attachment_key; # 在本地的存储路径

$this->_file_upload($attachment_key, $attachment_local_path); # 调用上传函数

}

# 如果存在缩略图则上传缩略图

if (isset($metadata[‘sizes’]) && count($metadata[‘sizes’]) > 0) {

foreach ($metadata[‘sizes’] as $val) {

$attachment_thumbs_key = dirname($metadata[‘file’]) . ‘/’ . $val[‘file’]; // 生成 object 的 key

$attachment_thumbs_local_path = $this->wp_upload_dir[‘basedir’] . ‘/’ . $attachment_thumbs_key; // 本地存储路径

$this->_file_upload($attachment_thumbs_key, $attachment_thumbs_local_path); // 调用上传函数

}

}

return $metadata;

}

由此即可解决原图无法上传的问题。

你的工作,由 AI 赋能!🔥

还在为文案、脚本卡壳、做视频、写代码、设计图片灵感枯竭而烦恼吗?🤯

板板 AI,你的工作好帮手!

一键生成    各种文案、脚本、图片、视频、代码、报告,轻松应对各种工作 / 营销需求!

现在注册体验,即可获得:

  • 🎁 30 积分基础模型余额
  • 🎁 3 积分高级模型余额
  • 🎁 3 积分绘画余额

还不快来试试?

点击链接,开启你的 AI 创作之旅!>>>https://www.banbanai.cn

板板 AI,让你的工作效果发挥无限可能! 🚀

正文完
关注板板AI免费获得移动AI助手
post-qrcode
 
天天
版权声明:本站原创文章,由 天天 2024-09-02发表,共计2222字。
转载说明:

本文由 天天资讯网 整理发布,转载请注明出处.
版权声明:部分文章内容或图片来源于网络,我们尊重作者的知识产权。如有侵犯,请联系我们在第一时间删除。