theme.jsonをカスタム投稿タイプとプラグイン出力に拡張する：実践ガイド

概要

多くのWordPress開発者は、カスタム投稿タイプやプラグイン（例： testimonial、ポートフォリオ）を構築します。しかし、グローバルスタイルの中心的な設定であるtheme.jsonは、デフォルトではこれらのカスタム要素を無視することが多く、デザインの不統一を招きます。この記事では、カスタム投稿タイプをtheme.jsonスタイルに継承させる方法、特定のブロックの設定を上書きする方法、プラグイン出力をコアデザイントークンと連携させる方法を解説します。ステップバイステップの手順、「チームメンバー」CPTのスタイリングなどの実例、パフォーマンスやサードパーティの競合に関する注意点も紹介します。最後には、カスタムコンテンツがサイトのエディター定義のデザインシステムに一致することを確実にできます。

カスタム投稿タイプを作成したり、サードパーティのプラグインを統合したりしたものの、その出力がtheme.jsonで丹念に設定した美しいデザインシステムを完全に無視していることに気づいたことはありませんか？あなただけではありません。デフォルトでは、theme.jsonはコアのWordPressブロックと登録されたブロックスタイルにのみ適用され、カスタム投稿タイプやプラグイン生成コンテンツは独自のスタイルになります。その結果、インラインCSS、フォントスタックの重複、ユーザーエクスペリエンスを損なう色の不一致が発生します。しかし、より良い方法があります。theme.jsonをこれらのカスタム要素に拡張することで、サイト全体で一貫したメンテナブルなデザインシステムを確保できます。このガイドでは、コード例と実際の注意点を交えながら、これを実現するための4つの実践的なステップを紹介します。

theme.jsonの範囲を理解する

本題に入る前に、theme.jsonがブロックテーマの概念であることを理解することが重要です。これは、ブロックエディターとフロントエンド向けにグローバルスタイル、設定（カラーパレットやフォントサイズなど）、ブロック固有のスタイルを定義します。ただし、その範囲は限られており、register_block_typeまたは古いadd_theme_supportを介してtheme.jsonプロパティのサポートを明示的に宣言するブロックのみを制御します。register_post_typeで作成されたカスタム投稿タイプは、ブロックで構築されているか明示的にスタイル設定されていない限り、これらのスタイルを自動的に継承しません。

ステップ1：ブロックエディターをサポートするカスタム投稿タイプを登録する

最初のステップは、カスタム投稿タイプがブロックエディターを使用するようにすることです。register_post_typeを呼び出す際に、'show_in_rest' => trueを設定し、supports配列に'editor'を含めます。これにより、その投稿タイプでブロックエディターが有効になり、作成者はtheme.jsonのブロックレベルのスタイルを使用できるようになります。例えば、以下は「チームメンバー」CPTです：

