WordPress Playground 简介（包括用例和首席开发人员的评论）

已发表: 2023-07-19

WordPress Playground 可以解决很多问题。很长一段时间以来，没有一种可靠的方法可以在没有复杂的托管和演示设置的情况下展示主题或插件等 WordPress 产品。此外，重复错误通常是支持团队的雷区。 WordPress Playground 是该平台的浏览器内版本，可以解决所有这些问题。

👉 在这篇文章中，我将了解 WordPress Playground 项目，谈论它的历史，向您展示如何使用它，并讨论这个令人兴奋的工具下一步的发展方向。

WordPress Playground 是什么

WordPress 需要许多活动部件才能启动。服务器显然是必需的，但其 PHP 架构还需要数据库。但是，如果您不需要其中任何一个的典型实现来启动新的 WordPress 安装，该怎么办？这就是 WordPress Playground 的用武之地。

它是该平台的完全浏览器版本，不需要服务器、PHP 或数据库。相反，它使用一些其他常见的技术来模拟或替换标准所需的组件：

该工具使用 WebAssembly 二进制文件来构建 PHP 解释器。
有一个运行 SQLite 的 WordPress 插件，而不是 MySQL。
Web 服务器使用 JavaScript 作为 Service Worker 的巧妙实现。

因此，您可以拥有将在浏览器中运行的 WordPress 的新版本，而无需其通常的依赖项（至少以您期望的方式）。

WordPress Playground 快速浏览

一旦您访问 WordPress Playground 网站，该服务将为您准备一个 WordPress 版本，并且只需几秒钟。从技术上来说就是这样，尽管还有更多的可能性等待（我稍后会介绍）。

主屏幕将显示 WordPress 网站的前端，就像您已登录一样。这意味着您拥有可以前往后端的典型工具栏。然而，在这样做之前，请在模拟浏览器工具栏中发现一些额外的功能：

可帮助您选择特定 PHP 或 WordPress 版本的菜单。
导入和导出 Playground 实例以供将来使用的选项。

选择 PHP 和 WordPress 版本时，您还可以选择临时或持久存储。后者使用 cookie 来保留您的 WordPress 实例。

正如我所建议的，还有其他方法可以自定义您的 WordPress Playground 实例，我将很快介绍。与此同时，安装的其余部分看起来就像典型的 WordPress。 WordPress Playground 安装的唯一插件是导入内容的插件：

说到这里，任何解决方案都不可能是完美的，WordPress Playground 也是如此。接下来我们再详细讨论一下这个问题。

WordPress Playground 的限制

WordPress Playground 的主要限制是您无法访问 WordPress 主题目录或 WordPress 插件目录。但是，您可以使用 URL 中的属性来安装主题和插件。这是我稍后将向您展示如何做的事情。

如果您想保留更改，导出 Playground 实例也是一个好主意。虽然现在有持久存储模式，但您不想在项目处于早期阶段时依赖于此。

当涉及到开发问题时，您可能会发现 iFrame、Xdebug 和某些 PHP 函数的一些问题。最好将文档的专用部分放在手边，以便了解这些问题将来的进展情况。 🔮

为什么 WordPress Playground 存在

WordPress Playground 非常新颖且闪亮。事实上，该项目的首次演示是在 2022 年 11 月的 State of the World 上：

该项目的快速发展（从构思到实现）是 Automattic 开发人员 Adam Zielinski 的工作成果。正如他详细的博客文章所述，他希望找到一种无需冗长的工作流程或设置时间即可安装 WordPress 的方法。

此外，我还认为这有助于 WordPress 实现与 Squarespace 和 Wix 等网站建设者竞争的长期目标。毕竟，这些平台与您无关的服务器、代码和数据库。这是一个很酷的次要好处，有助于推进整个 WordPress 项目，我将在后面的部分中详细讨论这一点。

到 2023 年 6 月，WordPress Playground 在 2023 年 6 月 WordCamp Europe 主题演讲期间再次播出，由 Josepha Haden Chomphosy 发表：

至此，WordPress Playground 已经是一个成熟的应用程序，可以开始投入到日常开发中了。它可以插入任意数量的工作流程、项目和情况。我稍后会介绍其中的一些内容。

WordPress Playground 在平台生态系统中的位置

