WordPress Playground – ブラウザでWordPressを使用する方法

読者向けのチュートリアルを作成する際、WordPress の機能、プラグイン、テーマをすばやくテストする必要がよくあります。結局のところ、徹底的にテストせずにソリューションを推奨しても、あまり役に立たないのではないでしょうか？

WordPress Playground をご紹介します。ブラウザで直接 WordPress を探索できる実用的なツールです。複雑なセットアップは不要で、さらに重要なのは、既存のウェブサイトにリスクがないことです。

私たちは WordPress Playground を自身のテストプロセスで非常に役立つと感じており、その機能を最大限に活用するためのいくつかの巧妙な方法を発見しました。WordPress を始めたばかりの方、新しいツールを安全に試したい方、または迅速なテスト環境が必要な方にとって、このツールはあなたの生活をずっと楽にしてくれます。

このガイドでは、WordPress Playgroundを効果的に使用するために知っておくべきすべてを説明します。

WordPress Playgroundとは？

WordPress Playground は、ブラウザ内で一時的に動作する WordPress インスタンスであり、コンテンツ管理システムについて実験し、さらに学ぶことができます。

これは、実際のライブサイトをセットアップせずに、あらゆる種類の WordPress 開発を行えるテスト環境のようなものです。

WordPress Playground のウェブサイトにアクセスして開くだけです。その後、通常どおり WordPress を使用できます。新しいページを追加したり、新しいプラグインをインストールしたり、新しいテーマを試したりできます。

WordPress Playground ページを更新すると、すべてのカスタマイズが失われます。ただし、WordPress インスタンスをダウンロードして WordPress Playground に再度アップロードすることもできます。

WordPress Playgroundはどのように機能しますか？

WordPress Playgroundは、通常のウェブサーバーとデータベースのセットアップなしでWordPressをテストできる、クールなテクノロジーで実行されています。

1. WebAssemblyバイナリ (Wasm): これにより、PHPコードをWebブラウザで直接実行でき、WordPressを従来のサーバーなしで動作させることができます。また、ChromeやEdgeからFirefox、Safariまで、すべてのブラウザとの互換性も確保されます。
2. SQLiteデータベース：MySQLの代わりに、WordPress PlaygroundはSQLiteと呼ばれる軽量なファイルベースのデータベースシステムを使用しており、ブラウザ内で直接実行されます。
3. Service Worker および Worker Threads API: これらのウェブツールは、リクエストの処理やバックグラウンドの JavaScript スクリプトの実行を支援し、WordPress Playground がブラウザ内で PHP アプリをスムーズに実行できるようにします。

これらのテクノロジーにより、開発者は WordPress Playground を node.js、Visual Studio Code、CLI アプリ、さらには OpenAI と統合することもできます。

これらのツールを使用すると、開発者はテストまたはステージング目的で開発プラットフォーム上で WordPress Playground を使用することもできます。

WordPress Playground の制限事項は何ですか？

WordPress Playground は、その利点にもかかわらず、次のようないくつかの制限があります。

• WordPress Playgroundでのカスタマイズは一時的です – ブラウザで変更を保存しないことにした場合、進行状況を失わないように、誤ってページをリフレッシュしないように注意する必要があります。
• エラーが発生しやすい – WordPress Playground を使用したプラグインのテスト経験から、すべてが正常に機能するわけではありません。そのため、あちこちで問題が発生する可能性がありますが、プラットフォームの改善のために WordPress にフィードバックを提供することができます。
• iFrame の問題は一般的です – WordPress Playground インスタンスをウェブページに埋め込む場合、意図しないリフレッシュから iFrame が機能しないまで、いくつかの問題が発生する可能性があります。

WordPress Playgroundがどのようなものかお分かりいただけたところで、どのように活用できるかを見ていきましょう。以下のクイックリンクを使用して、チュートリアルを進めてください。

