Wordpress Builder MCP

WordPress积木生成器MCP自动化

Bricks Builder的强大CLI自动化工具-可视化WordPress页面构建器。此工具允许通过自然语言命令、持久会话和本机构建器集成对Bricks Builder进行编程控制。

这是什么？

此工具通过Chrome浏览器自动化自动执行Bricks Builder操作，使您能够：

• 以编程方式构建完整的登录页面
• 通过简单的命令添加/编辑/删除元素
• 维护持久登录会话
• 高效执行批量操作
• 创建可重用的构建脚本

主要特点

• 持续会话 -登录一次，在多次跑步中保持联系
• 自然命令 -简单的语法，如 add section "Hero" 或 save
• 本机集成 -使用Bricks Builder的实际UI控件，而不是DOM黑客
• 屏幕截图支持 -在任何阶段捕捉您的工作
• 取消/重做 -完整历史支持
• 模块化架构 -干净、可扩展的代码库

快速开始

先决条件

• 已安装Node.js 14+
• Chrome/Chromium浏览器
• 安装了Bricks Builder的WordPress网站
• WordPress管理员凭据

安装

1. 克隆存储库：

git clone https://github.com/gbechtold/Wordpress-Builder-MCP.git
cd Wordpress-Builder-MCP

1. 安装依赖项：

npm install

1. 配置环境：

cp .env.example .env

1. 编辑 .env 使用您的凭据：

WP_USERNAME=your_wordpress_username
WP_PASSWORD=your_wordpress_password
BRICKS_URL=https://your-site.com/template/homepage/?bricks=run
WP_LOGIN_URL=https://your-site.com/wp-login.php

1. 运行CLI：

npm start

用法

交互式CLI模式

启动后，CLI会提供一个交互式提示，您可以在其中键入命令：

> add section "Hero Section"
> add heading "Welcome to Our Site"
> add button "Get Started"
> save
> screenshot
> exit

可用命令

元素操作

选择和编辑

行动

效用

构建脚本

为复杂操作创建自定义构建脚本：

// build-custom-page.js
const BricksSession = require('./src/core/BricksSession');
const BricksController = require('./src/core/BricksController');

async function buildCustomPage() {
    const session = new BricksSession();
    const controller = new BricksController(session);

    await session.initialize();
    await session.login(username, password, loginUrl);
    await session.navigateToBricks(bricksUrl);

    // Build your page
    await controller.addElement('section', { content: 'Hero' });
    await controller.addElement('heading', { content: 'Welcome!' });
    await controller.save();
}

项目结构

wordpress-builder-mcp/
├── src/
│   └── core/
│       ├── BricksSession.js      # Session & auth management
│       └── BricksController.js   # Bricks operations
├── temp/
│   ├── screenshots/               # Auto-saved screenshots
│   └── logs/                      # Log files
├── .session/                      # Persistent session cookies
├── index.js                       # Main CLI entry
├── build-landing.js               # Example landing page builder
└── .env                          # Your configuration (not in git)

高级用法

会话保持

该工具在登录后自动保存浏览器Cookie，允许您在运行之间保持登录状态：

• Cookie存储在 .session/cookies.json
• 下次运行时自动恢复
• 删除以强制重新登录

自定义元素类型

您可以添加的Bricks Builder元素类型：

• section, container, div
• heading, text, richtext
• button, image, video
• list, accordion, tabs
• form, icon, divider

调试模式

启用详细日志记录：

DEBUG=true

无头模式

在没有可见浏览器的情况下运行：

HEADLESS=true

示例：构建完整登录页面

npm run build-landing

此示例脚本创建：

• 带有标题和CTA的英雄部分
• 带有3个特征框的特征网格
• 行动呼吁部分
• 自动截图

故障排除

登录问题

• 验证中的凭据 .env
• 检查WordPress URL是否正确
• 删除 .session/cookies.json 用于新登录

未找到元素

• 确保您处于Bricks Builder编辑模式
• 某些元素可能有不同的名称（例如，“text”与“richtext”）
• 检查浏览器是否在正确的页面上

会话问题

• 清除Cookie： npm run clean
• 重新启动CLI
• 检查网络连接

贡献

欢迎投稿！拜托：

1. 复刻仓库
2. 创建要素分支
3. 提交您的更改
4. 推到分支
5. 打开拉取请求

路线图

• \[\]支持更复杂的布局
• \[\]样式和CSS编辑功能
• \[\]模板导入/导出
• \[\]多页操作
• \[\]响应式预览测试
• \[\]自定义元素库
• \[\]人工智能驱动的内容生成

安全说明

• 永不承诺 .env 文件
• 安全地存储凭据
• 使用强密码
• 考虑使用特定于环境的配置

许可证

MIT许可证-有关详细信息，请参阅许可证文件

致谢

• 为Bricks Builder WordPress页面构建器构建
• 使用Puppeteer实现浏览器自动化
• 受MCP（模型上下文协议）架构的启发

支持

• 问题：
• 讨论：

______________________________________________________________________

专为WordPress开发人员和Bricks Builder用户打造

*此工具与Bricks Builder或WordPress没有正式关联*