ブロックテーマのスタイルバリエーションごとに別々のスタイルシートを読み込ませる方法

WordPressのブロックテーマでは、テーマフォルダ内にstylesフォルダを追加し、バリエーション用の措置をしたtheme.jsonを置くことでサイトエディターのスタイルから一発でいろいろなスタイルを選べるようになっていて、これをスタイルバリエーションと言います。

スタイルバリエーションを追加するためのテーマのファイル構造やtheme.jsonの記述方法などはデフォルトのテーマなどを展開してみるなり、WordPress公式ページ「Style Variations」をご覧になれば分かると思いますし、theme.jsonの中のstylesプロパティの中にcssプロパティを追加したり、ブロックのプロパティの中にcssプロパティを追加すれば任意のスタイルコードを書くこともできますが、少なくともWordPress 7.0時点で私が認識する限りでは、以下のような不具合や不都合があります。

1. theme.jsonの直接記述ではミスが起こりやすく、きちんと記述したはずなのに適用されないことがある（ひどい場合にはサイトレイアウトが崩れたり、表示できなくなったりすることもある）
2. サイトエディターの追加CSSから追加してエクスポートした後のtheme.jsonを加工してスタイルバリエーションの1つとすることもできるが、追加CSSの編集画面自体が小さく使いにくかったり、2重にスタイルが出力されたりすることがある
3. 疑似要素（:before :after）や特殊条件を付加したスタイルコードなど適用できないものがある

1と2は不都合とも不具合とも言えますが、慣れれば問題ないと思うものの、3については見出しの手前にアイコンを表示して．．などといった場合に、スタイルバリエーションを選択した後で、そのサイトのCSSに追記しなければならず、テーマとして未完成なものになってしまうことから、ヒントを探して本ページにたどり着いた方も多いと思います。

そこで本ページでは選択したスタイルバリエーション固有のスタイルシートを呼び出す方法を紹介します。

なお、この措置はWordPress 7.0段階のものであり、将来バージョンでは何等かの方法で解消されていくことも予想され、それに応じて後々修正が必要なケースが出てくるかも知れないということを認識の上で実装ください。

機能を追加する前に

今回の方法は、テーマディレクトリ内にファイルやコードの追加を行います。

親テーマ（公式などで入手したテーマやWordPressに最初から入っているテーマそのもの）に行った機能の追加はテーマの更新により消失しますので、「ブロックテーマを派生化（フォーク）して使う方法」を参考にテーマをフォークするか、完全に独自のテーマを作成して行ってください。

未確認ですが、子テーマでも適切にファイルやコードの設置を行えばこの機能は動作するとは思いますが、「ブロックテーマでは「子テーマ」は必要ないかもしれない（考察）」で書いているように、個人的にブロックテーマで子テーマを使うことはナンセンスだと思っていますので説明は割愛します。

スタイルバリエーションごとに別々のスタイルシートを読み込む手順

以下が今回実装する機構の概要です。

1. どのスタイルバリエーションが選択されているか（または選択されていないか）を示すためのCSS変数を出力する
2. CSS変数に対応するスタイルシートを読み込んで、編集画面とフロントエンドへ適用させる

順に紹介していきますので、見ながら実装してみてください。

テーマにfunctions.phpを追加する

ブロックテーマには任意の関数などを記述できるfunctions.phpがないことがありますので、パソコン上でエディターなどを使って、コードの先頭に「<?php」という接頭辞のみを入れた「functions.php」というファイルを作り、テーマディレクトリ直下（style.cssのある場所）へアップロードします。

既にfunctions.phpが存在する場合、作成や追加をする必要はありません。上書きアップロードして元のファイルを消失しないようご注意ください。

functions.phpはテーマディレクトリ内に設置するだけで機能しますので、ファイル設置以外に行うことはありません

theme.jsonへコードを追加する

どのスタイルバリエーションが選択されているかを判別するためのCSS変数を出力するためのコードをそれぞれのtheme.jsonへ追加します。

元のtheme.jsonへ追記するコード

元のtheme.json(style.cssと同じディレクトリにある「theme.json」ファイル)のsettingsプロパティへ以下のコードを追加します。

		"custom": {
			"theme-info": {
				"current-slug": "ha-default"
			}
		},

theme.jsonの記述内容はテーマによって様々です。追加する際はコード体系（特に「,」の有無など）に注意して、エラーにならないようにしてください。

コードを追加したら、一旦サイトのトップページなどを開き、デベロッパーツールを開いて以下のようにCSS変数が出力されているかを確認ください。

値が「ha-default」と出力されていない、そもそもCSS変数が出力されていないなどといった不具合がある場合は以下の措置を行った上で再確認してください。

1. サイトエディターを開く
2. 何かのテンプレートに段落を一旦追加するなど多少の変更を加えてから元に戻し、「保存」をクリックして変更を適用する
   または他のスタイルバリエーション選択後に一旦保存後、デフォルトに戻して再保存する

テーマバリエーション用theme.jsonへ追記するコード

	"settings": {
		"custom": {
			"theme-info": {
				"current-slug": "ha-dark-desktop"
			}
		}
	},

theme.jsonの記述内容はテーマによって様々です。追加する際はコード体系（settingsプロパティの有無、特に「,」を付加する必要があるかどうかなど）に注意して、エラーにならないようにしてください。

コードを追加したら、サイトエディターでtheme.jsonの加工を行ったテーマバリエーションを選択して保存後、一旦サイトのトップページなどを開き、デベロッパーツールを開いて以下のようにCSS変数が出力されているかを確認ください。

値が「ha-dark-desktop」と出力されていない、そもそもCSS変数が出力されていないなどといった不具合がある場合は以下の措置を行った上で再確認してください。

