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

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

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

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

SVG画像情報

ビルド、テスト、およびローンチする方法をプレイグラウンドについてのセクションで発見してください。

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

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

WordPressプレイグラウンドを使用すると、WordPressテーマディレクトリにある任意のテーマを使用して、迅速にWordPressインストールを起動できます。次のように、theme クエリパラメータをプレイグラウンドURLに渡します: https://playground.wordpress.net/?theme=disco。

また、プレイグラウンドインスタンスに渡されるブループリントのinstallThemeステップを設定することで、WordPressテーマディレクトリから任意のテーマを読み込むこともできます。

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

[

GitHub リポジトリのテーマ

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

themeData プロパティでは、Playground インスタンスにロードしたいテーマを含む .zip ファイルの場所を指す url リソースを定義できます。

CORS の問題を避けるために、Playground プロジェクトは、リポジトリ（またはリポジトリ内のフォルダー）からテーマを生成するための GitHub プロキシを提供しています。

SVG Image tip

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

たとえば、次の blueprint.json は、https://github-proxy.com ツールを利用して GitHub リポジトリからテーマをインストールします:

{
   "steps": [
   {
   "step": "installTheme",
   "themeData": {
   "resource": "url",
   "url": "https://github-proxy.com/proxy/?repo=Automattic/themes&branch=trunk&directory=assembler"
   },
   "options": {
   "activate": true
   }
   }
   ]
}

[

Blueprintsを使用したデモテーマの設定

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

SVG Image tip

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

Blueprints Galleryをチェックして、さまざまなセットアップでWordPressサイトを立ち上げるためにWordPress Playgroundを使用した実際のコード例を探ってみてください。
WordPress Playground Step Libraryツールは、ステップをドラッグまたはクリックしてWordPress Playgroundのためのブループリントを作成するための視覚的インターフェースを提供します。独自のステップを作成することもできます！
Blueprints builderツールを使用すると、オンラインでブループリントを編集し、Playgroundインスタンスで直接実行できます。

プロパティとstepsを使用して、Playgroundインスタンス内のテーマの初期設定を構成できます。

SVG画像情報

Playgroundを通じてテーマの良いデモを提供するために、テーマの機能を強調するデフォルトコンテンツで読み込むことを検討してください。詳細については、Providing content for your demoガイドを参照してください。

resetData

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

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

[

writeFile

writeFile ステップを使用すると、指定されたパスにデータを書き込むことができます。このステップを使用して、Playground WordPress インスタンスの mu-plugins フォルダー内の PHP ファイルにカスタム PHP コードを書き込むことができます。これにより、WordPress インスタンスが読み込まれるときにコードが自動的に実行されます。このステップを通じてできることの一つは、Playground インスタンスのために美しいパーマリンクを有効にすることです：

"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(); } );"
   },
   ...
]

[

updateUserMeta

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

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

[

setSiteOptions

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

"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
   }
   },
   ...
]

[

プラグイン

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

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

[