几年前，WP Sandbox 团队构建了 Poopy.life – 一个 WordPress 沙箱，可让您在需要时免费启动新安装。该项目并没有持续很长时间，尽管您可以看到这个概念如何在 WordPress Playground 中延续。

与其前身不同，WordPress Playground 可以提供更好的方式将该平台集成到社区的几乎每个方面。

例如，想象一个场景，您可以在您的企业网站上实时展示 WordPress 主题或插件演示，并具有对后端和前端的完全访问权限。您实质上是在实际站点上为用户提供了功能齐全的演示。以下是 Adam Zielinski 的想法：

…插件作者和市场可能会开始提供基于 Playground 的交互式预览； 在线代码编辑器可能会添加 WordPress 支持。 托管公司可能会提供交互式入门体验，您可以从定制真正的 WordPress 网站开始……

在其他领域，客户支持团队可以使用模拟的 Playground 来帮助根据用户的确切规范创建 WordPress 设置。这意味着如果用户遇到 WordPress、插件、主题或其他产品的问题，可能无需远程访问系统。相反，用户可以向支持团队准确展示他们正在做什么，同时保持网站安全。

Adam 将 WordPress Playground 视为“……更具互动性的 WordPress 体验……”和“……更容易了解 WordPress 的方式”。 这些类型的用例正是他的意思。事实上，您已经可以看到这一点，因为 WordPress.org 主页包含一个使用 Playground尝试 WordPress 的链接：

对于开发工作来说，WordPress Playground 可能是天赐之物。例如，它可能是“……开发人员用来启动 WordPress、试验临时站点、设置临时站点和预览拉取请求的标准工具。”

WordPress Playground 有可能成为启动 WordPress 的事实上的方式，特别是出于开发目的。已经有一种方法可以启动 WordPress 并使用特定的古腾堡插件拉取请求（PR）加载它，如下所示：

最后我将介绍 WordPress Playground 将如何融入该平台的总体生态系统：

...最终目标是帮助 WordPress 成为网络操作系统...

不过，要发挥 Playground 的潜力，您需要知道如何使用它。接下来我将向您展示这一点。

如何使用 WordPress Playground（四个技巧）

从本质上讲，WordPress Playground 的使用和操作都非常简单。然而，有很多高级技巧、技巧和技术来创建您想要的精确安装。

在接下来的几节中，我将向您展示一些使用 WordPress Playground 的方法。最好的起点是如何在应用程序内执行基本安装。

利用查询 API 属性执行 WordPress 任务并自定义平台
构建 JSON 蓝图来创建自定义 WordPress 安装
使用 JavaScript API 控制 WordPress Playground
在 Node.js 中使用 WordPress Playground

1. 利用查询 API 属性执行 WordPress 任务并自定义平台

实现 WordPress Playground 的最基本方法是使用 Query API，它使用起来很简单。您的安装将显示在 iFrame 中，因此您可以使用一行代码将其嵌入到几乎任何网站上：

 <iframe src="https://playground.wordpress.net/"></iframe>

从这里，您可以使用 URL 中的专用配置选项自定义安装。现在有一些选项可以满足大多数基本任务。例如，您可以选择 PHP 版本、页面模式、存储选项等。

最重要的方面是您安装哪些插件和主题，因为这是您在 WordPress Playground 中执行此操作的唯一方法：

 <iframe src="https://playground.wordpress.net/?plugin=otter-blocks&theme=neve&url=/wp-admin/post-new.php&mode=seamless"> </iframe>

此代码片段将安装 Otter Blocks 和 Neve，将 WordPress 显示为全屏，并在帖子编辑页面上打开。您可以在屏幕上的模拟地址栏上输入这些内容：

WordPress Playground 中的模拟地址栏包含使用属性选项的 URL。

💡 这是一种灵活的方式来安装你需要的东西，如果你了解 PHP，你应该熟悉它。

2. 构建 JSON 蓝图来创建自定义 WordPress 安装

自定义 WordPress Playground 的另一种常见方法是通过 JSON Blueprints API。在这里，您将使用 JSON 格式来构建站点配置文件。如果您使用 Varying Vagrant Vagrants (VVV) 进行本地 WordPress 开发，您就会了解该过程。

 { "$schema": "https://playground.wordpress.net/blueprint-schema.json", "landingPage": "/wp-admin/", "preferredVersions": { "php": "8.0", "wp": "latest" }, "steps": [ { "step": "login", "username": "admin", "password": "password" } ] }

