WordPress Playground – ブラウザーでWordPressを使う方法

多くの読者から、WordPressを試したり、プラグインをテストしたり、テーマで遊んだりすることが、フルサイトを立ち上げたり、ライブサイトを台無しにしたりすることなくできないかという問い合わせがありました。新規: WordPress Playgroundは、ブラウザー上ですべてを行うことができるツールです。

WordPress Playgroundの使い方はとても簡単ですが、いまだに多くの質問をいただきます。また、多くの人がクールな機能をすべて使いこなせていないことにも気づきました。

そのためにこのガイドを作りました。WordPressを始めたばかりでも、自分のサイトで新しいプラグインやテーマを安全に試したい人でも、素早くテストできる場所が必要な開発者でも、問題ありません。この投稿では、WordPress Playground をプロのように使う方法を紹介します。

WordPress Playgroundとは？

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

実際のサイトに影響を与えることなく、WordPressの開発をすべて行うことができるオンラインのサンドボックスのようなものです。

WordPress Playgroundのサイトにアクセスして開くだけでいい。その後、新規プラグインをインストールしたり、テーマを試したり、新しいページを追加したりと、通常と同じようにWordPressを使うことができる。

WordPress Playgroundのページを更新すると、カスタマイザーはすべて消えてしまいます。しかし、WordPressインスタンスをダウンロードし、WordPress Playgroundに再度アップロードすることもできます。

WordPress Playgroundの仕組みは？

WordPress Playgroundは、通常のWebサーバーやデータベースのセットアップなしでWordPressを使用できるようにするいくつかのクールな技術で実行されます：

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

これらの技術により、開発者はWordPress Playgroundをnode.js、Visual Studio Code、およびwp-nowと呼ばれるCLIツールと統合することも有効化される。

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

WordPress Playgroundの限界とは？

その利点にもかかわらず、WordPress Playgroundにはいくつかの制限がある：

• テーマやプラグインのディレクトリに直接アクセスできない – テーマやプラグインをインストールするには、手動でダウンロードやアップロードを行う必要があります。とはいえ、この問題を解決することを目的としたネットワークアクセス・ベータ機能があります。
• WordPress Playgroundでのカスタマイズは一時的な ものです – ブラウザーに変更を保存しないことに決めた場合、進行状況を失わないように、誤ってページを更新しないように注意する必要があります。
• iFrameの問題はよくあることです – WordPress Playgroundのインスタンスをページに埋め込む場合、iFrameが動作しない、誤ってリフレッシュされるなどの問題が発生する可能性があります。
• これは比較的新しい機能 であり、すべてが正しく機能するわけではないので、環境を探索する中であちこちに不具合が生じることが予想される。

とはいえ、Playgroundは比較的新しいWordPressプロジェクトです。そのため、チームがユーザー体験を向上させるために新機能やバグ修正をリリースすることを期待できます。

WordPress Playgroundがどんなものかわかったところで、使い方を説明しましょう。以下のクイックリンクからチュートリアルをナビゲートできます：

WordPress Playgroundの使い方

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

サイトにアクセスしたら、Playgroundがセットアップされるまでしばらくお待ちください。その後、初期設定のWordPressテーマを使用したサイトのフロントエンドが表示されます。

テスト用にWordPress Playgroundを使用している場合は、実際のサイトのWordPressソフトウェアを反映するように環境を設定するとよいでしょう。

これを行うには、’PHP X WP X – Storage：をクリックします。

最初に設定しなければならないのは、ストレージのタイプである。3つのオプションがあります。

なし」は、ページ更新時にすべての変更が失われることを意味します。一方、「ブラウザー」は変更がブラウザーに保存されますが、ブラウザーのタブを閉じたりキャッシュを消去したりすると消えてしまうことを意味します。

端末’を選択してコンピューターに変更を保存することもできます。このオプションは、ローカルホストのWordPressサイトを作成するのと同様に、WordPress Playgroundファイルを保存するコンピューター内のフォルダーを選択することができます。

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

あなたのサイトで使用しているPHPのバージョンと同じにすることをお勧めします。とはいえ、7.0より古いPHPバージョンはここにはないかもしれません。