• WordPress Playground のセットアップ方法
• WordPress Playground ブループリントの使用方法
• WordPress Playground でテーマとプラグインをインストールする方法
• ブラウザにWordPress Playgroundインスタンスを保存する方法
• WordPress Playgroundサイトのダウンロード/復元方法
• WordPress PlaygroundをGitHubにインポート/エクスポートする方法
• ウェブサイトにWordPress Playgroundを埋め込む方法
• WordPress Playgroundでエラーを報告する方法
• WordPress Playground に関するよくある質問

WordPress Playground のセットアップ方法

WordPress Playgroundを使用するには、Webブラウザでこのドメイン名に直接アクセスできます：https://playground.wordpress.net

ウェブサイトにアクセスしたら、Playground がセットアップされるまで数分待ちます。その後、デフォルトの WordPress テーマを使用したウェブサイトのフロントエンドが表示されます。

テストに WordPress Playground を使用している場合、実際のウェブサイトの WordPress ソフトウェアを反映するように環境を構成したい場合があります。

これを行うには、右上の歯車「設定」アイコンをクリックします。

まず、Playground の WordPress バージョンを選択する必要があります。現在使用しているバージョン、または WordPress ウェブサイト で使用する予定のバージョンを選択できます。

WordPressは「WordPress Nightly」バージョンも利用可能にしています。これは、WordPress開発チームによって行われた最新の変更が含まれるWordPressの開発バージョンです。

プラグインまたはテーマの開発者で、次のWordPressアップデートとの互換性をテストしたい場合にこれを使用できます。

次に設定したいのは、PHPのバージョンです。

ウェブサイトで使用しているPHPバージョンと同じにすることをお勧めします。ただし、7.0より古いPHPバージョンは見つからない場合があります。

WordPress Playground でできることの 1 つに、管理エリアの言語を選択することも含まれます。

何十もの選択肢がありますが、デモンストレーションのために「English (United States)」を使用します。

その下で、「ネットワークアクセスを許可する」および「マルチサイトネットワークを作成する」設定を有効にできます。

ネットワークアクセス機能を許可することをお勧めします。これにより、環境から直接 WordPress テーマ やプラグインをインストールできるようになります。これにより、手動でセットアップする必要がなくなります。

テスト用の WordPress マルチサイトネットワークを作成したい場合は、2 番目の設定を有効にすることをお勧めします。

完了したら、「設定を適用＆プレイグラウンドをリセット」をクリックするだけです。

管理画面を開くには、サイトタイトルのメニューにカーソルを合わせ、「ダッシュボード」をクリックします。

または、「サイトを編集」をクリックして、フルサイトエディターにアクセスすることもできます。

基本的なWordPress Playgroundのセットアップは完了しましたが、エクスペリエンスを向上させる追加設定をいくつか見てみましょう。

WordPress Playground ブループリントの使用方法

WordPressでは、ブループリントは、カスタムWordPress環境をすばやく簡単にセットアップするのに役立つシンプルなJSONファイルです。これには、使用するWordPressとPHPのバージョン、インストールするプラグインとテーマ、さらにはどのようなWordPressのデザイン要素を持つかといった設定が含まれます。

これは、テスト環境を頻繁に作成するが、それらを迅速にセットアップする必要がある場合に最適なオプションです。または、特定のWordPress構成を他の人と共有する必要がある場合にも適しています。

ブループリントにアクセスするには、左上隅にある小さな四角いアイコンをクリックします。

次に、「Blueprints Gallery」タブに移動します。

ここでは、他のユーザーが共有した公開ブループリントが見つかります。選択肢はたくさんあります。「Create Block Theme」オプションを使用して Create Block Theme プラグインでカスタムブロックテーマを作成したり、「Stylish Press」を試してデモの WooCommerce ウェブサイトをセットアップしたりできます。

特に Stylish Press は、チュートリアルのために WooCommerce のプラグインやテーマをテストするのに非常に役立つため、気に入っています。

ブループリントを使用するには、単に「プレビュー」ボタンをクリックしてWordPress Playgroundにロードします。

独自のWordPress Playgroundインスタンスをブループリントにすることもできます。

「一時的な Playground」タブに切り替え、「ホームページ」の横にある 3 つのドットボタンをクリックし、「ブループリントを表示」を選択するだけです。

