ブロックテーマとtheme.jsonは高い柔軟性を備えているため、子テーマはもはや不要に思えるかもしれません。しかし、子テーマは今でも重要な役割を果たします。

親テーマのコアファイルを直接編集せずにサイトのデザインを管理するために、子テーマが賢い選択肢であることに変わりはありません。

この記事では、Twenty Twenty-Fiveテーマをベースに、独自のstyle.cssを使ったブロック型の子テーマを作成する方法を解説します。さらに、functions.phpも使用します。スタイルを安全に上書きし、カスタムブロックスタイルを定義し、スタイルバリエーションを設定します。これは単なるスタイルの調整ではなく、自分だけのブロックテーマを構築するための確固たるステップです。

一見シンプルに思えるかもしれませんが、注意が必要なポイントもあります。カスタム子テーマを作成し、カスタムスタイルバリエーションを実装していきましょう。

ブロック子テーマの登録

ブロック子テーマの登録は、従来の子テーマの扱いより簡単です。

特別な登録手順はそもそも不要です。正しい名前のフォルダ内にtheme.jsonとstyle.cssを配置すれば、自動で認識されます。

では、なぜstyle.cssが必要なのでしょうか。

子テーマフォルダには、WordPressがテーマを識別するためのヘッダー情報（名前や親テーマ名などのメタデータ）を含める必要があります。スタイルや設定はtheme.jsonで管理されますが、style.cssはCSSが空でも認識に必須です。

/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/

スクリプトを読み込む、PHP機能を追加するなどを行わない限り、functions.phpは不要です。

theme.jsonの使い方については、「プロパティ・キー」バリューペアについての説明をご参照ください。

子テーマに3つの基本的変更を加える

それでは、背景色とテキスト色を変更し、Buttonブロックのスタイルを編集してみましょう。

子テーマのtheme.jsonに次の設定を追加します。

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Black",
          "slug": "black",
          "color": "#000000"
        },
        {
          "name": "Yellow",
          "slug": "yellow",
          "color": "#FFFF00"
        },
        {
          "name": "Purple",
          "slug": "purple",
          "color": "#800080"
        },
        {
          "name": "White",
          "slug": "white",
          "color": "#FFFFFF"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--black)",
      "text": "var(--wp--preset--color--yellow)"
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--purple)",
          "text": "var(--wp--preset--color--white)"
        },
        "border": {
          "color": "var(--wp--preset--color--yellow)",
          "width": "2px",
          "style": "solid"
        }
      }
    }
  }
}

この設定により、背景と文字色が全体に適用され、ボタンスタイルはデフォルトにのみ反映されます。

サイトエディターでデフォルトのスタイルバリエーションを使った子テーマ
子テーマのサイトエディターにデフォルトスタイルを適用する

スタイルバリエーションを上書きする

他のバリエーションでも同じボタンスタイルを適用するには、親テーマの命名規則に従った.jsonファイルを作成します。

例えば、イブニングスタイルバリエーションのボタンの枠線を上書きするには、子テーマのルートディレクトリ（または/stylesサブフォルダ）に01-evening.jsonという名前のファイルを作成します。

{
  "version": 3,
  "title": "Evening",
  "styles": {
    "blocks": {
      "core/button": {
        "border": {
          "color": "var(--wp--preset--color--white)",
          "width": "3px",
          "style": "dashed"
        }
      }
    }
  }
}

ここでは、ボタンを目立たせるために破線と幅を追加しています。これらの変更はtheme.jsonの設定を上書きします。

Eveningスタイルバリエーションを有効にした子テーマの様子
カスタムイブニングバリエーションを適用した子テーマ

カスタムスタイルバリエーションを作成する

さらに一歩進んで、Kinstaという新しいスタイルバリエーションを作成してみましょう。このバリエーションは、子テーマのtheme.jsonファイルからグローバル設定を継承し、独自のカラーパレットとボタンスタイルを適用します。

以下を/styles/kinsta.jsonとして保存してください。

{
  "version": 3,
  "title": "Kinsta",
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#261e1e"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#ff2900"
        },
        {
          "name": "White",
          "slug": "white",
          "color": "#FFFFFF"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--secondary)",
      "text": "var(--wp--preset--color--primary)"
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--white)"
        },
        "border": {
          "color": "var(--wp--preset--color--white)",
          "width": "4px",
          "style": "dotted"
        }
      }
    }
  }
}

これにより、カスタムパレットと独自のデザインを備えたバリエーションが完成します。

サイトエディターのインターフェースで新しいスタイルバリエーションを強調表示している様子
サイトエディターで新しいスタイルバリエーションを選択する

style.cssを読み込む方法

Twenty Twenty-Fiveのような本格的なブロックテーマでは、PHPを使って親テーマや子テーマにスタイルシートを手動で追加する必要はありません。WordPressコアがtheme.jsonファイルを基にCSSを自動で生成します。

ただし、style.cssファイルに独自のスタイルを記述する場合は、別途読み込む必要があります。

// Frontend styles
add_action('wp_enqueue_scripts', function() {
    // Enqueue parent theme stylesheet
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    // Enqueue child theme stylesheet
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array('parent-style')
    );
});

このコードにより、親テーマと子テーマの両方のstyle.cssファイルがフロントエンドで読み込まれます。

スタイルが正しく読み込まれているか確認するには、子テーマのstyle.cssファイルに次のCSSを追加してください。

body {
  color: #ffff00;
  background: #0000ff;
}

これにより、すべてのスタイルバリエーションに青い背景と黄色の文字色が適用されます（フロントエンドのみ）。

