メインコンテンツへスキップ

構築

WordPress Playground を使えば、モバイル端末からでも、電波の届かない場所でも、WordPress を素早く作成・学習できます。ブラウザ、Node.js、モバイルアプリ、VS Code など、作業効率の良い場所で Playground をご利用いただけます。

ローカルの WordPress 環境を素早く設定する​

Playground を開発ワークフローにシームレスに統合することで、ローカルの WordPress 環境を素早く起動し、コードをテストできます。ターミナル または お好みの IDE から直接実行できます。

ブロックテーマの変更を保存し、GitHub プルリクエストを作成します​

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

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

このワークフローのさらにいくつかの例:

プレイグラウンドインスタンスをローカルフォルダと同期し、GitHub プルリクエストを作成する​

Storage Type Device Snapshot

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

  • 空のディレクトリ – このプレイグラウンドを保存して同期を開始します
  • 既存のディレクトリ – ここで読み込み、同期を開始します

この機能は現在 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 です（例 を参照）。OpenAI と組み合わせることで、WordPress 翻訳ツールを「その場で」提供し、翻訳を実際の文脈で確認・修正できます（例を参照）。このツールの詳細については、Translate Live: Translation Playground のアップデート をご覧ください。

オフラインでもネイティブアプリとしても動作​

playground.wordpress.net に初めてアクセスすると、Playground の使用に必要なすべてのファイルがブラウザに自動的にキャッシュされます。それ以降は、インターネット接続がなくても playground.wordpress.net にアクセスできるようになり、中断することなくプロジェクトの作業を継続できます。

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

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

ウェブ以外の環境に WordPress サイトを埋め込む​

Playground 経由でネイティブ iOS アプリで実際の WordPress サイトを配布する方法 ガイドでは、Playground を活用して WordPress サイトを iOS アプリにラップする方法を説明しています。