これにより、インスタンスがブループリントの .json ファイルとして表示されます。

ブループリントファイルをコンピューターに保存したい場合は、フロッピーディスクの「保存」アイコンをクリックするだけです。

ブループリントを保存しておくと、将来参照するのに役立ちます。また、Contribution Guidelines に従ってブループリントギャラリーで共有することもできます。

保存したブループリントを読み込むには、フロッピーディスクボタンの隣にある開いたフォルダアイコンをクリックします。

単純にblueprint.jsonファイルを選択するだけで、WordPressはその設定に基づいて環境を自動的にセットアップします。

WordPress Playground でテーマとプラグインをインストールする方法

WordPress Playground に WordPress プラグインやテーマをインストールするには、いくつかの方法があります。セットアップ中にネットワークアクセス機能を有効にした場合、通常の WordPress サイトと同じように、WordPress ダッシュボードから直接インストールできます。

標準的なインストールプロセスの手順については、詳細なガイドをご覧ください。

• WordPressプラグインのインストール方法（初心者向けステップバイステップ）
• WordPress テーマのインストール方法（初心者ガイド）

ネットワークアクセスを有効にしていない場合、または プレミアム WordPress プラグインやテーマをインストールしている場合は、手動インストール方法に従う必要があります。

まず、テーマまたはプラグインファイルをダウンロードします。無料のオプションについては、WordPress.org にアクセスし、目的のプラグインまたはテーマを見つけて、「ダウンロード」ボタンをクリックします。これにより、zip ファイルがコンピューターに保存されます。

プラグインの場合は、WordPress Playgroundのダッシュボードに移動し、プラグイン » 新規追加に移動するだけです。

その後、「プラグインのアップロード」ボタンをクリックし、「ファイルを選択」を選択して、先ほどダウンロードしたプラグインのzipファイルをアップロードします。最後に、「今すぐインストール」をクリックします。

テーマに関しては、Playground を初めて使用する際に WordPress によってデフォルトのテーマがインストールされます。

ただし、別の無料または有料のWordPressテーマを使用したい場合は、ソースから手動でダウンロードできます。その後、Playgroundで外観 » テーマに移動し、「新しいテーマを追加」をクリックします。

次の画面で、「テーマのアップロード」ボタンをクリックします。

その後、先ほどダウンロードしたテーマファイルを選択し、「今すぐインストール」をクリックします。

テーマやプラグインをインストールする別の方法として、WordPress Playground のクエリ API を使用する方法があります。この方法では、WordPress Playground の URL にクエリパラメータを追加する必要があります。

例えば、WordPress PlaygroundでAIOSEOの無料版をインストールしてテストしたい場合は、AIOSEOのWordPress.orgページにアクセスできます。その後、AIOSEOのURLスラッグをメモしてください。

次に、新しいブラウザタブで、次のようにAIOSEOのスラッグを含むWordPress PlaygroundのURLを入力します。

https://playground.wordpress.net/?plugin=all-in-one-seo-pack

「Enter」キーを押すと、WordPress Playground は自動的に、AIOSEO プラグインがインストールされた新しい環境を作成します。

テーマをインストールしたい場合は、plugin パラメータを theme に置き換えるだけです。例：

https://playground.wordpress.net/?theme=neve

WordPress コアの上に複数のプラグインまたはテーマをインストールしたい場合は、複数のクエリパラメータを組み合わせることもできます。各パラメータはアンパサンド & 記号で区切るようにしてください。

AIOSEOプラグインとMonsterInsightsプラグイン、およびNeveテーマをインストールする場合、URLはこのようになります。

https://playground.wordpress.net/?theme=neve&plugin=all-in-one-seo-pack&plugin=google-analytics-for-wordpress

Chrome ユーザーの場合、Open in WordPress Playground 拡張機能をインストールすることもできます。これにより、WordPress.org のプラグインまたはテーマのページにアクセスするたびに、「Playground」ボタンが表示されます。

これをクリックすると、プラグインまたはテーマがインストールされた新しい WordPress Playground 環境が開きます。クエリパラメータの方法が簡略化されます。

