AI导哈

WordPress-Claude-Droip桥接插件

一个WordPress插件，通过模型上下文协议(MCP)将Claude Code与Droip页面构建器连接，实现自然语言描述组件并直接创建Droip符号。

  • by GustavoGomez092
  • PHP
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 GustavoGomez092/Droip-MCP-plugin

使用说明

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 install

2.激活

首选 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 子元素(<span>)如果按钮没有。
  • 根 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或更高版本

相关 MCP