WordPress Playground ～お手軽だけど多機能で奥深いWordPress実行環境～

WordPressのローカル開発環境、たくさんありますね。

弊社ではDocker環境で、WordPress・MySQL・phpMyAdmin・WP-CLI・Mailpitを組み合わせて使っています。

サイト制作する場合はこの組み合わせで丁度良いのですが、新しいテーマやプラグインを使ってみたい、コアバージョン・PHPバージョンを変えて確認をしたい、というような「いろいろ変えてちょっと試したい」という時に立ち上げるには少々重かったりもします。

そこで、手早く簡単に環境を使い捨てできる「WordPress Playground」を使ってみたいと思います。お手軽でも奥深い世界が広がっております。

WordPress Playgroundの仕組み

とても簡単に説明すると、サーバなし（ホスティングはされてます）でブラウザだけでWordPressを動かしています。

PHP-WASM + SQLite + 仮想FSで動作しています。（仕組みを詳しく知りたい方は公式ドキュメント Architecture | WordPress Playground を参照ください）

WordPress Playgroundを起動する

まず、WordPress Playground公式サイト にアクセスして、「Explore Playground」リンクを押して起動します。

WordPress Playground に直接アクセスしても立ち上がります。

「Preparing WordPress」画面が表示されます。数10秒ほど待つと起動が終わり、「Hello from WordPress Playground!」という画面が表示されます。なおこの画面は初回のみ表示されます。

既にAdminアカウントが作られて、ログインしている状態なので、ダッシュボード画面に移動してみましょう。

普通のWordPressと同じなので、1件投稿してフロントページを表示してみます。

一番最初に表示された画面は消えて、デフォルトのテーマ（現在はTwenty Twenty-Five）のトップページが表示されます。

基本的には通常のサーバ上で動くWordPressと同じなので、記事を投稿したり、設定を変えて見たり、テーマやプラグインをインストールしたりできます。

ただし、Webサーバ＋MySQLサーバ＋メールサーバの環境前提で動作するようなものは正常に機能しない場合があります。（.htaccessを使うもの、画像加工系、cron使うもの、メール送信などは正常に動作しません）

一通りWordPressの管理画面を触ったら、Playgroundのその他の機能を使ってみましょう。

Playground toolbarを使う

Playgroundの各種機能は、画面の一番下にあるドック（Playground toolber）にから呼び出せます。

ちなみに少し前のバージョンではドックではなく、画面最上部のバーに置かれていました。今後もデザイン・機能共に変更になる可能性があります。

リロードボタンとアドレスバー

リロードボタンは説明は必要ないかと思いますが、このPlaygroundでのリロードです。

アドレスバーはこのPlaygraundで表示されているページの仮想的なパスになります。ブラウザのアドレスバーと機能としてはだいたい同じです。フォーカスすると良く使うページがメニューとして表示されます。

ステータス

ステータスが表示されます

• Loading：起動中

• Autosaved：自動保存（デフォルト）

• Saved：恒久的に保存（Playgroundsパネルで設定できます）

ステータスをクリックすると、パネルが開きます。

名前の変更と、保存先をローカルファイルかブラウザ内部か選べます。デフォルトのブラウザ内にしておいた方が安全です。

左端のボタンはツールバーの縮小と拡大です。

New

• Blueprint Gallery：ギャラリーを選んで起動します（サムネイルクリックすると即反映されます）

• From a URL：サーバに置いてあるBlueprintファイルから起動します

• Write a Blueprint：Blueprintを直接書いてその内容から起動します

• Preview PR：Githubのプルリクエストから起動します

• From Github：Github連携をして公開リポジトリから起動します

• import zip：エクスポートしたzipファイルから起動します

Playgrounds

今まで起動したPlayground一覧が表示されます。

RECENT AUTOSAVES・SAVEDの一覧のPlaygroundカード選択すると、そのPlaygraundを起動できます。（即起動します）

カードの右端の三点メニュー

• Keep autosave permanently：恒久的に保存します

• Rename：Playgroundの名前を変更できます

• Delete：削除します（起動中のもの以外）

Blueprint

Playgroundを起動時の状態を設定できるのが、blueprint.jsonファイルです。

