使用 WordPress Playground 和 WebAssembly 打造浏览器内的 WordPress 体验

完全由 PHP 驱动且仅在浏览器中运行的 WordPress with WebAssembly

Adam Zieliński
Adam Zieliński
X GitHub 首页
Thomas Nattestad
Thomas Nattestad
X

初次看到 WordPress Playground 时，它看起来就像一个普通的网站，除了色彩鲜艳的背景之外。完全不是。您实际上看到的是整个 WordPress 技术栈，包括 PHP 和数据库，这些内容直接在浏览器中运行。

在本文中，Adam Zieliński（WordPress Playground 主管）和 Thomas Nattestad（V8 产品经理）将探讨以下内容：

  • WordPress Playground 如何帮助 WordPress 开发者。
  • 其运作原理。
  • 这对 WordPress 的未来意味着什么。

无需安装即可使用 WordPress，将其嵌入到您的应用中，甚至可以使用 JavaScript 控制它

您可以免费使用和自定义在 playground.wordpress.net 上嵌入的 WordPress。您无需支付云基础架构和支持费用，因为该网站完全位于您的浏览器中，任何其他人也无法访问。这种情况也是暂时的。刷新页面后，该图标就会消失。您可以创建任意数量的此类网站，以便进行原型设计、试用插件和快速探索想法。

您甚至可以使用内置的 PHP 和 WordPress 版本切换器，在不同的环境中测试代码：

phpinfo 页面。

WordPress Playground 是一种全新的 WordPress 使用方式。不过，只有将其添加到应用中，才能充分发挥其强大功能。最简单的方法是将 WordPress Playground 嵌入到 <iframe> 中，然后使用查询参数 API 对其进行配置。官方展示平台就是为此而生。例如，如果您选择 Pendant 主题和 Coblocks 插件，嵌入的 iframe 会更新为指向 https://playground.wordpress.net/?theme=pendant&plugin=coblocks。

WordPress Playground 展示。

iframe 是一种简单的入门方式，但也仅限于基本配置选项。如果您需要的功能超出上述范围，我们还有一个功能更强大的 API。

WordPress Playground JavaScript 客户端可让您完全控制嵌入的网站

您可以使用通过 @wp-playground/client npm 软件包提供的完整 API 来控制整个 WordPress 网站，包括文件系统和 PHP。以下示例展示了如何使用它 - 如需查看更多示例，请参阅交互式教程：

import {
  connectPlayground,
  login,
  connectPlayground,
} from '@wp-playground/client';

const client = await connectPlayground(
  document.getElementById('wp'), // An iframe
  { loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();

// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');

// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });

// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

即使没有 WordPress，也能使用 WebAssembly PHP

WordPress Playground 不是单体应用。WebAssembly PHP 是独立于 WordPress 发布的，您也可以单独使用它。对于 Web，您可以使用针对较小软件包大小进行了优化的 @php-wasm/web npm 软件包；在 Node.js 中，您可以依赖于 @php-wasm/node，它提供了更多 PHP 扩展。Adam 使用了前者在此 WP_HTML_Tag_Processor 教程中添加了互动 PHP 代码段。下面简要介绍了该功能的使用方式：

import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
  requestHandler: {
    documentRoot: '/www',
  },
});

// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });

// Or use the familiar HTTP concepts:
const response = php.request({
  method: 'POST',
  relativeUrl: '/index.php',
  data: { name: 'John' },
});
console.log(response.text); // Hello John

此时，您一定会想：这到底是怎么运作的？这个问题问得好！ 我们来深入了解一下内部机制，找出原因。系好安全带！

在底层，有 WebAssembly PHP、SQL 转换器和浏览器内服务器

PHP 作为 WebAssembly 二进制文件运行

PHP 不仅可直接在浏览器中运行，WordPress Playground 开发了一个专用流水线，用于使用 Emscripten 将 PHP 解释器构建为 WebAssembly。构建原生 PHP 并不复杂，只需调整此处的函数签名、强制使用此处的配置变量，并应用