まだお気付きでない人もいらっしゃるかもしれませんが、WordPress Playground は、誰でも安全にブラウザ内で WordPress の一時インストールを実行できるすばらしい機能です。WASM を使用して、WordPress の完全なインストール – PHP、データベース、すべて – を、Web ブラウザから実行します。サーバー不要、インストールも不要です。
しばらくの間、Playground は、プラグイン・ディレクトリからのプラグインやテーマの読み込みをサポートしてきました。これがその方法です。
プラグイン・プレビュー・ボタン
プラグイン・プレビュー機能は、プラグインの開発者によって有効化された場合、プラグイン・ディレクトリ内のプラグインに便利なボタンを追加します。このボタンは、そのプラグインがインストールされた Playground にユーザーを導きます。ダウンロードボタンのすぐ横にあります。
プレビューボタンはデフォルトでは表示されません。明示的に有効にする必要があります。開発者は、プレビュー環境を設定し、依存関係 (他のプラグインやテーマなど) をインストールするために、Blueprint ファイルを使用できます。
プラグイン・プレビューの有効化
プラグイン・プレビューボタンをすべてのユーザーに表示するには、2つのことが必要です:
- プラグインの assets フォルダーの blueprints サブディレクトリに、有効なファイル
blueprint.jsonが存在すること。 - プラグイン・プレビューは、コミッターによってプラグインの Advanced ビューから「public」に設定されていなければなりません。
有効なファイル blueprint.json が存在する場合、プラグインのコミッターのみにプレビューボタンが表示されます。その場合、このように表示されます:
「テストプレビュー」と呼ばれているのは、プラグインのコミッターが自分のプラグインを Playground 環境でテストし、簡単に一般公開するかどうかを決めるためです。
Blueprint
Blueprint は、WordPress Playground インスタンスをセットアップするために使用される json ファイルです。
PHP と WordPress のバージョン、ランディングページ、(最も重要な) ログイン、プラグインやテーマのインストールおよび有効化のような、一連の自動化されたステップを指定するのに使うことができます。
プラグイン用の blueprint は assets/blueprints/blueprint.json として Subversion で assets フォルダーにコミットする必要があります。当初は1つの blueprint ファイルしかサポートされていませんが、将来的には複数の blueprint ファイルをサポートする予定です。
以下は、出発点として使用できる単純な blueprint.json ファイルの例です:
{
"landingPage": "\/wp-admin\/edit.php",
"preferredVersions": {
"php": "7.4",
"wp": "5.9"
},
"phpExtensionBundles": [
"kitchen-sink"
],
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
}
]
}
ここで使われている機能は、以下の通りです:
landingPage は、プレビューがロードされたときにユーザーがランディングするページの URL を指定します。
preferredVersions は、PHP と WordPress のバージョンを指定します。
phpExtensionBundles は、この場合、最も一般的な PHP 拡張機能 (kitchen-sink) を利用できるようにすることを指定します。
steps は、ランディングページを表示する前に何をするかを Playground に指示します。この場合、ユーザーを wp-admin にログインさせます。
より高度な blueprint.json の例は、ユーザーのためのリッチなデモ環境を作成するために使用できる、いくつかの機能を示しています:
{
"landingPage": "/wp-admin/post.php?post=5&action=edit",
"preferredVersions": {
"php": "7.4",
"wp": "5.9"
},
"phpExtensionBundles": [
"kitchen-sink"
],
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org\/plugins",
"slug": "my-imaginary-plugin-dependency"
},
"options": {
"activate": true
}
},
{
"step": "installPlugin",
"pluginZipFile": {
"resource": "wordpress.org\/plugins",
"slug": "my-imaginary-plugin"
},
"options": {
"activate": true
}
},
{
"step": "installTheme",
"themeZipFile": {
"resource": "wordpress.org\/themes",
"slug": "my-imaginary-theme"
}
},
{
"step": "setSiteOptions",
"options": {
"some_required_option_1": "your_favorite_values",
"some_required_option_2": "your_favorite_values"
}
},
{
"step": "runPHP",
"code": "<?php require_once 'wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'wp-load.php required for WP functionality', 'post_status' => 'publish')); ?>"
}
]
}
生成された Blueprint ファイルの使用
プラグインのページに、このようなお知らせが表示されるかもしれません:
Your plugin does not yet have a blueprint file for user previews. If you'd like to enable previews, please follow these steps to create a blueprint.
1. Test your plugin in Playground.
2. Fix any bugs in your plugin that prevent it from working in Playground.
3. Download blueprint.json
4. Commit your blueprint to svn.
Test リンクは、自動生成された Blueprint ファイルを使用して、いくつかのデフォルト設定値とステップで、プラグインを Playground にロードします。Download blueprint.json リンクをクリックすると、自動生成された blueprint.json ファイルをダウンロードできます。プラグインを Playground でプレビューする準備ができたら、必要に応じて修正し、Subversion にコミットしてください。
Blueprint を Subversion にコミット
下記のような名前で、blueprint.json ファイルをプラグインの assets フォルダーにコミットする必要があります:
/assets/blueprints/blueprint.json