Droip克劳德桥
连接的WordPress插件 克劳德代码 到 Droip 页面生成器通过 模型上下文协议（MCP）用自然语言描述组件，并让克劳德直接在Droip的符号系统中创建它们。
需求
安装
1.安装插件
克隆到您的WordPress插件文件夹：
cd wp-content/plugins/
git clone git@github.com:GustavoGomez092/Droip-MCP-plugin.git droip-claude-bridge
cd droip-claude-bridge
composer install2.激活
首选 WordPress管理>插件 并激活“Drop-Claude Bridge”。如果Droip未处于活动状态，则会阻止激活。
3.启用MCP服务器
首选 Droip>集成 选项卡。单击 配置 在“克劳德代码（MCP）”卡上，然后切换 启用MCP服务器 上。
4.配置克劳德代码
从Configure抽屉复制自动生成的MCP配置JSON。将其添加到您的Claude代码配置中(.claude/settings.json 或 ~/.claude.json):
{
"mcpServers": {
"droip-bridge": {
"command": "/path/to/php",
"args": [
"-d", "mysqli.default_socket=/path/to/mysqld.sock",
"/path/to/droip-claude-bridge/mcp-server/server.php"
],
"env": {
"WP_ROOT_PATH": "/path/to/wordpress"
}
}
}
}所有路径都会自动检测。对于 当地飞轮 在环境中，PHP二进制文件和MySQL套接字会自动找到。
5.重新启动克劳德代码
重新启动Claude Code以获取新的MCP服务器。请Claude列出您的Droip符号进行验证。
建筑
┌──────────────┐ stdio (JSON-RPC) ┌──────────────────────┐
│ Claude Code │ ◄─────────────────────► │ MCP Server (PHP CLI) │
└──────────────┘ │ boots WordPress │
│ uses Droip classes │
└──────────┬───────────┘
│ direct PHP calls
┌──────────▼───────────┐
│ WordPress + Droip │
│ droip_symbol posts │
│ post meta storage │
└──────────────────────┘MCP服务器(mcp-server/server.php)是一个独立的PHP进程，它引导WordPress（主题禁用，输出缓冲），访问Droip类，并使用JSON-RPC通过stdin/stdout与Claude Code通信。
MCP工具（17）
知识工具（5）
| 工具 | 说明 |
|---|---|
droip_get_element_schema | 所有元素类型及其属性 |
droip_get_symbol_guide | 符号JSON模式引用 |
droip_get_style_guide | CSS样式系统文档 |
droip_get_animation_guide | 动画、过渡和交互 |
droip_get_example_symbols | 来自您网站的真实符号 |
符号CRUD工具（5）
| 工具 | 说明 |
|---|---|
droip_create_symbol | 通过验证和预保存清理创建新符号 |
droip_list_symbols | 列出所有符号 |
droip_get_symbol | 获取完整的符号数据 |
droip_update_symbol | 更新符号字段 |
droip_delete_symbol | 删除符号 |
页面数据工具（4）
| 工具 | 说明 |
|---|---|
droip_list_pages | 列出Droip编辑器状态的页面 |
droip_get_page_data | 获取页面元素树和样式 |
droip_get_global_styles | 全局CSS样式块 |
droip_get_variables | 设计标记（颜色、字体、间距） |
生成器工具（3）
| 工具 | 说明 |
|---|---|
droip_validate_symbol | 保存前验证JSON符号 |
droip_generate_ids | 生成Droip兼容的元素/样式ID |
droip_add_symbol_to_page | 向页面添加符号实例 |
MCP资源（5）
| URI | 内容 |
|---|---|
droip://docs/quick-start | 快速入门指南 |
droip://docs/symbol-schema | JSON模式引用 |
droip://docs/element-types | 具有属性的元素类型 |
droip://docs/style-system | 样式块和CSS文档 |
droip://docs/animations-interactions | 动画和交互 |
预保存数据清理
在保存符号之前，桥会自动修复常见的结构问题：
- 空
children论叶元素 --Droip的渲染器使用children决定是否呈现文本的键(contents[])或迭代儿童。一个空children: []在标题或段落上显示空白。清理工作会把这些东西剥掉。 - 没有文本子项的按钮 --Droip的按钮渲染器忽略
contents并且仅渲染子元素。清理自动创建text子元素(``)如果按钮没有。 - 根
parentId--确保根元素具有parentId: null.
用法示例
"List all my Droip symbols"
"Create a hero section with a heading, paragraph, and CTA button"
"Update the hero section to add a background image"
"Add the header symbol to page ID 15"文件结构
droip-claude-bridge/
├── droip-claude-bridge.php # Plugin entry, activation guard, constants
├── admin/
│ ├── admin-page.php # AJAX endpoints, script enqueue, config generation
│ └── integration.js # Injects card into Droip integrations tab
├── mcp-server/
│ ├── server.php # MCP entry: registers tools + resources
│ ├── bootstrap.php # WordPress bootstrap (themes off, output buffered)
│ ├── Tools/
│ │ ├── KnowledgeTools.php # 5 tools: schema, guide, style, animations, examples
│ │ ├── SymbolCrudTools.php # 5 tools: CRUD + pre-save cleanup
│ │ ├── PageDataTools.php # 4 tools: pages, page data, global styles, variables
│ │ └── BuilderTools.php # 3 tools: validate, generate IDs, add to page
│ ├── Builders/
│ │ ├── IdGenerator.php # dp + 6 chars, mcpbr_dp + 6, sep + 7
│ │ ├── ElementFactory.php # Static factory for all element types
│ │ ├── StyleBuilder.php # Responsive CSS style blocks
│ │ └── SymbolBuilder.php # Fluent API: build() and save()
│ ├── Validators/
│ │ └── SymbolValidator.php # Structure, refs, orphans, style ID checks
│ ├── Resources/
│ │ └── DocsProvider.php # Serves Docs/*.md as MCP resources
│ └── Docs/ # Markdown docs served as MCP resources
├── composer.json # logiscape/mcp-sdk-php ^1.2
├── .mcp.json.example # Example Claude Code MCP config
└── CLAUDE.md # Claude Code project instructions故障排除
服务器无法启动 --检查配置抽屉中的状态部分。确保 composer install 被运行。验证PHP二进制路径。检查 mcp-server-errors.log.
无法从Claude Code连接 --确保在“集成”选项卡中启用了MCP服务器。验证配置JSON是否在Claude Code设置中。更改后重新启动Claude Code。
符号未出现 --符号是作为草稿帖子创建的，应显示在符号面板中。使用 droip_validate_symbol 检查结构。
MySQL连接错误 --对于Local by Flywheel，确保网站正在运行。插件自动检测套接字 ~/Library/Application Support/Local/run/*/mysql/mysqld.sock.通过手动设置 -d mysqli.default_socket=... 如果需要的话。
许可证
GPL-2.0或更高版本