ブラウザにWordPress Playgroundインスタンスを保存する方法

WordPress Playground で色々試して、待機リストランディングページ全体やウェブサイトを作成したとしましょう。タブを閉じてしまい、すべての進捗を永久に失ってしまうのはもったいないことです。

幸いなことに、WordPress Playground ではインスタンスをブラウザに保存できます。これを行うには、左上隅にある小さな四角いアイコンをクリックします。

「一時的なプレイグラウンド」タブを選択していることを確認してください。

次に、「保存」ボタンをクリックし、「このブラウザに保存」を選択します。

次に、WordPress がこのプレイグラウンドをブラウザに保存するのを待ちます。私たちの経験では、これには数分かかります。

完了すると、「保存された Playground」という新しいセクションが表示されます。WordPress は、あなたの Playground に「Happy Sunny Country」や「Calm Classic Forest」のようなクリエイティブな名前を自動的に付けます。

前のセクションと同様に、ここで環境設定を構成できます。ただし、PHP バージョンとネットワークアクセス設定の変更に限定されます。

変更を加えたら、「保存して再読み込み」をクリックしてインスタンスを開きます。

これで、ブラウザタブを閉じても、WordPress は Playground インスタンスに対して行ったすべての変更を保存します。

WordPress では、「ローカルディレクトリに保存」することもできます。以前と同じ「保存」ボタンをクリックし、「ローカルディレクトリに保存」を選択するだけです。

私たちが発見したのは、このオプションは、通常のWordPressインストールのように、すべてのPlaygroundファイルを解凍せずにダウンロードすることです。wp-content、wp-adminなどの標準的なWordPressフォルダを取得します。

これらのファイルを ステージング環境またはホスティングサービスの空のウェブサイトにアップロードしたい場合は、このオプションを使用することをお勧めします。

特に、まずWordPress Playgroundで構築してから、Playground環境の外で作業したい場合に便利です。

WordPress Playgroundサイトのダウンロード/復元方法

ブラウザでプレイグラウンドを保存しておくと、素早くアクセスできて便利ですし、解凍されていないファイルを保存しておけばライブサイトでもうまく機能しますが、その中間が必要な場合もあります。

WordPress Playground を zip ファイルとしてダウンロードすると、保存や共有が簡単なポータブルバックアップになります。任意の WordPress Playground インスタンスに復元することもできます。

まず、左上隅にある小さな四角いアイコンをクリックします。

「一時プレイグラウンド」タブにいるか、保存済みのプレイグラウンドにいることを確認してください。次に、右上の「ホームページ」ボタンの隣にある 3 つの点のメニューをクリックします。

「ZIPとしてダウンロード」をクリックすると、ブラウザがファイルをコンピューターにダウンロードを開始します。

次に、ブラウザがファイルをコンピューターにダウンロードし始めます。

ダウンロードしたPlaygroundを復元するには、「一時的なPlayground」の上にある3点メニューをクリックし、「.zipからインポート」を選択します。

ポップアップが表示され、エクスポートしたファイルを選択するように求められます。

選択して「インポート」をクリックします。

ファイルが有効な場合、成功メッセージが表示され、Playgroundが復元されたセットアップでリフレッシュされます。

ポップアップを閉じて、復元されたサイトでの作業を開始するには、「OK」をクリックしてください。

WordPress Playgroundのzipエクスポートの素晴らしい点の1つは、WordPress.comのローカル開発ツールであるStudio by WordPress.comで使用できることです。これにより、適切なローカル環境でサイトの作業を続けることができます。

まず、 Studio by WordPress.com のウェブサイトにアクセスし、お使いのコンピューターに応じて「Windows 用ダウンロード」または「Mac 用ダウンロード」をクリックします。

ダウンロードしたファイルを開いてインストールを開始します。

インストール進捗状況を示すポップアップウィンドウが表示されます。

インストールが完了したら、最初のサイトを追加する準備が整います。

WordPress Playground の zip ファイルを「バックアップのインポート」フィールドにドラッグアンドドロップするだけです。サイトには、識別しやすい任意の名前を付けることができます。