styles.css のシンプルな活用例

「なぜCSSを使う必要があるのか。theme.jsonで全て対応できるのでは？」と疑問に思うかもしれませんが、結論から言えばそうではありません。

たとえば、theme.jsonは:hoverのような疑似クラスをサポートしていません。すべてのボタンにホバー効果をつけたい場合、次のCSSを使うことができます。

.wp-block-button a:hover { background: #ffffff; color: #0000ff; }

これにより、すべてのバリエーションにおけるボタンブロックのフロントエンドにホバー効果が適用されます。

特定のバリエーションやブロックだけにこのホバー効果を適用したい場合は、条件付きのbodyクラス、ブロックフィルター、または対象ブロック専用のCSSといった、より高度な方法を使う必要があります。

ブロックスタイルバリエーションの追加

PHPとCSSを使ってボタンブロックに新しいスタイルバリエーションを追加する方法を見ていきます。

theme.jsonにvariationsの配列を追加する場合、このケースでは機能しません。theme.jsonはグローバルおよびブロックレベルのスタイルを扱いますが、ボタンの代替スタイルのようなブロックスタイルバリエーションは、別の方法で登録する必要があります。

ここではAlternative Outlineという新しいスタイルバリエーションを作成します。このスタイルはエディターのUIでデフォルトの「Fill」「Outline」スタイルと並んで表示され、フロントエンドでも正しく反映されます。

PHPでスタイルを登録

次のコードを子テーマのfunctions.phpファイルに追加します。このコードは、コアが読み込まれた後、ページが描画される前にスタイルを登録します。

// Register "Alternative Outline" button style
add_action('init', function() {
    register_block_style(
        'core/button',
        [
            'name'  => 'alternative-outline',
            'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
        ]
    );
});

style.cssにカスタムスタイルを追加

次に、このバリエーションのスタイルを、:hover状態を含めて子テーマのstyle.cssファイルに定義します。

.wp-block-button.is-style-alternative-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--yellow);
  border: 2px dotted var(--wp--preset--color--yellow);
  transition: all 0.7s ease-in-out;
}

.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--black);
}

ここで使用しているcolor変数は、theme.jsonのパレットで定義されており、サイト全体で一貫性が保たれます。

ツールバーとサイドバーに表示された新しいAlternative Outlineボタンブロックスタイル
ツールバーとサイドバーに表示される、新しい「Alternative Outline」ボタンブロックスタイル

JSONでブロックスタイルバリエーションを作成する

WordPress 6.6からは、PHPを使わずにJSONだけでコアブロックのスタイルバリエーションを登録できます。

以下は、GroupブロックにPurple Backgroundという新しいバリエーションを追加する例です。エディターのサイドバーに、スタイル付きのプレビューと共に表示されます。

テーマの/styles/purple-background/フォルダ内に、block.jsonという名前のファイルを作成します。

{
  "version": 3,
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "title": "Purple Background",
  "slug": "section-purple",
  "blockTypes": ["core/group"],
  "styles": {
    "border": {
      "radius": "20px"
    },
    "color": {
      "background": "#800080",
      "text": "#eeeeee"
    },
    "spacing": {
      "padding": {
        "top": "var(--wp--preset--spacing--50)",
        "right": "var(--wp--preset--spacing--50)",
        "bottom": "var(--wp--preset--spacing--50)",
        "left": "var(--wp--preset--spacing--50)"
      }
    }
  }
}

Purple Backgroundバリエーションは、下の画像のようにエディターのサイドバーに表示されます。

サイトエディターでカスタムスタイルバリエーションを適用したグループブロック
サイトエディターでカスタムスタイルバリエーションを適用したGroupブロック

複数のスタイルバリエーションを扱う場合は、/stylesサブフォルダに配置するのが推奨されます。この例では、ファイルパスは/styles/purple-background/block.jsonとなります。

JSON方式で考慮すべき最終的な注意点は次のとおりです。

  • この方法ではPHPは不要で、必要なときにのみ関連するCSSを読み込むため、ページの読み込み負荷を軽減できます。
  • Twenty Twenty-Fiveの子テーマを使用しているため、すでにtheme.jsonと動的スタイリングが使われています。そのため、スタイルを手動で読み込む必要はありません。
  • 一部のブロックは、現時点ではJSON経由ですべてのスタイルオプションをサポートしていない場合があります。下位互換性が重要な場合は、register_block_style()を使ってPHPでフォールバックを追加できます。

まとめ

ブロックテーマは驚くほど柔軟で、無数の開発の可能性を広げます。この記事では、ブロックテーマにおける子テーマの役割や活用方法をご紹介しました。様々なアイデアを形にするきっかけになれば幸いです。

さらに、カスタムコアブロックのスタイルバリエーションを追加する2つの方法も取り上げました。1つはPHPとCSSを使う方法、もう1つはJSONのみを使う方法です。

ご想像のとおり、紹介した例はどれも複数のアプローチに発展できます。WordPressには豊富な選択肢があり、同じ課題を解決する手段がいくつも用意されています。

たとえば、設定にはtheme.jsonを使い、スタイルはstyle.cssにすべて任せてCSSの幅広い機能を活かすテーマを作ることも可能です。あるいは、特定のバリエーション使用時だけスタイルを読み込むように条件付きで読み込みを行う方法もあります。可能性は無限大です。

Kinstaでは、基本的なものから高度なものまで、WordPressの作業を高速化・整理・改善するための開発ツールを幅広く用意しています。まずは30日間無料でKinstaをお試しください。

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.