プラグインディレクトリでの Live Preview の有効化

はじめに

ブラウザだけで動作する 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.5"
    },
    "phpExtensionBundles": [
        "kitchen-sink"
    ],
    "steps": [
        {
            "step": "login",
            "username": "admin",
            "password": "password"
        },
        {
            "step": "installPlugin",
            "pluginZipFile": {
                "resource": "wordpress.org\/plugins",
                "slug": "fixed-bottom-menu"
            },
            "options": {
                "activate": true
            }
        }
    ]
}

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

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

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

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

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

実際の動作

おわりに

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