インポートすると、ローカルの WordPress サイトのダッシュボードが表示されます。

サイトの作業を開始するには、右上隅にある「開始」ボタンをクリックします。これにより、ローカルウェブサイトがコンピューター上でアクティブになります。

「開始」ボタンが「実行中」に変わるまで待ち、次に左上隅の「WP Admin」リンクをクリックします。

これにより、ローカルのWordPress管理ページが開かれ、サイトの開発を続けることができます。

WordPress Playground を GitHub にインポート/エクスポートする方法

GitHub アカウントをお持ちの場合は、WordPress Playground からサイトをエクスポートおよびインポートすることもできます。GitHub は、ウェブサイトの変更を追跡し、ファイルをバックアップし、他のユーザーと共同作業できる優れたプラットフォームです。

左上隅にある小さな四角いアイコンをクリックすることから始めます。

WordPress PlaygroundからGitHubにサイトをエクスポートするには、「ホームページ」ボタンの横にある3つのドットのメニューをクリックします。

その後、「GitHub にエクスポート」を選択します。

次のポップアップで、WordPressがバックアップとしてウェブサイトをコンピュータに保存することを推奨していることがわかります。それが完了したら、「Playgroundをzipとしてエクスポートしました」というボックスにチェックを入れることができます。

次に、「GitHub アカウントを接続」ボタンをクリックします。

次に、WordPress Playgroundがリポジトリにアクセスすることを承認していることを確認する必要があります。

続行するには、「adamziel を承認」をクリックするだけです。

この段階で、エクスポートするファイルの種類（プラグイン、テーマ、wp-contentディレクトリ、または特定のパス）を選択してください。

すべてのプラグイン、テーマ、メディアファイル、ウィジェット、メニュー、フォントをエクスポートしたい場合は、最後のオプションを選択してください。

また、サイトをエクスポートしたい公開GitHubリポジトリのURLを指定する必要があります。

次に、「次のステップ」ボタンをクリックします。

それが完了したら、新しいプルリクエストを作成するか、既存のプルリクエストを更新するかを選択する必要があります。デモンストレーション目的で、最初のオプションを選択します。

その後、変更をコミットするリポジトリのパスを入力します。

また、WordPress Playgroundを使用して行った変更を指定するために、コミットメッセージを挿入する必要があります。

すべて完了したら、「プルリクエストを作成」をクリックします。

エクスポートが成功すると、WordPressは新しいプルリクエストへのリンクを含むポップアップを表示します。

リンクをクリックするだけで、それがどのように機能するかを確認できます。

次に、GitHub から WordPress Playground にサイトをインポートしたい場合は、単に「一時プレイグラウンド」の上にある 3 つの点のメニューをクリックします。

次に、「GitHubからインポート」を選択します。

WordPress Playground の環境を完全に新規に開く場合、GitHub Playground の認証プロセスを再度行う必要がある場合があります。

その後、インポートしたいGitHubリポジトリまたはパスのURLを入力します。

次に、インポートするファイル（テーマ、プラグイン、または wp-content ディレクトリ全体）を指定する必要があります。

必要であれば、インポート元のリポジトリのパスを再度挿入することもできます。それ以外の場合、WordPressはインポート元のパスをすでに知っている場合は、このフィールドを自動的に入力します。

完了したら、「インポート」をクリックするだけです。

インポートが成功すると、成功メッセージのポップアップが表示されます。

「OK」をクリックして閉じます。

WordPress Playground と GitHub でできることのもう 1 つは、WordPress プロジェクトの既存の GitHub プルリクエストをプレビューすることです。これにより、WordPress で行われている改善や開発を確認し、テストすることができます。

現時点では、この機能は WordPress Develop または Gutenberg リポジトリからのプルリクエストのプレビューにのみ機能することに注意してください。

これを行うには、3点ドットメニューボタンを再度クリックし、「WordPress PRをプレビュー」または「Gutenberg PRをプレビュー」を選択します。