その下にある「Load extensions: libxml, openssl, mbstring, iconv, gd」と「Network access (e.g. for browsing plugins)」の設定をオプションで有効化することができる。

最初の設定は、WordPressプレイグラウンドを拡張するために、特定のPHP拡張機能（libxml、openssl、mbstring、iconv、gd）をロードします。しかし、これらは必要ありません。

2つ目の設定は「サイトネットワークへのアクセス」と呼ばれるものだ。これはベータ版機能で、WordPress Playgroundを公式プラグインディレクトリに接続し、WordPressテーマやプラグインを環境から直接インストールできるようにする。

最後に、WordPressのバージョンを選択します。現在WordPressブログやサイトで使用しているバージョンを選択してください。

WordPressは「WordPress Nightly」バージョンも提供しています。これは、WordPress開発チームによる最新の変更を含むWordPressの開発バージョンです。

プラグインやテーマの開発者で、次のWordPress更新との互換性をテストしたい場合に使用できます。

これらの設定が終わったら、先に進んで「変更を適用」をクリックする。

以上で設定はすべて完了です。これで、サンドボックスのテストを開始するために管理エリアに向かうことができます。

管理エリアを開くには、サイトタイトルメニューにマウスオーバーし、’ダッシュボード’をクリックします。または、’サイトを編集’をクリックしてフルサイト編集に行くこともできます。

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

WordPress PlaygroundでWordPressプラグインやテーマをインストールするには、2つの方法があります。一つはWordPress.orgのプラグインやテーマのページに行き、「ダウンロード」ボタンをクリックする方法です。

これでプラグインやテーマのzipファイルがコンピューターに保存されます。

その後、プラグインとテーマのWordPress手動インストールを続けることができます。詳しい手順はガイドをご覧ください：

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

この方法は、プレミアムWordPressプラグインやプレミアムWordPressテーマをテストする場合にも有効です。

プラグインについては、WordPressプレイグラウンドのダッシュボードに移動し、プラグイン ” 新規プラグインの追加に移動するだけです。

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

テーマに関しては、最初にプレイグラウンドを使用するときにWordPressはあなたのためにデフォルトテーマをインストールしています。

しかし、新規の無料WordPressテーマを使いたい場合は、WordPressテーマディレクトリから手動でダウンロードすることができる。そして、プレイグラウンドで、外観 ” テーマに行き、「新規テーマを追加」をクリックする。

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

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

このプロセスが少し面倒に感じられても、ご心配なく。WordPressは、Playgroundがプラグインやテーマのディレクトリに接続できるようにするベータ機能を開発中です。先ほどのセットアップで「ネットワークアクセス」を選択すれば有効化されるはずです。

この方法で、プレイグラウンドは一般的なWordPressダッシュボードと同じように動作し、無料のテーマやプラグインをコンピューターに保存することなくインストールすることができます。

WordPressダッシュボードにテーマやプラグインをインストールするもう一つの方法は、WordPress PlaygroundのクエリーAPIを使うことである。WordPress PlaygroundのURLにクエリーパラメータを追加する必要があります。

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

新しいブラウザータブで、WordPress PlaygroundのURLにAIOSEOのスラッグを入力する：

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

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

テーマをインストールしたい場合は、プラグインパラメータを テーマに置き換えてください：

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

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

AIOSEOとMonsterInsightsプラグイン、そしてAstraテーマをインストールした場合のURLは以下のようになります：

https://playground.wordpress.net/?theme=astra&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で遊び、Gutenbergエディターを使って新規投稿を追加し、サイト全体を作成したとしよう。タブを閉じて進捗をすべて失うのはもったいない。

幸いなことに、WordPress Playgroundからサイトをエクスポートしてコンピューターに保存することができます。Playgroundを再び開くときはいつでも、エクスポートしたzipファイルをアップロードして、前回の続きから続けることができます。

これを行うには、プレイグラウンドのトップメニューに移動し、右上の三本線のメニューをクリックします。そして、「.zipとしてダウンロード」をクリックする。

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

WordPress Playgroundにファイルをアップロードするには、Playgroundサイトを開き、三本線のメニューをもう一度クリックします。その後、「.zipから復元」をクリックする。

先ほどエクスポートしたファイルを選択するようポップアップが表示されます。

