テーマ開発者のためのWordPressプレイグラウンド

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

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

WordPress Playground を使って製品をビルド、テスト、ローンチする方法については、Playground についてセクションでご確認ください。

テーマを指定して Playground インスタンスを起動する

WordPress テーマディレクトリ内のテーマ

WordPress Playground を使えば、WordPress テーマディレクトリにあるテーマを使って、WordPress を素早く起動できます。クエリパラメータのthemeを Playground URL に渡すだけです。例：https://playground.wordpress.net/?theme=disco

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

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

Run Blueprint

GitHub リポジトリ内のテーマ

GitHub リポジトリに保存されているテーマは、Blueprints を使用して Playground インスタンスに読み込むこともできます。

installTheme ブループリントステップのthemeDataプロパティを使用して、Playgroundインスタンス内のリポジトリのファイルからテーマを構築するgit:directoryリソースを定義できます。

ここ数ヶ月、GitHubプロキシはGitHubリポジトリからテーマを読み込むための非常に便利なツールでした。特定のブランチ、特定のディレクトリ、特定のコミット、または特定のPRからテーマを読み込むことができました。しかし、Playgroundの最近の改善により、この機能は不要になりました。GitHubプロキシはまもなく廃止されるため、ブループリントをgit:directoryリソースに更新してください。

たとえば、次の blueprint.json は GitHub リポジトリからテーマをインストールします。

{
	"steps": [
		{
			"step": "installTheme",
			"themeData": {
				"resource": "git:directory",
				"url": "https://github.com/Automattic/themes",
				"ref": "trunk",
				"path": "assembler"
			},
			"options": {
				"activate": true
			}
		}
	]
}

ヒント

テーマがGitHubでホストされている場合、Playground PR Preview GitHub Actionを使用して、プルリクエストにプレビューボタンを自動的に追加できます。これにより、レビュアーは設定なしですぐに変更をテストできます。詳細については、GitHub Actionsを使用したPRプレビューボタンの追加を参照してください。

Run Blueprint

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

ブループリントでデモテーマを設定する

特定のテーマが有効化された WordPress Playground インスタンスへのリンクを提供する際、そのテーマの初期設定をカスタマイズしたい場合もあるでしょう。Playground の Blueprints を使えば、テーマを読み込み、有効化し、設定することができます。

ヒント

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

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

ブループリント内のプロパティと steps を通じて、Playground インスタンスでのテーマの初期設定を構成できます。

Playground でテーマのデモを効果的に提供するには、テーマの特徴を強調するデフォルトのコンテンツを Playground に読み込むのがおすすめです。詳しくはデモ用コンテンツの提供ガイドをご覧ください。

`resetData`

resetData ステップを使用すると、WordPress インストールのデフォルトのコンテンツを削除して、独自のコンテンツをインポートできます。

"steps": [
	...,
	{
		"step": "resetData"
	},
	...
]

Run Blueprint See blueprint.json

`writeFile`

writeFile ステップを使用すると、指定したパスのファイルにデータを書き込むことができます。このステップを使用して、Playground WordPress インスタンスの mu-plugins フォルダ内の PHP ファイルにカスタム PHP コードを記述し、WordPress インスタンスのロード時にコードを自動的に実行することができます。このステップで実行できることの一つは、Playground インスタンスの pretty パーマリンクを有効にすることです。

"steps": [
	...,
	{
		"step": "writeFile",
		"path": "/wordpress/wp-content/mu-plugins/rewrite.php",
		"data": "<?php /* Use pretty permalinks */ add_action( 'after_setup_theme', function() { global $wp_rewrite; $wp_rewrite->set_permalink_structure('/%postname%/'); $wp_rewrite->flush_rules(); } );"
	},
	...
]

Run Blueprint See blueprint.json

`updateUserMeta`

updateUserMeta ステップを使用すると、任意のユーザーメタデータを更新できます。例えば、任意の WordPress インストールのデフォルトの admin ユーザーのメタデータを更新できます。

"steps": [
	...,
	{
		"step": "updateUserMeta",
		"meta": {
			"first_name": "John",
			"last_name": "Doe",
			"admin_color": "modern"
		},
		"userId": 1
	},
	...
]

Run Blueprint See blueprint.json

`setSiteOptions`

setSiteOptions ステップでは、サイト名、説明、投稿に使用するページなどのサイトオプションを設定できます。

"steps": [
	...,
	{
		"step": "setSiteOptions",
		"options": {
			"blogname": "Rich Tabor",
			"blogdescription": "Multidisciplinary maker specializing in the intersection of product, design and engineering. Making WordPress.",
			"show_on_front": "page",
			"page_on_front": 6,
			"page_for_posts": 2
		}
	},
	...
]

Run Blueprint See blueprint.json

setSiteOptions ステップの代わりに使用できる siteOptions ショートカットもあります。

`plugins`

plugins ショートハンドを使用すると、Playground インスタンスでテーマとともにインストールしてアクティブ化するプラグインのリストを設定できます。

"plugins": ["todo-list-block", "markdown-comment-block"]

Run Blueprint See blueprint.json

installPlugin ステップを使用して、Playground インスタンスのプラグインをインストールしてアクティブ化することもできますが、簡単な方法が推奨されます。

`login`

login ショートカットを使用すると、管理者ユーザーがログインした状態で Playground インスタンスを起動できます。

 "login": true,

Run Blueprint See blueprint.json

login ステップを使用して、特定のユーザーでログインした状態で Playground インスタンスを起動することもできます。

ヒント

Blueprints Gallery の "Stylish Press" および "GitHub リポジトリからのテーマの読み込み、アクティブ化、および構成" の例は、Playground インスタンスでブロックテーマを読み込み、アクティブ化、インポートし、構成するための優れたリファレンスです。