ブラウザだけで動作する WordPress 「Playground」が、昨年辺りから利用できるようになりました。それを利用して、公式プラグインディレクトリや公式テーマディレクトリで「Live Preview」が可能になっています。今回は、公式プラグインディレクトリで「Live Preview」を可能にするためにプラグイン作者向けに書きました。

プラグインディレクトリにログイン

ログインして、「Advanced View」に移動し、最下部に移動すると、「Toggle Live Preview」という欄があります。blueprint.json というファイルがコミットされていないと、「Live Preview」 を有効化するボタンが表示されていません。

設定ファイルの編集とコミット

例として、自分のプラグインの Fixed Bottom Menu の「blueprint.json」を以下に記します。

{
    "landingPage": "\/wp-admin\/admin.php?page=fixedbottommenu",
    "preferredVersions": {
        "php": "8.0",
        "wp": "6.6"
    },
	"login": true,
	"plugins": ["fixed-bottom-menu"]
}

プラグインをインストール、有効化し、プラグインの設定画面を表示する設定になっています。詳しくは、以下をご覧ください。

developer.wordpress.org

Previews and Blueprints – Plugin Handbook | Developer.WordPress.org

If you haven’t noticed it yet, the WordPress Playground is an amazing feature that lets an…

また、「blueprint.json」の設定例が以下から参照できます。

github.com

blueprints/blueprints at trunk · WordPress/blueprints · GitHub

Blueprints gallery and examples. Contribute to WordPress/blueprints development by creatin…

その他に一番使う設定として、管理画面を日本語で読み込む例を以下に示します。

{
    "landingPage": "\/wp-admin\/",
　　"login": true,
    "steps": [
		{
			"step": "setSiteLanguage",
			"language": "ja"
		}
    ]
}

「blueprint.json」の編集を終えたら、プラグインディレクトリにコミットします。コミット場所は、/assets/blueprints/blueprint.json です。

プラグインディレクトリでの操作

コミット後に、ログインして、「Download」の横に「Test Preview」ボタンが出現します。ボタンを押すとテストできます。

テストして問題が無ければ、「Advanced View」に移動し、最下部に移動し、「Toggle Live Preview」のボタンを押すと、「Live Preview」が有効化されます。

実際の動作

おわりに

「Live Preview」は、プラグインの更新とは独立してオン・オフできるので、用途や更新内容に合わせて適宜オン・オフできるのが便利ですね。