云策 WordPress 开发者社区

社区新闻

Playground简介：在浏览器中运行WordPress

查看官方原文 ↗ 发布于

你听说过 WordPress Alchemy 吗？它是一个在浏览器内部运行的无服务器版本，被称为 WordPress Playground。

这个由 Adam Zieliński 在 2022 年开发的突破性项目并非炼金术，而是 WebAssembly (WASM)。驱动基于浏览器的 IDE 的相同技术 是 Playground 的核心，支持着 Zieliński 的愿景，即赋能开发者、用户、学习者、扩展者和贡献者。

Zieliński 的动机是为了克服建立本地开发环境作为构建 WordPress 网站先决条件的挑战。Playground 让你摆脱了典型的麻烦，并邀请你进入一个不会出错的幸福新世界——一个全新的实例只需一次快速的 刷新。

你可以使用 Playground 来展示、测试和构建主题、插件、区块，甚至是整个网站。它是一个用于开发、代码审查、设计实验、交接、入职和教育的单次点击、零设置环境：你还可以使用 <iframe> 元素在任何网页中嵌入一个实时实例，为 WordPress 教程注入新的活力。

三重基础

Playground 由 三个可互换的 API 组成，你可以根据需要混合和匹配：

  • Query API – 一种无代码的基于浏览器的配置，允许你向 Playground URL 添加参数。
  • Blueprint API – 一种低代码的基于 JSON 的配置文件，作为你的 WordPress 安装的构建脚本。
  • JavaScript API – 一个 NPM 包，用于将 Playground 客户端导入到应用程序或网站中。

你可以组合这三个 API：Query API 的大部分属性都映射到 Blueprint API，这意味着你可以将结构化数据（Blueprint）写成 URL 片段（Query）。在 .net/ 后面添加一个井号（#）并粘贴你的配置（链接在新标签页中打开）：https://playground.wordpress.net/#{"preferredVersions": {"php":"7.4", "wp":"6.3"}}"

或者同时使用两种格式，像这样：

https://playground.wordpress.net/?mode=seamless#{"preferredVersions": {"php":"7.4", "wp":"6.3"}}"

API 映射

当组合使用时，Playground 会忽略任何通过 Query API 设置的 Blueprint 支持的参数。因此，mode 和 storage（仅通过 Blueprint API 可用）总是有效的，但 plugin 不一定。例如，运行 https://playground.wordpress.net/?mode=seamless&plugin=gutenberg#{"plugins": [gutenberg]}

将导致 https://playground.wordpress.net/?mode=seamless#{"plugins": [gutenberg]}。

如果你的 Blueprint 不太复杂，你甚至不需要编码——在 URL 后面附加支持的属性，浏览器会处理其余的事情。

当它变得太复杂时，你可以在 URL 中引用一个 JSON 文件，像这样：

https://playground.wordpress.net/?blueprint-url=https://PATH/TO/YOUR/blueprint.json

最后，你可以 在基于 JavaScript API 的实例的代码中编写 Blueprint。

点击此处查看一个创建并打开新文章的示例： 
<body>
	<iframe id="wp-playground" title="Demo Playground instance" style="width: 100%; height: 100dvh; border: 1px solid currentColor;"></iframe>
	<script type="module">
		import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js';
		const client = await startPlaygroundWeb({
			iframe: document.getElementById('wp-playground'),
			remoteUrl: `https://playground.wordpress.net/remote.html`,
			blueprint: {
				"landingPage": "/?p=3",
				"preferredVersions": {
					"php": "8.0",
					"wp": "latest"
				},
				"features": {
					"networking": true,
				},
				"steps": [
					{
						"step": "login"
					},
					{
						"step": "runPHP",
						"code": "<?php require_once('/wordpress/wp-load.php'); wp_insert_post(['ID' => 3, 'post_title' => 'Created by a Blueprint', 'post_content' => '<!-- wp:paragraph --><p>Hoora!</p><!-- /wp:paragraph -->', 'post_status' => 'publish']);"
					}
				]
			}
		});
		await client.isReady();
	</script>
</body>

跨平台开发环境

Playground 非常适合快速原型设计，但它也通过 WP-NOW 包和 VS Code 扩展支持本地开发。使用该扩展的一个巨大好处是在 IDE 中拥有自动完成和验证功能。在你的 JSON 文件顶部声明 Blueprint JSON 模式（"$schema": "https://playground.wordpress.net/blueprint-schema.json"），编辑器会在你输入时弹出小提示。

