ビルド

WordPress Playgroundは、モバイルで信号がなくても、迅速にWordPressを作成し学ぶのに役立ちます。ブラウザ、Node.js、モバイルアプリ、VS Code、または他の場所など、最も快適に作業できる場所でPlaygroundを使用できます。

ローカルWordPress環境を迅速に設定する

Playgroundを開発ワークフローにシームレスに統合し、コードをテストするためにローカルWordPress環境を迅速に立ち上げることができます。これは、ターミナルから直接またはお好みのIDEから行うことができます。

ブロックテーマで行った変更を保存し、GitHubプルリクエストを作成する

PlaygroundインスタンスをGitHubリポジトリに接続し、WordPress UIを通じて行った変更でプルリクエストを作成できます。Create Block Themeプラグインを活用しています。

このワークフローを使用すると、ブラウザ内で完全にブロックテーマを構築し、変更をGitHubに保存することができます。または、既存のものを改善/修正することもできます。

このワークフローの他の例:

ローカルフォルダとPlaygroundインスタンスを同期し、GitHubプルリクエストを作成する

ストレージタイプデバイススナップショット

Google Chromeを使用すると、Playgroundインスタンスをローカルディレクトリと同期できます。これは次のいずれかです:

  • 空のディレクトリ – このPlaygroundを保存し、同期を開始するため
  • 既存のディレクトリ – ここに読み込み、同期を開始するため

SVG画像情報

この機能は現在、Google Chromeのみに利用可能です。他のブラウザではまだ動作しません。

接続の両側で行われた変更に関して:

  • Playgroundで変更されたファイルは、あなたのコンピュータに同期されます。
  • あなたのコンピュータで変更されたファイルはPlaygroundに同期されません。「ローカルファイルを同期」ボタンをクリックする必要があります。

このワークフローを使用すると、ローカルディレクトリで行った変更から直接GitHub PRを作成できます。

このワークフローのデモをこちらでご覧ください:

他のAPIと統合して新しいツールを作成する。

Playgroundは、さまざまなAPIと組み合わせて素晴らしいツールを作成できます。可能性は無限大です。

Node.jsでWordPress Playgroundを使用することで新しいツールを作成できます。PHP WebAssemblyランタイムを提供する@php-wasm/nodeパッケージは、例えばhttps://playground.wordpress.net/で使用されるパッケージです。

Playgroundの上に構築されたもう一つの興味深いアプリはTranslate Live（例を参照）で、Open AIと組み合わせることで、翻訳が実際の文脈で表示され、修正できるWordPress翻訳ツールを提供します（例を参照）。このツールについての詳細はTranslate Live: 翻訳Playgroundの更新をお読みください。

オフラインで作業し、ネイティブアプリとして使用する

playground.wordpress.netに初めて訪れると、ブラウザはPlaygroundを使用するために必要なすべてのファイルを自動的にキャッシュします。その時点から、インターネット接続がなくてもplayground.wordpress.netにアクセスでき、プロジェクトに中断なく取り組むことができます。

また、Playgroundをデバイスにプログレッシブウェブアプリ（PWA）としてインストールし、ホーム画面から直接Playgroundを起動することもできます—まるでネイティブアプリのように。

詳細についてはオフラインモードとPWAサポートの紹介をお読みください。

非ウェブ環境にWordPressサイトを埋め込む

Playgroundを介してネイティブiOSアプリに実際のWordPressサイトを出荷する方法？ガイドでは、Playgroundを活用してWordPressサイトをiOSアプリにラップする方法を示しています。