プラグイン開発者のための Playground

WordPress Playground は、プラグイン開発者がブラウザ環境で直接プラグインを構築、テスト、紹介できる革新的なツールです。

このガイドでは、WordPress Playground を使用してプラグイン開発ワークフローを改善し、プラグインを紹介するライブデモを作成し、プラグインのテストとレビューを簡素化する方法を説明します。

情報

WordPress Playground を使用して製品を構築、テスト、起動する方法については、Playground についてセクションをご覧ください。

プラグインを使って Playground インスタンスを起動する

WordPress テーマディレクトリ内のプラグイン

WordPress Playground を使えば、WordPress プラグインディレクトリにあるほぼすべてのプラグインをインストール・有効化した WordPress 環境を素早く起動できます。Playground URL に plugin クエリパラメータを追加し、 WordPress ディレクトリにあるプラグインのスラッグを値として指定するだけです。例：https://playground.wordpress.net/?plugin=create-block-theme

ヒント

Playground インスタンスにインストールして有効化したいプラグインごとに、クエリパラメータを使って複数のプラグインをインストールして有効化できます。「plugin」パラメータを繰り返し指定することで実現できます。例：https://playground.wordpress.net/?plugin=gutenberg&plugin=akismet&plugin=wordpress-seo。

また、Playground インスタンスに渡される Blueprint の installPlugin ステップを設定することで、WordPress プラグインディレクトリから任意のプラグインをロードすることもできます。

{
    "landingPage": "/wp-admin/plugins.php",
    "login": true,
    "steps": [
        {
            "step": "installPlugin",
            "pluginData": {
                "resource": "wordpress.org/plugins",
                "slug": "gutenberg"
            }
        }
    ]
}

Run Blueprint

ブループリントは、いくつかの方法で Playground インスタンスに渡すことができます。

GitHub リポジトリのプラグイン

GitHub リポジトリに保存されているプラグインは、ブループリントを介して Playground インスタンスに読み込むこともできます。

installPlugin ブループリントステップの pluginData プロパティを使用して、Playground インスタンスにロードするプラグインを含む .zip ファイルの場所を指す url リソースを定義できます。

CORS の問題を回避するために、Playground プロジェクトは GitHub プロキシを提供します。これにより、プラグインを含むリポジトリ (またはリポジトリ内のフォルダー) から .zip を生成できます。

情報

GitHub プロキシは、GitHub リポジトリからプラグインをロードするのに非常に便利なツールです。特定のブランチ、特定のディレクトリ、特定のコミット、または特定の PR からプラグインをロードできます。

たとえば、次の blueprint.json は、https://github-proxy.com ツールを活用して GitHub リポジトリからプラグインをインストールします。

{
    "landingPage": "/wp-admin/admin.php?page=add-media-from-third-party-service",
    "login": true,
    "steps": [
        {
            "step": "installPlugin",
            "pluginData": {
                "resource": "url",
                "url": "https://github-proxy.com/proxy/?repo=wptrainingteam/devblog-dataviews-plugin"
            }
        }
    ]
}

Run Blueprint

GitHub のファイルまたは gist 内のコードからのプラグイン

writeFile と activatePlugin ステップを組み合わせることで、gist または GitHub 内のファイルに保存されたコードからオンザフライで構築されたプラグインを使用して WP Playground インスタンスを起動することもできます。

{
    "landingPage": "/wp-admin/plugins.php",
    "login": true,
    "steps": [
        {
            "step": "login"
        },
        {
            "step": "writeFile",
            "path": "/wordpress/wp-content/plugins/cpt-books.php",
            "data": {
                "resource": "url",
                "url": "https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/custom-post/books.php"
            }
        },
        {
            "step": "activatePlugin",
            "pluginPath": "cpt-books.php"
        }
    ]
}

Run Blueprint

情報

ブループリントギャラリーの gist からプラグインをインストールの例では、gist のコードからプラグインをロードする方法を示しています。

ブループリントを使用してプラグインのデモを設定する

いくつかのプラグインを有効にした WordPress Playground インスタンスへのリンクを提供する場合、それらのプラグインを使って Playground インスタンスの初期設定をカスタマイズしたい場合もあるでしょう。Playground のBlueprintsを使えば、プラグインを読み込み／有効化し、 Playground インスタンスを設定できます。

ヒント

Playground プロジェクトでは、ブループリントを操作するために、以下の便利なツールとリソースを提供しています。

ブループリントギャラリーでは、WordPress Playground を使用して様々な設定で WordPress サイトを立ち上げる実際のコード例をご覧いただけます。
WordPress Playground ステップライブラリツールは、ステップをドラッグまたはクリックして WordPress Playground のブループリントを作成するためのビジュアルインターフェースを提供します。独自のステップを作成することもできます。
ブループリントビルダーツールを使用すると、ブループリントをオンラインで編集し、Playground インスタンスで直接実行できます。

ブループリントのプロパティと steps を通じて、Playground インスタンスの初期セットアップを構成し、プラグインの魅力的な機能を紹介するために必要なコンテンツと構成をプラグインに提供することができます。

情報

WordPress Playground を使った優れたデモでは、画像やその他のアセットを含む、プラグインとテーマのデフォルトコンテンツを読み込む必要がある場合があります。詳しくは、デモ用のコンテンツの提供ガイドをご覧ください。

`plugins`

プラグインが他のプラグインに依存している場合は、plugins ショートカットを使用して、他の必要なプラグインと一緒にプラグインをインストールできます。

{
    "landingPage": "/wp-admin/plugins.php",
    "plugins": ["gutenberg", "sql-buddy", "create-block-theme"],
    "login": true
}

Run Blueprint

`landingPage`

プラグインに設定ビューまたはオンボーディングウィザードがある場合は、landingPage ショートカットを使用して、読み込み時に Playground インスタンス内の任意のページに自動的にリダイレクトできます。

{
    "landingPage": "/wp-admin/admin.php?page=my-custom-gutenberg-app",
    "login": true,
    "plugins": ["https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/data-basics-59c8f8.zip"]
}

Run Blueprint

`writeFile`

writeFile ステップを使用すると、GitHub または Gist に保存されている *.php ファイルのコードを参照して、任意のプラグインファイルを即座に作成できます。

以下は、ロード時にコードが自動的に実行されるように mu-plugins フォルダに配置された カスタム投稿タイプを生成するプラグイン の例です。

{
    "landingPage": "/wp-admin/",
    "login": true,
    "steps": [
        {
            "step": "writeFile",
            "path": "/wordpress/wp-content/mu-plugins/books.php",
            "data": {
                "resource": "url",
                "url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/custom-post/books.php"
            }
        }
    ]
}