当然，本地 WordPress 开发环境并不新鲜；MAMP 和 XAMPP 已经存在很久了，而更近期的 GUI 和 CLI 工具，如 WordPress Studio、Kinsta 的 DevKinsta 和 WordPress 自己的 WP-ENV 简化了本地安装。

然而，没有哪个像 WP-NOW 那样快速、无缝和轻量级，或者像 Playground 的 VS Code 扩展那样便携。此外，虽然所有这些平台都需要一台计算机，但 Playground 在技术上是与浏览器允许的程度无关的：Playground 是跨平台的，部分离线工作，并且每个新功能都根据其可用性和可访问性来衡量，考虑到对不同设备和环境（包括智能手机和平板电脑）的工具支持。

了解 API

学习如何利用 Playground 的功能层来创建交互式演示并分享你的工作，而无需离开浏览器。

无代码：Query API

Playground 是熟悉 WordPress 的绝佳方式。在浏览器地址栏中输入 https://playground.wordpress.net"（在新标签页中打开），按 Enter，然后开始探索。

想测试 WordPress 主题目录中的特定主题吗？在 .net/ 后面添加一个问号（?），然后输入 theme=the_theme_slug。插件呢？在 插件目录中找到它，获取 slug，然后写 plugin=the_plugin_slug。

你也可以同时做这两件事，并添加任意多的属性：只需用 & 符号（&）分隔它们。这是一个示例 URL 查询，允许你探索最新的测试版：

https://playground.wordpress.net/?plugin=gutenberg&theme=ollie&mode=seamless&wp=nightly"  （在新标签页中打开）

尝试修改查询以测试不同的变体：将 seamless 替换为 browser，nightly 替换为 5.9，ollie 替换为 stacks，或者移除 &plugin=gutenberg 来查看变化：

https://playground.wordpress.net/?mode=browser&wp=5.9&theme=stacks （在新标签页中打开）

启用本地存储

Playground 实例默认是临时的；一旦你刷新或关闭标签页，所有更改都将丢失。为了使其不那么短暂，请启用浏览器存储选项：使用 Query API，在 URL 中添加 storage=browser，或者点击右上角的 设置 按钮并选择存储类型。刷新后，你会看到警告表情符号（⚠️）消失了。

你可以链接任意多的插件（?plugin=jetpack&plugin=woocommerce），或者打开特定页面——在管理后台或前端：（链接在新标签页中打开）

  • 站点编辑器的模板部分：<a https://playground.wordpress.net/?url=/wp-admin/site-editor.php?path=/wp_template
  • 新文章：https://playground.wordpress.net/?theme=blue-note&url=/wp-admin/post-new.php

Playground 将在几秒钟内下载并安装所有内容，登录，激活你选择的主题和插件，并启动一个全新的自定义 WordPress 副本。

构建并分享网站

当你启动一个标准的 Playground 实例（不是在 seamless 模式下或通过 JavaScript API），你会注意到在熟悉的 WordPress 管理栏上方有一个新的模拟浏览器界面。

Playground 管理栏，显示在 WordPress 管理栏上方，包含一些额外选项。

因为 Playground 在 <iframe> 内部运行，与浏览器的地址栏和窗口控制按钮交互对其内部运行的 WordPress 实例没有影响。实际上，如果你尝试通过手动输入类似 https://playground.wordpress.net/wp-admin 的内容来导航到另一个页面，你会得到一个 404 错误页面。因此，有了这个模拟工具栏。

除了作为地址栏外，Playground 的顶部导航栏还包括以下内容：

  1. 一个绿色圆圈，用于展开和缩小实例窗口（实际上充当了基于 UI 的 mode 切换器）。
  2. 一个 设置 按钮，指示你正在运行的 PHP 和 WordPress 版本以及是否启用了本地存储。点击它以打开 自定义 Playground 模态框并配置你的实例。当你点击底部的 应用更改 按钮时，Playground 会通过 Query API 将它们附加到 URL 并重新加载修改后的实例。
  3. 一个 附加操作 菜单按钮，包含几个额外工具和文档站点的链接。

