Zibll Audio Upload 插件说明文档

预计阅读 6 分钟
为子比主题(Zibll)前台编辑器启用音频上传功能的 WordPress 插件。

class="heading-2 ace-line old-record-id-VHNqfn9SMdgrvqcSAR0cQCkLnvf"

  • 在 TinyMCE 编辑器工具栏添加音频上传按钮
  • 支持拖拽上传和点击选择文件
  • 支持外链音频 URL 插入
  • 实时上传进度显示(含百分比)
  • 友好的 Toast 提示反馈
  • 完善的权限控制和 CSRF 安全防护
  • 可配置最大上传文件大小
  • 多主题兼容性(自动适配不同编辑器 DOM 结构)

class="heading-2 ace-line old-record-id-SjVtfDUx2dfxEacZMQUcMMWEnac"

格式
MIME 类型
MP3
audio/mpeg
WAV
audio/wav
OGG
audio/ogg
M4A
audio/x-m4a
FLAC
audio/flac
AAC
audio/aac
WMA
audio/x-ms-wma
WEBMA
audio/webm

class="heading-2 ace-line old-record-id-BvcXfAh0udVwkWckQU3cYdTpnj0"

  • WordPress 5.0+
  • 子比主题(Zibll)7.0+
  • PHP 7.4+

class="heading-2 ace-line old-record-id-IXi2fHVNydZKUrcXcLZcNsE7nLb"

  1. 下载插件文件夹 zibll-audio-upload
  2. 上传至 WordPress 插件目录 /wp-content/plugins/
  3. 在后台「插件」页面启用插件
  4. 进入「设置」→「音频上传」进行配置

class="heading-2 ace-line old-record-id-QbOBff1l3dh1iscRZuvcEThHnUc"

class="heading-3 ace-line old-record-id-ZwCQf6NeadMEo1cpeuscb4bWnSg"

  1. 在文章编辑页面,点击富文本编辑器工具栏的 🎵 按钮
  2. 选择「上传音频」标签页
  3. 点击上传区域或直接拖拽音频文件
  4. 上传完成后自动插入编辑器

class="heading-3 ace-line old-record-id-FwCFfuIgVdviOqcTHpmcQhEjnzZ"

  1. 点击工具栏的 🎵 按钮
  2. 选择「外链音频」标签页
  3. 输入音频文件的完整 URL
  4. 点击「插入音频」

class="heading-3 ace-line old-record-id-UgadfOM2mdZPtEcTg9ocnxHZnzg"

插件会在编辑器中插入 WordPress 音频短代码:
代码
代码
代码
代码

class="heading-2 ace-line old-record-id-EeEMfOiP3dSk3Acylrqca9bDnWc"

选项
说明
默认值
启用音频上传
控制插件开关
启用
最大文件大小
单个文件最大限制(MB)
30MB

class="heading-2 ace-line old-record-id-BO57f79KlduNOXcB1GUcSKRfnff"

用户需要满足以下任一条件才能上传音频:
  • 具有 upload_files 权限(默认编辑者及以上)
  • 具有 edit_posts 权限(作者及以上)
  • 具有 edit_pages 权限

class="heading-2 ace-line old-record-id-ABUQfZDjjdMmOacGKmVcqMJnnwb"

特性
说明
CSRF 防护
所有 AJAX 请求均需通过 Nonce 验证
权限校验
严格的用户权限检查
文件验证
服务端 MIME 类型和扩展名双重校验
输入转义
所有用户输入均经过转义处理
URL 验证
外链音频需通过 URL 格式校验

class="heading-2 ace-line old-record-id-D68mfTrildjxfHcgGIMc8Z6Zn2c"

  • 多种编辑器兼容:自动适配 .mce-toolbar.tox-toolbar[role="toolbar"] 等多种 DOM 结构
  • 智能重试机制:未检测到编辑器时自动重试(最多20次,间隔200ms)
  • 定时备用检查:每秒检查一次编辑器加载状态,持续60秒
  • MutationObserver 监听:实时监听 DOM 变化,自动为新编辑器添加按钮

class="heading-2 ace-line old-record-id-POHVfOCWAdhSXecF6W4chCBGn9f"

class="heading-3 ace-line old-record-id-HpKXfSrbideroAcoDLccMzkBnXe"

请刷新页面后重新尝试上传。

class="heading-3 ace-line old-record-id-MMwqfPEg3dXEQhcRm3Nc6zSanlf"

检查后台设置中的最大文件大小限制,或服务器 PHP 配置(upload_max_filesize)。

class="heading-3 ace-line old-record-id-YnzefCxXAdonB3cFp5AcYbCenFd"

  1. 确认插件已启用
  2. 确认已开启”启用音频上传”选项
  3. 确认使用的是富文本编辑器模式
  4. 刷新页面或重新加载编辑器

class="heading-2 ace-line old-record-id-C4nGfVslFdmxZVcTRtZcSCx7ndh"

class="heading-3 ace-line old-record-id-Js1afiGRFd9CHwcMsWPcAkFeneF"

安全优化

  • 新增 CSRF 安全防护(Nonce 验证)
  • 优化权限检查逻辑
  • 添加服务端文件扩展名校验
  • 外链 URL 格式验证

用户体验优化

  • 添加 Toast 提示反馈(成功/失败/信息)
  • 显示上传进度百分比
  • 支持拖拽时视觉反馈
  • 文件名实时显示
  • 渐变进度条效果

代码质量优化

  • 提取音频格式为类常量
  • 添加 'use strict' 严格模式
  • 所有输出使用 esc_url()/esc_attr()/esc_html() 转义
  • 详细的文件上传错误码映射

兼容性优化

  • 多种选择器自动适配不同主题
  • 智能重试机制(最多20次)
  • MutationObserver 实时监听
  • 定时备用检查(60秒)

class="heading-3 ace-line old-record-id-NeiAfa5LYdsIMecOUhyctiY8nkc"

  • 初始版本
  • 支持音频文件上传
  • 支持外链音频插入

class="heading-2 ace-line old-record-id-DOr8fz3z7duKpAcGwmAcJLwYn7b"

代码
代码
zibll-audio-upload/ ├── README.md # 本说明文档 ├── zibll-audio-upload.php # 主插件文件 └── js/ # JS 资源目录(预留)
代码
代码

class="heading-2 ace-line old-record-id-HjJ5fTJmTdfjsvcu321cKJsmnSe"

  • 作者:小武
  • 网址:https://1z345.cn
  • 许可证:GPL-2.0-or-later

class="heading-2 ace-line old-record-id-J2pFfWsafd2YZoc8Wgqcv8TUnBh"

本插件遵循 GPL-2.0-or-later 许可证。
© 版权声明
THE END
喜欢就支持一下吧
点赞5234支持作者 分享