ファイルを選択したら、『インポート』をクリックするだけです。

ファイルが正しい場合、インポートが成功したことを通知するポップアップが表示され、プレイグラウンドは新しいインスタンスでリフレッシュされます。

OK」をクリックしてポップアップを閉じる。

WordPressのプレイグラウンドをGitHubにインポート/エクスポートする

GitHubアカウントを持っていれば、WordPress Playground からサイトをエクスポートしたりインポートしたりすることもできます。GitHub はサイトの変更をトラッキングしたり、ファイルをバックアップしたり、他のユーザーとコラボレーションしたりできる素晴らしいプラットフォームです。

WordPress PlaygroundからGitHubにサイトをエクスポートするには、三本線のメニューをクリックし、「Export Pull Request to GitHub」を選択します。

次のポップアップでは、WordPressがあなたのサイトをバックアップとしてコンピューターに保存することを勧めていることがわかります。保存したら、’I exported my Playground as zip’にチェックを入れてください。

そして、’Connect to your GitHub account’ ボタンをクリックします。

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

adamzielを投稿する」をクリックしてください。

この段階で、エクスポートするファイルの種類を選択してください：プラグイン、テーマ、またはwp-contentディレクトリです。プラグイン、テーマ、メディアファイル、ウィジェット、メニュー、フォントをエクスポートしたい場合は、最後のオプションを選択してください。

サイトをエクスポートする GitHub リポジトリの URL も指定する必要があります。そして、’Next step’ ボタンをクリックします。

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

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

また、WordPress Playgroundを使用してどのような変更が行われたかを指定するためにコミットメッセージを挿入する必要があります。

すべて終わったら、『プル・リクエストを作成』をクリックする。

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

リンクをクリックすれば、その様子を見ることができる。

GitHub から WordPress Playground にサイトをインポートしたい場合は、三本線のメニューをもう一度クリックします。

そして、「GitHubからインポート」を選択する。

まったく新しい WordPress Playground 環境を立ち上げる場合は、GitHub Playground の認証プロセスをすべてやり直す必要があるかもしれません。

その後、インポートしたい GitHub リポジトリの URL をクリックするだけです。よくわからない場合は、WordPress がいくつかの例を提供しています。

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

インポート元のリポジトリのパスを挿入することもできます。完了したら、「インポート」をクリックするだけです。

インポートが成功すると、成功メッセージがポップアップ表示され、WordPress Playgroundが新規インスタンスで更新されることが確認できます。

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

これを行うには、もう一度三本線のメニューボタンをクリックし、「Preview WordPress Pull Request」を選択します。

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

その後、『Go』をクリックする。

WordPress ブループリントの使い方

WordPressでは、ブループリントは、カスタムのWordPress環境を迅速かつ簡単に設定するのに役立つシンプルなJSONファイルです。これには、どのバージョンのWordPressとPHPを使用するか、どのプラグインとテーマをインストールするか、開始ページをどうするかなどの設定が含まれます。

WordPress Playgroundのページ上部にある三本線のメニューをクリックすると、「Edit the Blueprint」を選択して環境のコードバージョンを変更することができます。

ブループリントのページはこんな感じです。

ここから、コードを修正したり、後で共有するためにコンピューターに保存したり、他のユーザーのブループリントを実行したりすることができます。ブループリントが正しく動作するように、WordPressでのコーディングの基本を知っていることを本当に〜してもよいですか？

WordPres Blueprints Galleryで他の人の例をチェックすることができます。

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チームに報告してエラーを修正してもらうことができます。そのためには、ページ上部の三本線のメニューをクリックし、「エラーを報告」オプションをクリックしてください。

ポップアップが表示されるので、エラーがどのように発生したかを説明してください。また、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はSQLiteデータベースを使用しているため、Webサーバー上でサイトを実行するには、データベースをMySQLに変換する必要があります。

WordPressのプラグインやテーマをローカルで実行するには？

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

この投稿が、WordPress Playgroundとは何か、ブラウザーでどのように使用するのかを知る一助となれば幸いです。また、ドラッグ＆ドロップで使えるWordPressページビルダーの投稿や、WordPressで動的コンテンツを追加する方法についてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.