其中一个选项允许你构建并分享一个完整的网站：运行一个 Playground 实例，进行更改，然后转到 附加操作 -> 下载 .zip 来保存项目的压缩文件——包括更改。你可以将压缩的项目分享给其他人，他们将能够手动加载它（附加操作 -> 从 .zip 恢复），或者将其存储在网上并发送给他们一个自定义链接，这样他们就可以立即开始：

https://playground.wordpress.net/?import-site=https://PATH/TO/YOUR/wordpress-playground.zip

数据库
ZIP 文件包含数据库的副本，位于 /wp-content/database/.ht.sqlite。它是一个隐藏文件，但如果你使用 VS Code，可以安装 SQLite Viewer 扩展 来浏览它。

低代码：Blueprint API

使用地址栏没问题，但如果你想复制这个配置、迭代、与客户分享，或者让人们测试你的插件呢？这就是 Blueprint API 的用武之地。

这些 JSON 文件作为构建脚本，让你可以创建整个网站，包括内容（文章、页面、分类法和评论）、设置（站点名称、用户、固定链接等），以及上面提到的主题和插件。你可以生成一个包含产品的完整 WooCommerce 商店、一个充满文章的杂志、一个拥有多个用户的企业博客等等。

Blueprint 助手：使用 Blueprint 编辑器（一个进行中的工作）在浏览器中验证你的代码。

Blueprint API 支持高级用例，如文件系统和数据库操作，并让你对你创建的实例进行细粒度控制。WordPress 测试团队一直在 6.5 测试版发布周期中使用 Playground，创建一个加载最新版本、几个测试插件和虚拟数据的 Blueprint。

值得探索该模式和 文档，以了解 Playground 支持的功能和属性。

例如，即使你只是想安装一个插件或主题，也有几个来源可以使用（官方插件目录、任何可公开访问的 URL 或你 GitHub 仓库中的文件），并且你可以决定是否自动激活它们。内容也是如此：你可以导入一个 WXR 文件，在 Blueprint 中即时创建内容，或者在你展示的插件中运行脚本，就像 这个巧妙的实现。

Blueprint v2

团队正在探索将 Blueprints 从 TypeScript 库过渡到 PHP 库的方法。提议的 新规范 在一个单独的 GitHub 仓库 中讨论，非常欢迎你加入（在那里或在 #meta-playground Slack 频道）并帮助塑造下一代 Playground。

你可以定义 PHP 函数——WordPress 或原生函数——并将其作为原始代码或自定义 Must-use (MU) 插件的一部分运行。你可以进行各种文件系统操作：创建、移动、复制或删除文件和目录。你可以运行 SQL 查询（RunSqlStep），导入将替换 Playground 默认 wp-* 目录的 WordPress 目录（ImportWordPressFilesStep），设置多站点网络（EnableMultisiteStep），以及 运行 WP CLI 命令。

假设你想分享你开发的插件，并通知用户他们正在 Playground 实例中。一种方法是使用 admin_notice 钩子 在特定页面上显示消息。

点击此处查看 Blueprint 的样子： 
{
 "landingPage": "/wp-admin/plugins.php",
 "features": {
   "networking": true
 },
 "steps": [
   {
     "step": "login"
   },
   {
     "step": "installPlugin",
     "pluginZipFile": {
       "resource": "url",
       "url": "https://raw.githubusercontent.com/{USER}/{REPO}/{BRANCH}/{PLUGINFILENAME}.zip"
     },
     "options": {
       "activate": true
     }
   },
   {
     "step": "writeFile",
     "path": "/wordpress/wp-content/mu-plugins/playground-notice.php",
     "data": "<?php add_action('admin_notices', function() {  echo '<div class="notice notice-info is-dismissible"><p>Hello from WordPress Playground</p></div>'; });"
   }
 ]
}

故障排除

由于它在浏览器内部运行，Playground 有一些需要注意的地方：

  • 需要 wp-load： 要使用 runPHP 步骤运行 WordPress PHP 函数，你需要引入 wp-load.php。因此，"code" 键的值应以 "<?php require_once('wordpress/wp-load.php'); REST_OF_YOUR_CODE" 开头。
  • 启用网络： 要访问 wp.org 资源（主题、插件、区块或模式），或者使用 add_editor_style() 加载样式表（例如，在 创建自定义区块样式 时），你需要启用网络选项："features": {"networking": true}。