WordPress Playground 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00547/article/details/147135129

WordPress Playground 使用教程

wordpress-playground Run WordPress in the browser via WebAssembly PHP 项目地址: https://gitcode.com/gh_mirrors/wo/wordpress-playground

1. 项目介绍

WordPress Playground 是一个实验性的浏览器内 WordPress 项目，它不需要 PHP 服务器即可运行，得益于 WebAssembly 的魔法。这个项目旨在让用户、学习者、扩展者以及贡献者能够通过构建基础软件工具，轻松创建与 WordPress 互动的、零配置的 JavaScript 应用程序。

WordPress Playground 的目的是促进用户通过探索来学习 WordPress，通过编写代码来学习 WordPress 开发，并实现 WordPress 生态系统的即时访问。更多关于项目的愿景和路线图，请参考官方文档。

2. 项目快速启动

首先，你需要克隆 WordPress Playground 的仓库。由于默认的 git clone 命令会下载所有历史记录，这个过程可能会非常慢。以下是只拉取最新版本的 trunk 分支的快速克隆命令：

git clone -b trunk --single-branch --depth 1 --recurse-submodules https://github.com/WordPress/wordpress-playground.git

接下来，进入项目目录并安装依赖：

cd wordpress-playground
npm install

然后，运行开发服务器：

npm run dev

这将启动一个本地服务器，并且浏览器会自动打开并导航到你的客户端 WordPress at http://127.0.0.1:5400/。现在，任何对 .ts 文件的修改都会实时重新加载。

3. 应用案例和最佳实践

嵌入 WordPress Playground

你可以通过 <iframe> 将 WordPress Playground 嵌入到你的项目中。具体做法请参考官方文档。

使用 JavaScript 客户端

你可以使用 JavaScript 客户端来连接到 Playground。以下是一个使用 <iframe> 和 @wp-playground/client 包中的 startPlaygroundWeb 函数的示例：

<!DOCTYPE html>
<html>
<body>
  <iframe id="wp-playground" style="width: 1200px; height: 800px"></iframe>
  <script type="module">
    import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';
    const client = await startPlaygroundWeb({
      iframe: document.getElementById('wp-playground'),
      remoteUrl: 'https://playground.wordpress.net/remote.html',
      blueprint: {
        landingPage: '/wp-admin/',
        preferredVersions: {
          php: '8.0',
          wp: 'latest'
        },
        steps: [
          {
            step: 'login',
            username: 'admin',
            password: 'password'
          },
          {
            step: 'installPlugin',
            pluginData: {
              resource: 'wordpress.org/plugins',
              slug: 'friends'
            }
          }
        ]
      }
    });
    const response = await client.run({
      code: '<?php require_once "/wordpress/wp-load.php"; $posts = get_posts(); echo "Post Title: " . $posts[0]->post_title;'
    });
    console.log(response.text);
  </script>
</body>
</html>