Playground でデモ用のコンテンツを提供する

WordPress Playground で優れたデモを提供するために、プラグインやテーマの機能をわかりやすく示すために、デフォルトのコンテンツを読み込むことをお勧めします。このデフォルトコンテンツには、画像やその他のアセットが含まれる場合があります。

Playground インスタンスにコンテンツをインポート (または生成) するために使用できるブループリントのステップと方策がいくつかあります。

`importWxr`

importWxr ステップを使用すると、以前に既存の WordPress インストールからエクスポートされた .xml ファイルを介して独自のコンテンツをインポートできます。

"steps": [
	...,
	{
		"step": "importWxr",
		"file": {
			"resource": "url",
			"url": "https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/install-activate-setup-theme-from-gh-repo/blueprint-content.xml"
		}
	},
	...
]

Run Blueprint See blueprint.json

情報

インポートしたコンテンツに画像を含めるには、画像を GitHub リポジトリにアップロードし、URL 形式 https://raw.githubusercontent.com/{repo}/{branch}/{image_path} を使用して、エクスポートされた .xml ファイル内の画像のパスを検索/置換するのが良い方法です。

<!-- wp:image {"lightbox":{"enabled":false},"id":4751,"width":"78px","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-border"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-border">
	<img src="https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/install-activate-setup-theme-from-gh-repo/images/avatars.png" alt="" class="wp-image-4751" style="width:78px" />
</figure>
<!-- /wp:image -->

エクスポートした .xml ファイルと参照されているアセット (画像など) を、GitHub リポジトリ内の blueprint.json と同じディレクトリにアップロードすることをお勧めします。

`importWordPressFiles`

importWordPressFiles ステップを使用すると、指定された .zip ファイルから独自のトップレベル WordPress ファイルをインスタンスのルートフォルダにインポートできます。例えば、.zip ファイルに wp-content ディレクトリと wp-includes ディレクトリが含まれている場合、Playground のルートフォルダ内の対応するディレクトリが置き換えられます。

この zip ファイルは、Playground オプションメニューの「zip としてダウンロード」オプションを使用して、任意の Playground インスタンスから作成できます。

Playground インスタンスで WordPress テーマまたはプラグインのデモ（画像やその他のアセットを含む）を準備し、そのデモのスナップショットを.zipファイルにエクスポートできます。このファイルは、後でimportWordPressFilesステップを使用してインポートできます。

{
	"landingPage": "/",
	"login": true,
	"steps": [
		{
			"step": "importWordPressFiles",
			"wordPressFilesZip": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/adamziel/playground-sites/main/playground-for-site-builders/playground.zip"
			}
		}
	]
}

Run Blueprint

`importThemeStarterContent`

一部のテーマにはスターターコンテンツがあり、公開してテーマの機能を強調することができます。

importThemeStarterContent ステップを使用すると、そのテーマが Playground インスタンスでアクティブ化されていないものであっても、任意のテーマのスターターコンテンツを公開できます。

"steps": [
    {
      "step": "installTheme",
      "themeData": {
        "resource": "wordpress.org/themes",
        "slug": "twentytwenty"
      }
    },
    {
      "step": "installTheme",
      "themeData": {
        "resource": "wordpress.org/themes",
        "slug": "twentytwentyone"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "importThemeStarterContent",
      "themeSlug": "twentytwenty"
    }
  ]

Run Blueprint

installTheme ステップでテーマをインストールするときに、importStarterContent オプションを true に設定することで、テーマのスターターコンテンツを公開することもできます。

{
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "wordpress.org/themes",
				"slug": "twentytwenty"
			},
			"options": {
				"activate": true,
				"importStarterContent": true
			}
		}
	]
}

Run Blueprint

`wp-cli`

テーマやプラグインのコンテンツを生成するもう 1 つの方法は、wp-cli ステップを使用することです。このステップでは、wp post generate などの WP-CLI コマンドを実行できます。

{
	"landingPage": "/wp-admin/edit.php",
	"login": true,
	"steps": [
		{
			"step": "wp-cli",
			"command": "wp post generate --count=20 --post_type=post --post_date=1999-01-04"
		}
	]
}

Run Blueprint

また、wp-cli ステップを writeFile ステップと組み合わせて使用して、既存のコンテンツに基づいて投稿を作成し、Playground インスタンスに画像をインポートすることもできます。

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"landingPage": "/?p=4",
	"login": true,
	"steps": [
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/postcontent.md",
			"data": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/wpcli-post-with-image/postcontent.md"
			}
		},
		{
			"step": "wp-cli",
			"command": "wp post create --post_title='Welcome to Playground' --post_status='published' /wordpress/wp-content/postcontent.md"
		},
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/Select-storage-method.png",
			"data": {
				"resource": "url",
				"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/wpcli-post-with-image/Select-storage-method.png"
			}
		},
		{
			"step": "wp-cli",
			"command": "wp media import wordpress/wp-content/Select-storage-method.png --post_id=4 --title='Select your storage method' --featured_image"
		}
	]
}

Run Blueprint

ヒント

コンテンツとアイキャッチ画像の関係を示す完全な例を確認するには、Blueprints ギャラリーの "wp-cli を使用して画像付きの投稿を追加する" の例を確認してください。

`runPHP`

runPHP ステップを使用すると、たとえば wp_insert_post 関数を使用して、WordPress インストールに情報を挿入するために必要な PHP コードを実行できます。

{
	"landingPage": "/wp-admin/edit.php",
	"login": true,
	"steps": [
		{
			"step": "runPHP",
			"code": "<?php require_once '/wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Simple post from PHP', 'post_content'  => '<!-- wp:paragraph --><p>This is a simple post inserted with wp_insert_post</p><!-- /wp:paragraph -->', 'post_author'   => 1, 'post_status' => 'publish')); ?>"
		}
	]
}

Run Blueprint

importWxr​

importWordPressFiles​

importThemeStarterContent​

wp-cli​

runPHP​

`importWxr`

`importWordPressFiles`

`importThemeStarterContent`

`wp-cli`

`runPHP`