次に、プルリクエストのURLまたはIDを適切なフィールドに入力します。

その後、「実行」をクリックします。

ウェブサイトにWordPress Playgroundを埋め込む方法

WordPress のチュートリアルを書いている場合、ユーザーを指示に沿って案内するために、WordPress ダッシュボードから スクリーンショット を含めることになるでしょう。しかし、時にはスクリーンショットが説明しているアクションを正確に示していないことがあります。

ここでWordPress Playgroundが役立ちます。ページや投稿に埋め込むことで、ユーザーによりインタラクティブな読書体験を提供できます。Playgroundを使用して、あなたの指示に従うことができます。

まず、ページまたは投稿のGutenbergブロックエディターを開く必要があります。そこに移動したら、「+」追加ブロックボタンをクリックし、「カスタムHTML」ブロックを選択します。

次に、以下のコードをコピーして、HTMLブロックに貼り付けてください。

<iframe src="https://playground.wordpress.net/"></iframe>

必要に応じて、以前に示したように、このURLにクエリパラメータを追加することもできます。

その後、「保存」または「公開」をクリックして変更をライブにします。

WordPress Playground は、テーマによって異なって見える場合があります。

私たちのケースでは、上のブロックと整列していないように見え、要素自体が小さすぎて操作できませんでした。

これを回避するには、代わりにこのコードを使用できます。

<div class="iframe-container"><iframe src="https://playground.wordpress.net/" style="width: 100%; height: 500px"></iframe></div>

ここでは、iFrameタグがdivタグで囲まれており、Playgroundの埋め込みがコンテナのパディングとマージンに従うようになっています。

また、iFrameの幅をコンテナの100%に、高さを500ピクセルに設定するためにstyle属性を追加しました。

フロントエンドではこのようになります：

WordPress Playgroundでエラーを報告する方法

WordPress Playgroundで問題が発生した場合は、WordPressチームに報告してエラーを修正してもらうことができます。

そのためには、左上隅にある小さな四角いアイコンをクリックしてください。

その後、ページの右上隅にある3つのドットのメニューをクリックできます。

次に、「エラーを報告」オプションをクリックします。

エラーの発生方法を説明するポップアップが表示されるはずです。また、チームが何が起こったのかを正確に把握できるように、WordPress Playground 環境の URL を挿入する必要があります。

完了したら、「エラーを報告する」をクリックするだけです。

さらに、WordPress Playground では環境のエラーログを表示できます。

これは、「一時的なプレイグラウンド」タブの「ログ」セクション、または保存済みのプレイグラウンドのいずれかに移動することで実行できます。

WordPress Playground に関するよくある質問

WordPress Playground に関するよくある質問をいくつかご紹介します。

ブラウザで WordPress を使用できますか？

はい、WordPress Playground を使えば、ブラウザで直接 WordPress を利用できます。ライブサイトにインストールする前に、ウェブサイトを構築したり、テーマやプラグインを試したりすることができます。

WordPress Playgroundにカスタムテーマやプラグインをインストールできますか？

はい、WordPress Playground でテーマやプラグインをインストールして変更して、管理画面で動作するか、特定のWordPressバージョンと互換性があるかを確認できます。

WordPress Playground で作成したサイトをホスティングアカウントにアップロードできますか？

はい、WordPress Playgroundからサイトをエクスポートし、WordPressホスティングアカウントにインポートできます。WordPress Playgroundファイルをローカルディレクトリに保存し、ホスティングアカウントの空のウェブサイトにアップロードするだけです。

WordPressプラグインとテーマをローカルで実行するにはどうすればよいですか？

ローカル開発環境で WordPress プラグインやテーマを実行したい場合は、まずローカル WordPress サイトを作成する必要があります。ステップバイステップの手順については、ローカル WordPress サイトの構築方法 に関するチュートリアルをお読みください。

この記事が、WordPress Playgroundとは何か、そしてブラウザでどのように使用するかを学ぶのに役立ったことを願っています。また、最高のドラッグ＆ドロップWordPressページビルダーに関する記事や、WordPressで動的コンテンツを追加する方法に関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。