プラグイン開発者のためのプレイグラウンド

プラグイン開発者のためのプレイグラウンド

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

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

SVG画像情報

WordPress Playgroundを使用して製品を構築、テスト、および起動する方法をAbout Playgroundセクションで発見してください。

プラグインを使用してプレイグラウンドインスタンスを起動する

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

WordPress Playgroundを使用すると、WordPressプラグインディレクトリにあるほぼすべてのプラグインをインストールしてアクティブ化した状態で、迅速にWordPressインストールを起動できます。必要なのは、Playground URLにplugin クエリパラメータを追加し、WordPressディレクトリからプラグインのスラッグを値として使用することだけです。例えば: https://playground.wordpress.net/?plugin=create-block-theme

SVG Image tip

複数のプラグインをインストールしてアクティブ化するには、インスタンス内でインストールしてアクティブ化したい各プラグインのためにpluginパラメータを繰り返すことで、クエリパラメータを使用できます。例えば: https://playground.wordpress.net/?plugin=gutenberg&plugin=akismet&plugin=wordpress-seo。

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

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

[

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

GitHub リポジトリに保存されたプラグインは、Blueprints を介して Playground インスタンスにロードすることもできます。

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

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

SVG画像情報

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

たとえば、次の 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"
   }
   }
   ]
}

[

GitHubのファイルまたはGistからのプラグイン

writeFileとactivatePluginのステップを組み合わせることで、Gistに保存されたコードから動的に構築されたプラグインを使用して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"
   }
   ]
}

ブループリントを実行

SVG画像情報

https://playground.wordpress.net/builder/builder.html?blueprint-url=https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/install-plugin-from-gist/blueprint.json#%7B%22meta%22:%7B%22title%22:%22Install%20plugin%20from%20a%20gist%22,%22author%22:%22zieladam%22,%22description%22:%22Install%20and%20activate%20a%20WordPress%20plugin%20from%20a%20.php%20file%20stored%20in%20a%20gist.%22,%22categories%22:%5B%22plugins%22%5D%7D,%22landingPage%22:%22/wp-admin/plugins.php%22,%22preferredVersions%22:%7B%22wp%22:%22beta%22,%22php%22:%228.0%22%7D,%22steps%22:%5B%7B%22step%22:%22login%22%7D,%7B%22step%22:%22writeFile%22,%22path%22:%22/wordpress/wp-content/plugins/0-plugin.php%22,%22data%22:%7B%22resource%22:%22url%22,%22url%22:%22https://gist.githubusercontent.com/ndiego/456b74b243d86c97cda89264c68cbdee/raw/ff00cf25e6eebe4f5a4eaecff10286f71e65340b/block-hooks-demo.php%22%7D%7D,%7B%22step%22:%22activatePlugin%22,%22pluginName%22:%22Block%20Hooks%20Demo%22,%22pluginPath%22:%220-plugin.php%22%7D%5D%7DのGistからプラグインをインストールする例は、Gist内のコードからプラグインを読み込む方法を示しています。

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

いくつかのプラグインが有効化されたWordPress Playgroundインスタンスへのリンクを提供する場合、そのPlaygroundインスタンスの初期設定をこれらのプラグインを使用してカスタマイズしたい場合があります。Playgroundの[https://wordpress.github.io/wordpress-playground/blueprints/getting-started]を使用すると、プラグインを読み込んだり有効化したりし、Playgroundインスタンスを構成できます。

SVG Image tip

ブループリントで作業するためにPlaygroundプロジェクトが提供する便利なツールとリソースは次のとおりです：

https://github.com/WordPress/blueprints/blob/trunk/GALLERY.mdを確認して、さまざまなセットアップでWordPressサイトを起動するためのWordPress Playgroundの実際のコード例を探索してください。
https://akirk.github.io/playground-step-library/#ツールは、WordPress Playgroundのブループリントを作成するためにステップをドラッグまたはクリックするための視覚的インターフェースを提供します。独自のステップを作成することもできます！
https://playground.wordpress.net/builder/builder.htmlツールを使用すると、オンラインでブループリントを編集し、Playgroundインスタンスで直接実行できます。

プロパティとstepsを通じて、Playgroundインスタンスの初期設定を構成し、プラグインの魅力的な機能と機能を示すために必要なコンテンツと設定を提供できます。

SVG画像情報

WordPress Playgroundでの素晴らしいデモには、プラグインとテーマのデフォルトコンテンツ（画像やその他のアセットを含む）を読み込む必要があるかもしれません。詳細については、デモ用のコンテンツを提供するガイドを確認してください。