wp-playground

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WordPress Playground Skill

WordPress Playground 实用指南

Instant WordPress environments in the browser using WebAssembly. Zero setup, no server required.

借助WebAssembly在浏览器中快速搭建WordPress环境，无需任何配置，也不需要服务器。

Quick Start

快速开始

Browser Access

浏览器访问

Visit: https://playground.wordpress.net/

访问：https://playground.wordpress.net/

CLI (Node.js)

CLI（Node.js）

bash

undefined

bash

undefined

Start local Playground server

启动本地Playground服务器

npx @wp-playground/cli server

With custom blueprint

使用自定义蓝图

npx @wp-playground/cli server --blueprint=./blueprint.json

Specify versions

指定版本

npx @wp-playground/cli server --wp=6.8 --php=8.3

---

npx @wp-playground/cli server --wp=6.8 --php=8.3

---

Blueprints

蓝图配置

Blueprints are JSON files that define the WordPress environment setup.

蓝图是定义WordPress环境设置的JSON文件。

Blueprint Structure

蓝图结构

json

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "phpExtensionBundles": ["kitchen-sink"],
  "features": {
    "networking": true
  },
  "steps": []
}

json

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "phpExtensionBundles": ["kitchen-sink"],
  "features": {
    "networking": true
  },
  "steps": []
}

Available Steps

可用步骤

Step	Purpose	Example
`installPlugin`	Install plugin from wp.org	`{"step":"installPlugin","pluginData":{"resource":"wordpress.org/plugins","slug":"yoast-seo"}}`
`installTheme`	Install theme from wp.org	`{"step":"installTheme","themeData":{"resource":"wordpress.org/themes","slug":"astra"}}`
`setSiteOptions`	Update wp_options	`{"step":"setSiteOptions","options":{"blogname":"Test"}}`
`login`	Login as user	`{"step":"login","username":"admin","password":"password"}`
`runPHP`	Execute PHP code	`{"step":"runPHP","code":"<?php echo 'Hello'; ?>"}`
`wp-cli`	Run WP-CLI command	`{"step":"wp-cli","command":"plugin list"}`
`writeFile`	Create/modify file	`{"step":"writeFile","path":"/index.html","data":"content"}`
`mkdir`	Create directory	`{"step":"mkdir","path":"/wp-content/uploads/test"}`

步骤	用途	示例
`installPlugin`	从wp.org安装插件	`{"step":"installPlugin","pluginData":{"resource":"wordpress.org/plugins","slug":"yoast-seo"}}`
`installTheme`	从wp.org安装主题	`{"step":"installTheme","themeData":{"resource":"wordpress.org/themes","slug":"astra"}}`
`setSiteOptions`	更新wp_options	`{"step":"setSiteOptions","options":{"blogname":"Test"}}`
`login`	以用户身份登录	`{"step":"login","username":"admin","password":"password"}`
`runPHP`	执行PHP代码	`{"step":"runPHP","code":"<?php echo 'Hello'; ?>"}`
`wp-cli`	运行WP-CLI命令	`{"step":"wp-cli","command":"plugin list"}`
`writeFile`	创建/修改文件	`{"step":"writeFile","path":"/index.html","data":"content"}`
`mkdir`	创建目录	`{"step":"mkdir","path":"/wp-content/uploads/test"}`

Pre-Built Blueprints

预构建蓝图

Base Development Blueprint

基础开发蓝图

Full development environment with essential plugins:

json

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "admin-site-enhancements" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "branda-white-labeling" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "wordpress-seo" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "instant-images" },
      "options": { "activate": true }
    },
    {
      "step": "setSiteOptions",
      "options": {
        "blogname": "Development Site",
        "blogdescription": "WordPress Playground Environment",
        "permalink_structure": "/%postname%/"
      }
    }
  ]
}

包含必备插件的完整开发环境：

json

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "admin-site-enhancements" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "branda-white-labeling" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "wordpress-seo" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "instant-images" },
      "options": { "activate": true }
    },
    {
      "step": "setSiteOptions",
      "options": {
        "blogname": "Development Site",
        "blogdescription": "WordPress Playground Environment",
        "permalink_structure": "/%postname%/"
      }
    }
  ]
}

