下载地址

Github 仓库 Gitee 仓库

一个轻量级的 WordPress 选项框架插件，通过配置化的方式，快速为 WordPress 主题或插件生成后台设置页面。

✨ 特性

• 🎯 配置驱动 UI：只需定义数组配置，自动生成完整的表单界面
• 📱 多页面架构：支持多个独立的设置页面
• 🎨 丰富的字段类型：包含 15+ 种常用字段类型
• 🔗 字段依赖系统：实现字段间的联动效果
• ✅ 数据验证与清理：自动进行安全清理，防止 XSS 攻击
• 🚀 零依赖：使用原生 JavaScript，无需 jQuery、Vue 或 React
• 💪 WordPress 标准：遵循 WordPress 编码规范，使用 Settings API

📦 安装

方法 1: 直接上传（推荐）

1. 将整个 starfish 文件夹上传到 WordPress 的插件目录：

   /wp-content/plugins/starfish/
   
2. 登录 WordPress 后台，进入”插件”页面
3. 找到”StarFish”，点击”激活”
4. 在左侧菜单中会出现”我的插件设置”，点击即可开始配置

方法 2: 在主题中使用

如果您想在主题中使用此框架（而不是作为独立插件）：

1. 将以下文件复制到您的主题目录：
   • starfish.php
   • style.css
   • index.js
2. 在主题的 functions.php 中添加：

   require_once get_template_directory() . '/starfish.php';
   
   // 然后定义您的配置数组
   $config = array(
       'menu_title' => '主题设置',
       'pages' => array(
           // ... 您的配置
       )
   );
   
   StarFish::get_instance()->init($config);
   

📂 文件结构

starfish/
├── config.php       # 配置文件
├── index.js         # JavaScript 交互逻辑
├── index.php        # 插件定义
├── README.md        # 说明文档
├── starfish.php     # 主插件文件
└── style.css        # 样式文件

⚠️ 注意事项

1. CSS 规范：严禁使用 gap 属性，所有间距通过 margin 和 padding 实现
2. JavaScript：使用原生 JS，不依赖 jQuery、Vue 或 React
3. 安全性：所有输出都经过转义处理，输入都经过清理
4. 兼容性：需要 WordPress 4.0 或更高版本

📖 使用示例

查看 config.php 文件获取更多使用示例。