テーマ開発者のための Playground

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 インスタンスにロードするテーマを含む .zip ファイルの場所を指す url リソースを定義できます。

CORS の問題を回避するために、Playground プロジェクトでは GitHub プロキシが提供されており、これを使用すると、自分のテーマを含むリポジトリ (またはリポジトリ内のフォルダー) から .zip を生成できます。

ヒント

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
            }
        }
    ]
}

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 インスタンスでブロックテーマを読み込み、アクティブ化、インポートし、構成するための優れたリファレンスです。