AI导哈

WordPress页面构建自动化工具

一个强大的CLI自动化工具，用于通过自然语言命令和浏览器自动化控制WordPress的Bricks Builder页面构建器。

  • by gbechtold
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 gbechtold/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

可用命令

元素操作

命令 描述
add section "name" 添加新章节
add heading "text" 添加标题元素
add text "content" 添加文本元素
add button "label" 添加按钮
add container 添加容器元素
add [element] "content" at end 在页面末尾添加元素

选择和编辑

命令 描述
select .class-name 通过CSS选择器选择元素
delete #element-id 删除元素
duplicate 复制选定元素

行动

命令 描述
save 保存模板
undo 撤消上次操作
redo 重做操作
preview 打开预览模式
screenshot 截图
screenshot name.png 使用自定义文件名保存

效用

命令 描述
status 显示会话状态
reload 重新加载页面
clear 清除控制台
help 显示所有命令
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没有正式关联

相关 MCP