我认为这些比使用查询 API 更灵活，因为您不需要代码（只需 JSON）。此外，Blueprints API 还代表您获取 HTTP 请求。您也可以在 Node.js 中使用这些（稍后会详细介绍），不过将蓝图粘贴到模拟地址栏中会更简单。

虽然我无法在这里完整介绍如何使用 Blueprints API，但我鼓励您查看精彩的文档。您会发现您可以自动化流程的各个方面，例如以特定角色登录用户。

3. 使用 JavaScript API 控制 WordPress Playground

WordPress Playground 提供了自己的 JavaScript API，可让您运行实例并以与其他方法类似的方式控制它。为此，您需要使用 npm 获取@wp-playground/client包。您还需要一个 iFrame 来显示最终的 WordPress 安装。

以下是 WordPress Playground 文档中的一组代码，展示了使用 JavaScript API 的最短方法：

 <iframe ></iframe> <script type="module"> // Use unpkg for convenience import { startPlaygroundWeb } from 'https://unpkg.com/@wp-playground/client/index.js'; const client = await startPlaygroundWeb({ iframe: document.getElementById('wp'), remoteUrl: `https://playground.wordpress.net/remote.html`, }); // Let's wait until Playground is fully loaded await client.isReady(); </script>

有了这个client对象，您就可以使用 JSON 蓝图和函数以及 Playground API 客户端进一步控制网站。后者允许您运行特定的 PHP 代码、发出 HTTP 请求、自定义 PHP.ini 文件、管理文件和目录，以及您期望实现的几乎所有其他功能。

4. 在 Node.js 中使用 WordPress Playground

WebAssembly 是 WordPress Playground 的核心技术，因此您可以在 Node.js 中使用它。这将打开该工具，帮助您使用扩展在基于 VSCode 的编辑器中进行 WordPress 开发。

该扩展允许您安装零设置的本地开发环境，不需要 Apache、MySQL 等依赖项。您可以从侧边栏一键启动 WordPress 服务器：

这可能是将代码和开发环境保持在一起的绝佳方法。而且，在我看来，它提供了一种高效且有组织的方式来保存您的项目。

WordPress Playground 的未来

鉴于 WordPress Playground 是一个新的——更不用说令人兴奋了！ – 项目、开发正在快速进行。这意味着一直有很多有趣的发展和更新发生。

其中最大的一个是 Blocknotes。这款 iOS 应用程序目前处于测试阶段，您可以在设备上创建笔记，然后同步到 WordPress 以帮助您创建帖子和页面。希望它成为更好的 WordPress 移动体验的核心——这是社区所要求的。正如亚当所解释的：

Blocknotes 引领了使用 WordPress 作为移动应用程序的过程的记录和自动化 - 我很高兴看到这样一个世界：您可以自定义 WordPress 网站或创建 WordPress 插件，单击按钮，然后将其变成移动应用程序应用程序。

然而，WordPress Playground 可以提供更多。例如，借助 Playground 的架构，交互式代码块插件可以让您在浏览器中运行 PHP。

甚至有人努力让 WP CLI 与 Playground 配合使用：

…我花了一些时间…使用 Playground 在浏览器中运行 WP CLI。 考虑到未来，WP CLI 站点可以显示一个交互式终端，让您学习和探索 WP CLI 命令......

总体而言，未来看起来 WordPress Playground 将占据重要地位：

...插件作者和市场可能会开始提供基于 Playground 的交互式预览...

考虑到 Playground 的整体范围，这似乎是一个适度的应用程序。这可能是 WordPress 作为平台的一个里程碑，就像块编辑器或类似创新一样。

转到顶部

结论🧐

WordPress 生态系统需要一个工具来展示插件、主题、站点等，而不需要复杂的设置过程或其他托管。 WordPress Playground 项目正好提供了这一点。它允许您在浏览器中运行完整版本的 WordPress，无需服务器、数据库、PHP 或许多其他依赖项。

简而言之，该工具非常棒，并且看起来将成为该平台未来的一部分。更好的是，开发团队会永久致力于解决方案。新增了许多令人兴奋的内容，例如拉取请求选项，我认为从现在开始这将使 WordPress 开发和支持变得更加轻松。

WordPress Playground 将如何帮助您的项目变得更好？ 请在下面的评论部分告诉我们您的想法！