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 將如何幫助您的項目變得更好？ 請在下面的評論部分告訴我們您的想法！