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

テスト目的でブラウザーでWordPressを使いたいですか？

WordPress Playgroundは、ホスティングプランを購入しなくても、オープンソースのWordPress.orgをブラウザーで試すことができるプラットフォームです。また、プラグインやテーマをテストするために使用することもできます。

この投稿では、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 8.0 WP 6.4 – 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をサイトに埋め込む方法

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では、ブラウザー上で直接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.