function create_team_member_cpt() {
    $args = array(
        'public' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'show_in_menu' => true,
        'labels' => array(
            'name' => 'チームメンバー',
            'singular_name' => 'チームメンバー',
        ),
        'rewrite' => array( 'slug' => 'team' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

これで、チームメンバーポストを編集する際に、パラグラフ、見出し、画像などのコアブロックにテーマのグローバルスタイルが適用されたブロックエディターが表示されます。これだけでスタイルの問題のほとんどが解決することがよくあります。より細かい制御が必要な場合は、次のステップに進んでください。theme.jsonを使ったブロックテーマの構築についてさらに詳しくは、カスタムWordPressブロックテーマをtheme.jsonで構築する方法を参照してください。

ステップ2：theme.jsonを介してカスタムブロックスタイルを追加する

カスタム投稿タイプのコンテンツのすべてのインスタンスに特定のスタイル（例えば、投稿全体に背景色や特別なパディングを適用する）を適用したい場合があります。core/post-contentをターゲットにするか、コンテンツをカスタムグループブロックでラップして、theme.jsonを介してスタイル設定できます。以下をtheme.jsonファイルのstylesオブジェクトに追加します：

{
  "styles": {
    "blocks": {
      "core/post-content": {
        "css": "background-color: var(--wp--preset--color--light); padding: 2rem;"
      }
    }
  }
}

これにより、チームメンバーCPTを含むすべての投稿のコンテンツ領域に明るい背景とパディングが適用されます。また、settings.blocks内にブロック固有のバリエーションを定義して、エディターでスタイルオプションを提供することもできます。

ステップ3：プラグイン出力にtheme.jsonのカスタムプロパティを使用する

プラグインはショートコード、ウィジェット、カスタムブロックを介してコンテンツを出力することがよくあります。これらを一貫してスタイル設定するには、theme.jsonが生成するCSSカスタムプロパティを活用します。例えば、テーマがプライマリカラーを--wp--preset--color--primaryとして定義している場合、プラグインのCSSで次のように使用できます：

.my-plugin-button {
    background-color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

これにより、サイト管理者がtheme.jsonのカラーパレットを変更すると、プラグインのボタンが自動的に更新されます。堅牢にするために、常にハードコードされた値ではなく、プリセットCSS変数を使用してください。さらに、プラグインが独自のブロックを登録する場合、JavaScriptでuseSettingを使用するか、PHPレンダリングで$attributesを渡すことでtheme.jsonの設定を継承できます。詳しくは、WordPress動的ブロックの習得を参照してください。

ステップ4：動的ブロックの処理

動的コンテンツ（例： testimonialスライダー）を出力するカスタムブロックの場合、ブロックエディターのサポートを付けてブロックを登録し、明示的にtheme.jsonに結び付ける必要があります。PHPでは、'render_callback'を含む$argsを指定してregister_block_typeを使用し、ブロックのblock.jsonファイルで'supports' => array( 'color' => true, 'typography' => true )を設定します。次に、レンダリングコールバック内でwp_get_global_styles()を使用してグローバルスタイルにアクセスし、適用します。例えば：

function render_testimonial_block( $attributes, $content ) {
    $styles = wp_get_global_styles();
    $color = $styles['elements']['link']['color']['text'] ?? '#000';
    return '<div style="color: ' . esc_attr( $color ) . ';">' . $content . '</div>';
}

このアプローチにより、カスタムブロックがテーマのデザイントークンを尊重することが保証されます。ブロックの登録の詳細については、堅牢なWordPressプラグインの構築を参照してください。

注意点

theme.jsonの拡張は強力ですが、以下の落とし穴に注意してください：

1. パフォーマンス：theme.jsonにカスタムスタイルを追加しすぎると、ファイルが肥大化し、CSSの解析時間が増加する可能性があります。グローバル設定に留め、ブロック固有のスタイルは控えめに使用してください。
2. プラグインの競合：一部のプラグインはtheme.jsonの設定をリセットまたは上書きします。最小限のプラグインセットでテストし、after_setup_themeにフックしてカスタマイズを再適用することを検討してください。
3. クラシックテーマ：テーマがブロックエディターを使用していない（つまり、クラシックテーマである）場合、theme.jsonの効果は限定的です。ブロックテーマへの移行を検討するか、wp_enqueue_global_styles関数を使用してスタイルを読み込んでください。
4. ブラウザキャッシュ：theme.jsonの変更がキャッシュのためにすぐに反映されない場合があります。ブラウザキャッシュをクリアし、スタイルシートにバージョニングを使用してください。

結論

これで、カスタム投稿タイプとプラグイン出力をtheme.jsonのデザインシステムと調和させるための明確なロードマップが得られました。鍵は、ブロックエディターをサポートしてCPTを登録し、投稿コンテンツブロックに特定のスタイルを定義し、プラグイン出力でCSSカスタムプロパティを使用し、カスタムブロックを適切なtheme.json統合で登録することです。このアプローチにより、不整合がなくなり、メンテナンスが軽減され、サイト管理者が単一の真実の情報源からルックアンドフィールを制御できるようになります。今すぐこれらのステップを実装して、WordPressプロジェクトに一貫性をもたらしましょう。