WooCommerce Testing Blueprint

WooCommerce测试蓝图

json

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/admin.php?page=wc-admin",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "woocommerce" },
      "options": { "activate": true }
    },
    {
      "step": "installTheme",
      "themeData": { "resource": "wordpress.org/themes", "slug": "storefront" },
      "options": { "activate": true }
    }
  ]
}

json

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/admin.php?page=wc-admin",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "woocommerce" },
      "options": { "activate": true }
    },
    {
      "step": "installTheme",
      "themeData": { "resource": "wordpress.org/themes", "slug": "storefront" },
      "options": { "activate": true }
    }
  ]
}

Theme Development Blueprint

主题开发蓝图

json

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installTheme",
      "themeData": { "resource": "wordpress.org/themes", "slug": "developer" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "theme-check" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "developer" },
      "options": { "activate": true }
    }
  ]
}

json

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/",
  "login": true,
  "preferredVersions": {
    "php": "8.3",
    "wp": "latest"
  },
  "steps": [
    {
      "step": "installTheme",
      "themeData": { "resource": "wordpress.org/themes", "slug": "developer" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "theme-check" },
      "options": { "activate": true }
    },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "developer" },
      "options": { "activate": true }
    }
  ]
}

CLI Commands

CLI命令

Basic Usage

基础用法

bash

undefined

bash

undefined

Start with defaults

使用默认配置启动

npx @wp-playground/cli server

Custom port

自定义端口

npx @wp-playground/cli server --port=3000

Specific WordPress version

指定WordPress版本

npx @wp-playground/cli server --wp=6.7

PHP version

指定PHP版本

npx @wp-playground/cli server --php=8.2

Blueprint file

使用蓝图文件

npx @wp-playground/cli server --blueprint=./my-blueprint.json

Auto-mount current directory as plugin/theme

自动挂载当前目录作为插件/主题

npx @wp-playground/cli server --auto-mount

undefined

npx @wp-playground/cli server --auto-mount

undefined

Building Snapshots

构建快照

bash

undefined

bash

undefined

Build ZIP snapshot from blueprint

根据蓝图构建ZIP快照

npx @wp-playground/cli build-snapshot blueprint.json output.zip

Use snapshot

使用快照

npx @wp-playground/cli server --mount=./output.zip

undefined

npx @wp-playground/cli server --mount=./output.zip

undefined

Directory Mounting

目录挂载

bash

undefined

bash

undefined

Mount local plugin

挂载本地插件

npx @wp-playground/cli server
--mount=/local/plugin:/var/www/html/wp-content/plugins/my-plugin

Mount local theme

挂载本地主题

npx @wp-playground/cli server
--mount=/local/theme:/var/www/html/wp-content/themes/my-theme

---

npx @wp-playground/cli server
--mount=/local/theme:/var/www/html/wp-content/themes/my-theme

---

URL Parameters

URL参数

For quick browser-based testing, use URL parameters:

undefined

对于基于浏览器的快速测试，可使用URL参数：

undefined

Install plugin

安装插件

https://playground.wordpress.net/?plugin=woocommerce

Install multiple plugins

安装多个插件

https://playground.wordpress.net/?plugin=woocommerce&plugin=yoast-seo

Install theme

安装主题

https://playground.wordpress.net/?theme=astra

Specific versions

指定版本

https://playground.wordpress.net/?wp=6.7&php=8.3

Go to admin

进入后台

https://playground.wordpress.net/?mode=seamless&login=yes

Use blueprint URL

使用远程蓝图

https://playground.wordpress.net/?blueprint-url=https://example.com/blueprint.json

---

https://playground.wordpress.net/?blueprint-url=https://example.com/blueprint.json

---

JavaScript API

For programmatic control:

javascript

import { startPlayground } from '@wp-playground/client';

