在现代 Web 开发时代，搭建一个 WordPress 本地环境通常会与 XAMPP、WAMP、LocalWP 或 Docker 这些熟悉的名字联系在一起。然而，所有这些解决方案都有一个共同的弱点：它们都需要安装软件、配置数据库、处理端口，并且会消耗相当可观的计算机资源。.

那么，如果我告诉你，你可以仅在 3 秒内直接在浏览器中运行一个“纯净无比”的 WordPress，无需安装任何东西，更重要的是……你的 AI Agent 还可以自动使用它来检查代码？欢迎来到 WordPress Playground 以及 skill wp-playground.

在本文中，我们将深入了解、安装并挖掘这个绝佳工具的强大能力。.

什么是 WordPress Playground，以及它为什么如此“火爆”？

WebAssembly（Wasm）技术

WordPress Playground 既不是托管服务，也不是传统的服务器模拟软件。它使用 WebAssembly（Wasm） 技术，直接在你的浏览器中（或 Node.js 环境中）运行 PHP、MySQL（SQLite）和 Web Server。.

这意味着：

• 无需服务器： 你的计算机无需运行 Apache 或 Nginx。.
• 无需数据库： 无需安装 MySQL 或 MariaDB。所有数据都存储在内存或 SQLite 文件中。.
• 完全隔离（Sandbox）： 每次关闭再重新启动时，所有内容都会消失（除非你配置了持久化存储）。这对于测试来说非常出色。.

Skill wp-playground 用于 AI Agent

对于使用 AI（如 Claude、ChatGPT 或 Gemini）编写代码的开发者来说，, wp-playground 它充当 AI 的“帮手”。AI 不再只是把代码交给你并说“试试看”，而是可以自行启动 Playground，将代码安装进去，检查代码是否正常运行，并在出现错误时自行修复。.

详细安装指南

要使用此 skill，你需要 Node.js 环境。.

1. 准备环境

请确保你的计算机已经安装了 Node.js （20 或更高版本最佳）。你可以打开终端并输入以下命令进行检查：

node -v

如果还没有，请前往官方网站下载 nodejs.org.

2. 安装 Agent skill 集合

Skill wp-playground 它包含在 WordPress 社区的 skill 集合中。要进行安装，请在项目目录中打开终端并运行命令：

npx openskills install WordPress/agent-skills

该命令会将 skill 下载到目录 .claude/skills （或根据配置存放在类似目录中）。.

3. 同步（Sync）

下载完成后，你需要告知 AI Agent 此 skill 的存在：

npx openskills sync

就这样！现在你的 AI Agent 已经“学会”了新技能。.

如何使用 WordPress Playground（实战）

你可以直接在自己的终端中运行 Playground。根据你使用的操作系统不同，主要有两种方式。.

方式 1：使用 CLI 命令（Windows 推荐）

如果你使用 Windows（PowerShell 或 CMD），最简单的方法就是直接调用 Playground 的 CLI。.

假设你当前位于项目目录（e:GITHUBwordpress) 中，并希望进行测试。运行命令：

npx @wp-playground/cli server --login --auto-mount ./wp-content

参数说明：

• npx @wp-playground/cli server: 调用 CLI 来启动服务器。.
• --login: 自动以最高权限登录管理后台（Admin Dashboard）。你无需费心输入用户名和密码。.
• --auto-mount ./wp-content: 这是最重要的参数。它告诉 Playground：“获取我的 ./wp-content 当前目录，并将其挂载到虚拟 WordPress 的 wp-content 目录中”。这样，你正在开发的所有插件和主题都会出现在 WordPress 中。.

方式 2：使用 Shell Script（Linux / macOS / WSL）

如果你使用 Mac 或 WSL（Windows Subsystem for Linux），skill 已经提供了更方便的脚本：

./scripts/start-server.sh --login --auto-mount ./wp-content

默认登录信息

如果自动登录功能无法正常工作，或者你想在其他浏览器中手动登录，请使用以下信息：

• 用户名： admin
• 密码： password

示例：5 分钟构建“图书管理”插件

为了让你清楚看到这一流程的强大之处，我们一起来尝试创建一个新功能。.

步骤 1：创建目录结构
创建目录 wp-content/plugins/test-plugin 和文件 test-plugin.php.

步骤 2：编写代码（或让 AI 编写）
我们将注册一个名为“Book”的 Custom Post Type：

 ['name' => 'Books', 'singular_name' => 'Book'],
        'public' => true,
        'has_archive' => true,
        'menu_icon' => 'dashicons-book',
        'supports' => ['title', 'editor', 'thumbnail'],
    ]);
});

步骤 3：运行测试
运行上面的 CLI 命令。浏览器会自动打开。.
进入 插件, 菜单，启用“My First Book Plugin”。.
立即，你会看到 Books 菜单出现在左侧。.

步骤 4：修复错误并更新
想把书本图标换成其他图标？修改这一行 'menu_icon' => 'dashicons-book' 为 'menu_icon' => 'dashicons-media-document'.
保存文件。.
回到浏览器并点击 F5. 图标就改变了！无需重启服务器，也无需部署。.

与其他解决方案比较

为什么这是 WordPress 开发的未来？

WebAssembly 技术正在改变我们对软件的思考方式。借助 wp-playground, ，开始学习 WordPress 编程的门槛几乎降到了零。.

1. 用于教育： 教师可以发送一个链接，学生点击后即可立即获得实践环境，无需花费一整个上午安装 XAMPP。.
2. 客户演示： 你可以直接在浏览器中发送一个可运行的插件演示，客户无需拥有服务器。.
3. CI/CD 测试： 集成到 GitHub Actions 流程中，每次有新 commit 时自动测试代码，速度非常快。.

延伸阅读： 要更深入了解 AI Agent 如何与 WordPress 交互，请不要错过文章 WP MCP Connect：AI Agents 与 WordPress 的“All-in-One”连接解决方案.

总结

Skill wp-playground 它不仅是一个新工具，更是一种全新的开发流程理念。它让 WordPress 开发变得轻松、灵活、有趣得多。如果你还没有尝试，请立即安装并感受其中的不同。相信你（以及你的 AI Agent）都会爱上它！