メインコンテンツへスキップ

開発者向けクイックスタートガイド

WordPress Playground はプログラミング可能なツールとして開発されました。以下に、このツールで何ができるかの例をいくつかご紹介します。ここで取り上げた各 API については、API セクション で詳しく説明しています。

ウェブサイトに WordPress を埋め込む​

Playground は、次のように HTML <iframe> タグを使用して Web サイトに埋め込むことができます。

<iframe src="https://playground.wordpress.net/"></iframe>

訪問者全員にプライベート WordPress インスタンスが無料で提供されます。その後、Playground APIのいずれかを使用してカスタマイズできます。

Careful with the demo site

The site at https://playground.wordpress.net is there to support the community, but there are no guarantees it will continue to work if the traffic grows significantly.

If you need certain availability, you should host your own WordPress Playground.

埋め込まれたウェブサイトを制御する​

WordPress Playground は、iframe ウェブサイトの制御に使用できる 3 つの API を提供しています。このセクションのすべての例は、これらのいずれかを使用して構築されています。

  • Query API enable basic operations using only query parameters
  • Blueprints API give you a great degree of control with a simple JSON file
  • JavaScript API give you full control via a JavaScript client from an npm package

これらの各 API の詳細については、API の概要セクション をご覧ください。

WordPress ディレクトリからプラグインやテーマを紹介する​

WordPress ディレクトリから URL パラメータのみでプラグインとテーマをインストールできます。例えば、この iframe にはcoblocksプラグインとfriendsプラグイン、そしてpendantテーマがプリインストールされています。

This is called Query API and you can learn more about it here.

<iframe src="https://playground.wordpress.net/?plugin=coblocks"></iframe>

あらゆるプラグインやテーマを紹介​

プラグインが WordPress ディレクトリにない場合はどうなるでしょうか?

JSON ブループリント を使えば、Playground で公開することも可能です。例えば、以下のブループリントは、ウェブサイトからプラグインとテーマをダウンロードしてインストールし、スターターコンテンツもインポートします。

{
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "url",
				"url": "https://your-site.com/your-plugin.zip"
			}
		},
		{
			"step": "installTheme",
			"themeData": {
				"resource": "url",
				"url": "https://your-site.com/your-theme.zip"
			}
		},
		{
			"step": "importWxr",
			"pluginData": {
				"resource": "url",
				"url": "https://your-site.com/starter-content.wxr"
			}
		}
	]
}

詳細については、ブループリントの使用を開始するを参照してください。

リポジトリからのプルリクエストをプレビューする​

Gutenberg PR プレビューアーのライブ例をご覧ください。

次の場合には、プレイグラウンド を Pull Request プレビューアーとして使用できます。

  • WordPress プラグインまたはテーマが CI パイプラインを使用している
  • CI パイプラインがプラグインまたはテーマをバンドルしている
  • CI パイプラインによって生成された zip ファイルを公開できる

これらの zip バンドルは通常の WordPress プラグインと何ら変わりません。つまり、JSON Blueprints API を使ってプレイグラウンドにインストールできます。https://your-site.com/pull-request-1234.zip のようなエンドポイントを公開すれば、あとは以下のブループリントが処理してくれます。

{
	"steps": [
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "url",
				"url": "https://your-site.com/pull-request-1234.zip"
			}
		}
	]
}

公式の プレイグラウンド デモでは、この手法を使用して、Gutenberg リポジトリからのプル リクエストをプレビューします。

{
	"landingPage": "/wp-admin/plugins.php?test=42test",
	"steps": [
		{
			"step": "login",
			"username": "admin",
			"password": "password"
		},
		{
			"step": "mkdir",
			"path": "/wordpress/pr"
		},
		{
			"step": "writeFile",
			"path": "/wordpress/pr/pr.zip",
			"data": {
				"resource": "url",
				"url": "/plugin-proxy.php?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=60819",
				"caption": "Downloading Gutenberg PR 47739"
			},
			"progress": {
				"weight": 2,
				"caption": "Applying Gutenberg PR 47739"
			}
		},
		{
			"step": "unzip",
			"zipPath": "/wordpress/pr/pr.zip",
			"extractToPath": "/wordpress/pr"
		},
		{
			"step": "installPlugin",
			"pluginData": {
				"resource": "vfs",
				"path": "/wordpress/pr/gutenberg.zip"
			}
		}
	]
}

互換性テスト環境を構築する​

設定可能な PHP と WordPress を備えたライブ プラグイン デモは、優れた互換性テスト環境になります。

クエリ API を使用すると、URL に php および wp クエリ パラメータを追加するだけです。

<iframe src="https://playground.wordpress.net/?php=8.3&wp=6.1"></iframe>

JSON ブループリントでは、preferredVersions プロパティを使用します。

{
	"preferredVersions": {
		"php": "8.3",
		"wp": "6.1"
	}
}

ブラウザで PHP コードを実行する​

JavaScript API には、ブラウザで PHP コードを実行するために使用できる run() メソッドが用意されています。

<iframe id="wp"></iframe>
<script type="module">
	const client = await startPlaygroundWeb({
		iframe: document.getElementById('wp'),
		remoteUrl: 'https://playground.wordpress.net/remote.html',
	});
	await client.isReady;
	await client.run({
		code: `<?php
		require("/wordpress/wp-load.php");

		update_option("blogname", "Playground is really cool!");
		echo "Site title updated!";
		`,
	});
	client.goTo('/');
</script>

これを Monaco や CodeMirror などのコード エディターと組み合わせると、この記事 のようなライブ コード スニペットを取得できます!