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

ブループリントの使用

ブループリントは次のいずれかの方法で使用できます。

  • URL フラグメントとして Playground に渡す。
  • blueprint-url パラメータを使用して URL から読み込む。
  • Blueprint バンドル(ZIP ファイルまたはディレクトリ)を使用する。
  • JavaScript API を使用する。

URL フラグメント

ブループリントを使い始める最も簡単な方法は、WordPress Playground の Web サイトの URL「フラグメント」にブループリントを貼り付けることです (例: https://playground.wordpress.net/#{"preferredVersions...)。

たとえば、特定のバージョンの WordPress と PHP でプレイグラウンドを作成するには、次のブループリントを使用します。

{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"preferredVersions": {
"php": "7.4",
"wp": "6.5"
}
}

次に、https://playground.wordpress.net/#{"preferredVersions":{"php":"7.4","wp":"6.5"}} にアクセスします。

ヒント

JavaScript では、JSON.stringifyJSON.parse を使用して、ブループリントの JSON をコンパクトに圧縮できます。 例:

const blueprintJson = `{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"preferredVersions": {
"php": "7.4",
"wp": "6.5"
}
}`;
const minifiedBlueprintJson = JSON.stringify(JSON.parse(blueprintJson)); // {"preferredVersions":{"php":"7.4","wp":"6.5"}}

リンクを貼り付ける必要はありません。「試してみる」ボタンをクリックすると、自動的にコード例が実行されます。

Base64 エンコードされたブループリント

GitHub などの一部のツールでは、ブループリントを URL に貼り付けると正しくフォーマットされない場合があります。そのような場合は、ブループリントを Base64 でエンコードし、URL に追加してください。例えば、上記のブループリントを Base64 形式で保存すると以下のようになります。eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19.

実行するには、https://playground.wordpress.net/#eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19 にアクセスしてください。

ヒント

JavaScript では、グローバル関数 btoa() を使用して、任意のブループリント JSON を Base64 形式 で取得できます。

例:

const blueprintJson = `{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"preferredVersions": {
"php": "7.4",
"wp": "6.5"
}
}`;
const minifiedBlueprintJson = btoa(blueprintJson); // eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19

URL からブループリントを読み込む

ブループリントが扱いにくくなった場合は、次のように URL の ?blueprint-url クエリ パラメータを使用して読み込むことができます。

https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/adamziel/blueprints/trunk/blueprints/latest-gutenberg/blueprint.json

ブループリントは公開アクセス可能であり、正しい Access-Control-Allow-Origin ヘッダー とともに提供される必要があることに注意してください。

Access-Control-Allow-Origin: *

ブループリントバンドル

?blueprint-url パラメータが、ZIP 形式のブループリントバンドルもサポートするようになりました。ブループリントバンドルは、ルートレベルに blueprint.json ファイルと、ブループリントが参照する追加リソースを含む ZIP ファイルです。

たとえば、次のようにしてブループリント バンドルをロードできます。

https://playground.wordpress.net/?blueprint-url=https://example.com/my-blueprint-bundle.zip

Blueprint バンドルを使用する場合、bundled リソース タイプを使用してバンドルされたリソースを参照できます。

{
"landingPage": "/my-file.txt",
"steps": [
{
"step": "writeFile",
"path": "/wordpress/my-file.txt",
"data": {
"resource": "bundled",
"path": "/bundled-text-file.txt"
}
}
]
}

ブループリント バンドルの詳細については、ブループリント バンドル ドキュメントを参照してください。

JavaScript API

@wp-playground/client パッケージの startPlaygroundWeb() 関数を使えば、JavaScript API で Blueprints を使うこともできます。JSFiddle または CodePen で実行できる、自己完結型の小さなサンプルを以下に示します。

<iframe id="wp-playground" style="width: 1200px; height: 800px"></iframe>
<script type="module">
import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';

const client = await startPlaygroundWeb({
iframe: document.getElementById('wp-playground'),
remoteUrl: `https://playground.wordpress.net/remote.html`,
blueprint: {
landingPage: '/wp-admin/',
preferredVersions: {
php: '8.0',
wp: 'latest',
},
steps: [
{
step: 'login',
username: 'admin',
password: 'password',
},
{
step: 'installPlugin',
pluginData: {
resource: 'wordpress.org/plugins',
slug: 'friends',
},
},
],
},
});

const response = await client.run({
// wp-load.php is only required if you want to interact with WordPress.
code: '<?php require_once "/wordpress/wp-load.php"; $posts = get_posts(); echo "Post Title: " . $posts[0]->post_title;',
});
console.log(response.text);
</script>