WordPress 古腾堡区块插件，将图片文件上传到 Chevereto 图床托管系统

这是一款专为 WordPress 古腾堡编辑器设计的强大插件，支持直接在区块编辑器中上传图片至 Chevereto 图床，并提供完善的图片管理与展示功能。无论是内容创作者还是开发者，都能通过简洁的操作流程提升图片管理效率。

🌟 核心功能特性

多方式上传：支持拖拽文件至编辑器上传，或通过传统文件选择方式上传，适配不同操作习惯。
实时预览机制：图片上传后立即在编辑器中生成预览，直观呈现效果。
元信息管理：可添加图片标题、描述等元数据，优化内容结构化。
响应式设计：自动适配不同设备屏幕，确保前端显示效果统一。
安全权限控制：包含 API 密钥加密存储、用户权限验证及 Nonce 安全校验。

📦 安装与激活指南

ZIP 包安装方式

下载地址

https://github.com/hudsonsir/Chevereto-WordPress

将所有文件打包为 chevereto-block.zip 。
进入 WordPress 后台 →「插件」→「安装插件」→「上传插件」，选择 ZIP 包并安装。
安装完成后激活插件。

⚙️ 基础配置与 API 密钥获取

第一步：设置 API 信息

进入 WordPress 后台 →「设置」→「 Chevereto 图床」。
填写以下信息：
- API 密钥：Chevereto 用户账户的 API 密钥。
- API 地址：默认 https://img.i18.net/api/1/upload，自建图床需修改为自定义地址。

第二步：获取 API 密钥

登录 Chevereto 图床网站，进入用户设置页面。
找到「API 密钥」选项，复制密钥并粘贴到插件设置中。

第三步：权限确认

确保当前用户拥有 upload_files（文件上传）和 edit_posts（编辑文章）权限。

🚀 快速使用指南

1. 添加区块

在古腾堡编辑器中点击「+」，搜索「Chevereto 」或在「媒体」分类中选择「Chevereto 图片上传」区块。

2. 上传图片

拖拽上传：直接将图片拖至上传区域，支持 JPG 、 PNG 、 GIF 、 WebP 等格式（单文件 ≤10MB）。
点击上传：点击「选择图片」按钮，从文件管理器中选取文件。

3. 编辑图片属性

在区块右侧设置面板中可修改：
- 标题、描述文本；
- 宽度（100-1200 像素）；
- 对齐方式（左对齐、居中、右对齐）。

4. 图片管理

更换图片：点击预览区「更换图片」按钮；
删除图片：点击「删除图片」按钮；
查看详情：在设置面板查看图片 ID 和 URL 。

🎨 样式定制与高级配置

自定义 CSS 样式

通过主题 style.css 或自定义 CSS 插件添加：

css

/* 图片容器圆角与阴影 */
.chevereto-block-figure {
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

/* 标题字体样式 */
.chevereto-block-title {
    font-family: "Arial", sans-serif;
    color: #333;
    font-size: 18px;
}

/* 描述文本样式 */
.chevereto-block-description {
    font-style: italic;
    color: #666;
}

高级开发配置

修改 API 端点（在主题 functions.php 中添加）：phpadd_filter('chevereto_block_api_url', function($url) { return 'https://your-domain.com/api/1/upload'; // 替换为自建图床 API 地址 });
自定义上传参数：phpadd_filter('chevereto_block_upload_params', function($params) { $params['nsfw'] = 0; // 禁用 NSFW 标记 $params['category_id'] = 1; // 指定分类 ID return $params; });
调整文件大小限制（单位：字节）：phpadd_filter('chevereto_block_max_file_size', function($size) { return 5 * 1024 * 1024; // 改为 5MB 限制 });

🔒 安全与性能优化

安全机制

AJAX 请求包含 Nonce 验证，防止 CSRF 攻击；
严格校验文件类型，避免恶意文件上传；
API 密钥加密存储，不直接暴露在前端。

性能优化

异步上传机制，不阻塞编辑器操作；
JS/CSS 文件按需加载，减少资源占用；
响应式图片加载，适配不同设备带宽。

📚 兼容性与支持

兼容主题

Twenty Twenty-Three
Astra
GeneratePress
OceanWP

技术要求

WordPress 5.0+，PHP 7.4+
需启用古腾堡编辑器（WordPress 5.0 及以上默认启用）

多语言支持

遵循 WordPress 标准多语言机制，可通过 PO/MO 文件或翻译插件本地化。

🐛 常见问题解决方案

问题描述	解决方法
上传失败，提示 "请配置 API 密钥"	检查「设置 → Chevereto 图床」中 API 密钥是否正确填写并保存。
上传后图片不显示	验证 API 密钥有效性，检查网络连接及图床服务状态。
文件上传失败	确认文件为图片格式且大小 ≤10MB，重试上传。
区块在前端不显示	清除缓存插件（如 WP Super Cache）缓存，检查主题对古腾堡区块的支持。
权限不足错误	确保当前用户拥有 `upload_files` 权限。

📄 开发钩子与 REST API

过滤器与动作钩子

php

// 自定义 API 地址
apply_filters('chevereto_block_api_url', $url);

// 自定义上传参数 （如分类、标签）
apply_filters('chevereto_block_upload_params', $params);

// 上传成功/失败钩子
do_action('chevereto_block_upload_success', $response);
do_action('chevereto_block_upload_error', $error);

REST API 端点

POST /wp-json/chevereto-block/v1/upload：处理图片上传请求。

JavaScript 事件监听

javascript

// 监听上传成功事件
document.addEventListener('cheveretoBlockUploadSuccess', function(e) {
    console.log('上传成功数据', e.detail);
});

// 监听上传失败事件
document.addEventListener('cheveretoBlockUploadError', function(e) {
    console.error('上传失败原因', e.detail);
});

📝 更新日志

v1.0.0（初始版本）

基础图片上传功能实现；
古腾堡区块集成与设置页面开发；
响应式设计与基础样式支持。