const playground = await startPlayground({
  iframe: document.getElementById('wp-frame'),
  blueprint: {
    landingPage: '/wp-admin/',
    login: true,
    steps: [
      {
        step: 'installPlugin',
        pluginData: { resource: 'wordpress.org/plugins', slug: 'woocommerce' },
        options: { activate: true }
      }
    ]
  }
});

// Run WP-CLI commands
const result = await playground.run({
  step: 'wp-cli',
  command: 'plugin list'
});
console.log(result);

用于程序化控制：

javascript

import { startPlayground } from '@wp-playground/client';

const playground = await startPlayground({
  iframe: document.getElementById('wp-frame'),
  blueprint: {
    landingPage: '/wp-admin/',
    login: true,
    steps: [
      {
        step: 'installPlugin',
        pluginData: { resource: 'wordpress.org/plugins', slug: 'woocommerce' },
        options: { activate: true }
      }
    ]
  }
});

// 运行WP-CLI命令
const result = await playground.run({
  step: 'wp-cli',
  command: 'plugin list'
});
console.log(result);

Use Cases

使用场景

Quick Plugin Testing

快速插件测试

Write blueprint with plugin to test

Run

npx @wp-playground/cli server --blueprint=./test-blueprint.json

Test in browser
Close when done (no cleanup needed)

编写包含待测试插件的蓝图

运行

npx @wp-playground/cli server --blueprint=./test-blueprint.json

在浏览器中进行测试
测试完成后直接关闭（无需清理）

Theme Preview

主题预览

Mount local theme directory
Make changes
See instant updates in browser
No server restart needed

挂载本地主题目录
修改主题代码
在浏览器中即时查看更新效果
无需重启服务器

Client Demos

客户演示

Create blueprint with client's preferred setup
Share URL with blueprint parameter
Client sees instant demo
No hosting required

创建包含客户偏好配置的蓝图
分享带有蓝图参数的URL
客户可立即查看演示效果
无需额外主机服务

Plugin Development

插件开发

Use
```
--auto-mount
```
to mount current directory
Changes reflect immediately
Debug with browser tools
Export snapshot for sharing

使用
```
--auto-mount
```
挂载当前目录
代码修改后即时生效
使用浏览器工具调试
导出快照用于分享

Limitations

局限性

Ephemeral: Data lost when browser closes (unless exported)
Performance: Slower than native PHP (runs in WebAssembly)
Networking: Limited external HTTP requests
File Storage: Browser storage limits apply
No Email: Email sending not supported
No Cron: WP-Cron runs on page load only

临时存储: 浏览器关闭后数据丢失（除非导出快照）
性能: 比原生PHP运行速度慢（基于WebAssembly）
网络限制: 对外HTTP请求有限制
文件存储: 受浏览器存储容量限制
无邮件功能: 不支持发送邮件
无定时任务: WP-Cron仅在页面加载时运行

Playground vs Docker

Feature	Playground	Docker
Setup time	Instant	2-5 min
Persistence	Temporary	Permanent
Performance	Slower	Faster
Server required	No	Yes
Use case	Testing, demos	Development
Networking	Limited	Full
Email	No	Yes (with SMTP)
WP-CLI	Limited	Full

Use Playground for: Quick testing, demos, client previews, plugin trials

Use Docker for: Full development, production-like testing, persistent data

特性	Playground	Docker
搭建时间	即时	2-5分钟
数据持久化	临时	永久
性能	较慢	较快
是否需要服务器	否	是
适用场景	测试、演示	开发
网络支持	有限	完整
邮件功能	无	支持（需配置SMTP）
WP-CLI支持	有限	完整

优先使用Playground的场景: 快速测试、演示、客户预览、插件试用

优先使用Docker的场景: 全功能开发、生产环境模拟测试、数据持久化开发

Templates Location

模板位置

Blueprints are in:

~/.claude/skills/wp-playground/blueprints/

```
base.json
```
- Standard development setup
```
woocommerce.json
```
- E-commerce testing
```
theme-dev.json
```
- Theme development

蓝图文件位于：

~/.claude/skills/wp-playground/blueprints/

```
base.json
```
- 标准开发配置
```
woocommerce.json
```
- 电商测试配置
```
theme-dev.json
```
- 主题开发配置