パネル内のエディタに書かれているのは、現在起動しているPlaygroundのBlueprintです。プロパティと値からどんな設定・ステップで起動しているかが何となく読み取れるかと思います。

エディタ上で編集、ファイルの追加、エクスポートもできます。

書いたものをそのまま実行もできます。

Blueprintについてはここで書くには収まらないので詳しくはリファレンス Introduction | WordPress Playground を参照ください。

Site Settings

現在起動しているPlaygroundの設定を変更できます。

下記は変更してもそのまま再構築はされずに反映されます。

• Playground名の変更

• PHP Version

• Allow network access（チェックをはずすとネットワーク経由でプラグイン等がインストールできなくなります）

下記は変更すると新規のPlaygroundが起動します。

• WordPress Version

• Language

• Create a multisite network

Database

SQLiteのファイルをダウンロードできます。Adminer・phpMyAdminを起動してデータベースの中身を確認できます。

Files

Playgroundに含まれるファイルを閲覧できます。ファイルの編集・追加・削除、ダウンロード・アップロードもできます。

Logs

警告・エラーがある場合ここに表示されます。

Export

現在表示しているPlaygroundのエクスポートができます。

エクスポート方法は下記の3種類です。

• zipファイルでダウンロード（記事

• セットアップ用のURL（Blueprintだけ含みます）

• Github連携してエクスポート（試していないので詳細不明）

起動しているPlaygroundの保存

Playgroundは起動後は自動保存されます。

しかし、設定を変えて起動し直したりすると今まで使っていたものはアーカイブされます（PlaygroundsのRECENT AUTOSAVESに入る）。最新の4件までアーカイブされ、それ以降は自動的に削除されます。なお、アーカイブされたPlaygroundは選択すれば保存された状態で起動されます。

削除されないように特定のPlaygroundを保存するには下記の方法があります。

恒久的にブラウザに保存

ツールバーの「Playground」から保存できます。

なお、ブラウザに保存されるデータはOrigin Private File System(OPFS) という仕組みで保存されています。

ブラウザを閉じても保存さていますが、ローカルストレージなどと同様、確実に保存され続けているという保証はありませんので、確実に残したい場合は次のエクスポートで保存してください。

エクスポートする

投稿内容やテーマなども含めて保存したい場合は、ツールバーの右端の「Export」からzipファイルでダウンロードします。

zipファイルの中身は下記が含まれています。

• playground-export.json：ダウンロードしたPlaygroundのURLが入っています

• wp-config.php：1行目の定数定義以外、WordPressコアに含まれているwp-config-sample.phpとほぼ同じです

• wp-contentフォルダ：データベース（SQLite）、テーマ、プラグイン、アップロードされたファイルなどが含まれます

PHPのバージョン等の起動時の設定は含まれていないのでツールバーの「Blueprint」でBlueprintもダウンロードしておきます。

zipファイルから復元する

PHPのバージョン等、Blueprintで環境を合わせるかSettingsで復元する環境を揃えてから、「New」パネルからzipファイルのインポートをします。

設定を変えてPlaygroundを起動する

ツールバーの各パネルから起動

ツールバーの説明で記載しましたが、下記パネルから設定変えて起動できます。

• Newパネル

• Blueprintパネル

• Site Settingsパネル

URLにパラメータを追加して起動

特定のパラメータが付いた状態でPlaygroundのURLにアクセスすると、指定した状態でPlaygroundを起動できます。

例えば、下記はPHPのバージョン8.2＆WordPressのバージョン6.2で起動します。

https://playground.wordpress.net/?php=8.2&wp=6.2

テーマやプラグインを指定して起動することもできます。管理画面で手動で設定できることはほぼできます。

詳しくはAPIのリファレンス Query API | WordPress Playground を確認下さい。

まとめ

WordPress Playgroundをざっと使ってみましたが、かなりいろいろな機能を備えています。

ここで解説したのはほんのさわりなので、どんなものなのかは実際に使って変更して起動しなおして、というのを繰り返してみるのが手っ取り早いかと思います。

サンドボックスなので壊したとしても何ともないというのが安心ですね。