1. サイトエディターを開く
2. 何かのテンプレートに段落を一旦追加するなど多少の変更を加えてから元に戻し、「保存」をクリックして変更を適用する
   または他のスタイルバリエーション選択後に一旦保存し、theme.jsonの加工を行ったテーマバリエーションへ変更して再保存する

この段階できちんとCSS変数が出力されていないと、この後の手順を進めてもきちんと機能しませんので、必ず正しくCSS変数が出力されていることを確認して次に進んでください

スタイルバリエーション用のスタイルシートを用意する

テーマディレクトリ内の「assets」ディレクトリの中へ「CSS」というディレクトリを追加し、先ほど「”current-slug”」に指定した「ha-dark-desktop」「ha-default」と同じ名前のCSSファイル（「ha-dark-desktop.css」「ha-default.css」）を追加します。

CSSファイルのファイル名は必ずcurrent-slugに指定した値と同じにしてください。一致しない場合は機能しません

追加後は以下のような構造になります。

• テーマディレクトリ
  • assets
    • css
      • ha-dark-desktop.css
      • ha-default.css
  • styles
    • dark-desktop.json
    • …..
    • ……
  • theme.json
  • ….
  • …..

functions.phpへコードを追加する

設置したfunctions.phpまたは既存のfunctions.phpへ以下のコードを追加します。

function pwcn_canvas_style_variation_enqueue_style(){
	// theme.json から現在のスラッグを取得（未設定なら ha-default をフォールバックに）
	$theme_info = wp_get_global_settings( array( 'custom', 'theme-info' ) );
	$slug = $theme_info['current-slug'] ?? 'ha-default';

	$rand = rand( 1, 99999999999 );

	// theme.jsonで指定したCSS変数によってスタイルシートを変更してエンキュー
	wp_enqueue_style(
		'pwcn-theme-variation-style',
		get_theme_file_uri( "assets/css/{$slug}.css" ),
		array(),
		$rand
	);
}
add_action( 'enqueue_block_assets', 'pwcn_canvas_style_variation_enqueue_style');

このコードは以下のように動作します。

1. CSS変数（–wp–custom–theme-info–current-slug）で指定されている値（本ページと同じなら「ha-dark-desktop」や「ha-default」）を取得する
2. /assets/css/内にある1と同名のCSSファイルを「wp_enqueue_style」で読み込ませ「enqueue_block_assets」へフックさせてブロックエディターとフロントエンド両方に適用させるようにする

動作の最終確認

ここまでで機能自体の実装は完了しました。

CSS変数（–wp–custom–theme-info–current-slug）の値がスタイルバリエーションを変えるごとにきちんと変更されていれば、選択したスタイルバリエーションごとに別々のスタイルシートが読み込まれるはずです。

最終的に機能しているかを以下のようにして確認しましょう。

仮のスタイルコードを追加する

作成したスタイルシート「ha-default.css」へ以下のスタイルコードを追加します。

p{
color:red!important;
}

同様にスタイルシート「ha-dark-desktop.css」へ以下のスタイルコードを追加します。

p{
color:green!important;
}

一旦サイトのトップページなどを表示させます。もしもスタイルバリエーションの選択されていない状態できちんと機能していれば、段落の文字が赤色になるはずです。

また、サイトエディターで本ページの措置を行ったスタイルバリエーションを指定して保存し、トップページなどを再度開くと、きちんと機能していれば段落の文字が緑色になるはずです。

本ページの機能は、2026年6月11日現在、テストサイトの自作ブロックテーマできちんと動作することを確認しており、本サイトにも導入する予定をしていますので、手順に従って実装すれば動作しないことはないとは思いますが、もしもうまくいかないようであれば、以下を確認してみてください。

• CSS変数「–wp–custom–theme-info–current-slug」と値はきちんと出力されているか
• スタイルシートのファイル名はそれぞれのtheme.jsonの「current-slug」の値と一致しているか
• HTMLソース上でスタイルシートは読み込まれているか
• スタイルシートが読み込まれた後でpタグに対して色が追加指定されているスタイルシートやインラインスタイル（段落ブロックで特別に指定した場合など）がないか
• ブラウザキャッシュ（キーボードの「Ctrl」＋「F5」）をクリアしてみてどうなるか

後述

この機能を作ることにした発端は、独自のブロックテーマを作成した際に、簡単に見た目が切り替えられるスタイルバリエーションを実装し、:before :afterのあるスタイルコードを追加CSSに書いても適用されないという不都合に気付いたことでした。

本ページでも表示しているリストの階層表示（以下文中のものを重複して掲載します）の階層を示す線に:before :afterで背景色を指定する必要があり、背景によっては調整する必要があったからです。

• テーマディレクトリ
  • assets
    • css
      • ha-dark-desktop.css
      • ha-default.css
  • styles
    • dark-desktop.json
    • …..
    • ……
  • theme.json
  • ….
  • …..

最初はスタイルバリエーションごとにbodyクラスを付与すればと思って始め、フロントエンドのbodyタグへのクラス追加はできたものの、編集画面へはどうしても追加できなかったため断念する寸前でしたが、AIの力を借りつつもっと確実に別々のスタイルシートを読み込ませるという形で実現できました。

最後に一言、本ページを参考に本機能をご自身のサイトまたは制作や運営を依頼されている顧客のサイトへ、作業される方ご自身の責任において実装いただくのは全く問題はありませんし、困っている誰かの役に立てばという思いから本ページを公開していますので利用していただけることは大変喜ばしいことではありますが、私自身が本コードの体系にたどり着くために結構な時間を要したことを理解いただき、転載は厳に慎んでいただけすまようお願いします。