TT2からTT3テーマへ変更したら、カラーパレットで設定していた色が変わってしまった時の対処

WordPressのブロックテーマであるTT2(Twenty Twenty-Two)テーマから、TT3(Twenty Twenty-Three)へ変更した時に、ブロックエディターなどでカラーパレットから選択して設定していた色や、サイトの基調色が変わってしまったのを元に戻した処置の備忘録です。

まあテーマを変えれば当然何かがかわってしまうというのは仕方ないですが、指定していた色が変わってしまうのはちょっと困りますね。

まずは、両テーマの「theme.json」に書かれているカラーパレットの色指定を一覧にしてみました。

カラースラグ	TT2	TT3
foreground	#000000	設定なし
background	#ffffff	設定なし
primary	#1a4548	#9DFF20
secondary	#ffe2c7	#345C00
tertiary	#F6F6F6	#F6F6F6
base	設定なし	#ffffff
contrast	設定なし	#000000

文章で表すとこんな違いがあります。

• TT2にある「foreground」「background」パレットがTT3にはない
• 「primary」「secondary」の色が違う
• 「tertiary」は一緒
• TT3にある「base」「contrast」パレットがTT3にはない

TT3のテーマの動作としては、背景色は「base」、全般の文字色は「contrast」の色を採用するので全般的には問題なさそうに見えますが、ブロックエディター上でTT2当時の「foreground」「background」に指定した色はTT3には存在しないため、色が出力されず（厳密には出力はされるものの、訪ね当たる色がない）、どの色も指定されない状態、つまり設定がないので全部WordPressベースカラーの黒になってしまいます。

これを補正には、TT3の「theme.json」を以下のように修正して対応するのが一般的です。

• 「foreground」「background」の色指定をTT3のカラーパレットに足す
• TT3の「primary」「secondary」の色指定をTT2のカラーコードに直す

どちらも「そんなのtheme.jsonの書き換えすればいいじゃん」というものなのですが、ちょっと工夫しておかないと後から困るかも知れませんよ！というのをメリット・デメリット、メリットを活かす対処方法として紹介しておきます。

「theme.json」の上書きのためだけに子テーマを使用する？

ブロックテーマでは「theme.json」に記述されている色設定と、WordPress標準の色設定を元に、サイトエディターやブロックエディターでカラーパレットを使って色の設定が簡単に行えるようになっています。

また、サイト全体の基本的な色についても、サイトエディターで特別な色を指定しなければ、同じく「theme.json」に書かれた内容で色の指定が行われています。

この「theme.json」は、有効化しているテーマのファイルを直接編集することで変更できるものの、テーマが更新された際には、変更した部分はすべて上書きされて消えてしまいます。

これを防ぐためには、子テーマを有効化して、「theme.json」を親テーマからコピーして編集するのが一般的ですが、他に何もする必要がなければ、「theme.json」を編集したいがためだけに子テーマを使用するのはどうかと感じますし、子テーマを有効化した段階で、何より親テーマ時に作成や編集をした内容がすべてリセットされ、テンプレートやデザインの編集をし直す必要が出てきますので、おすすめの方法とは言えません。

ではどうしたら？？というの次項以降で説明していきます。

カラーパレットに色設定を追加するメリット・デメリット

前述した、「foreground」「background」の色指定をTT3のカラーパレットに足すという措置に対するメリットデメリットとおすすめの対策について紹介します。

既にサイトが子テーマでの運営をしていて、「theme.json」をコピーして編集できる環境であれば、単純にカラー設定を追加すれば、色は踏襲されます。

これが「theme.json」の最大のメリットではありますので、そうされる方も多いでしょう。

しかしながら、安易にカラーパレットの色設定を追加することにはデメリットもあります。

それは、ブロックエディターなどから選択できるパレット上にいつまでも旧テーマの色設定が残ってしまうことです。

例を挙げると、TT2からTT3への移行だけであれば2つのカラーパレットが追加されるだけなので大した変化ではないものの、今後出てくるTT4やその他「theme.json」を持つテーマへ変更するたびに、旧テーマにあったカラーパレットを追加していくと、どんどんパレットに表示される色が増殖していってしまいます。

また、今回の例でいう「foreground」と「contrast」、「background」と「base」は同じ色なので、パレットには同じ色を持つ別の色の選択肢がどんどん増殖するということになってしまい、使いにくくなっていき、その色は永遠にパレット上に残さなければいけないという状況になります。

ちょっと困りものですよね？

これを解消するには、TT2にあった「foreground」「background」という色をカラーパレットには表示されないようにしつつ、旧テーマの色設定を適用させるという措置をする必要になります。

具体的には、TT2にあってTT3にない色設定は「foreground」「background」ですので、これらをスタイルとして定義（HTML上にスタイルとして出力）することで解決できます。

ただ、そのために子テーマを有効化しているという形ではありませんので、以下のページを参考に自分専用のプラグインを作成して措置を行います。

自分専用のプラグインを作ろう

自作プラグインを有効化したら、以下のコードをプログラムファイル内へ追記します。

/*** TT2のカラーパレットを削除した場合の代替 ***/
if ( !function_exists( 'sample_tt2_color_palette_style' ) ){
function sample_tt2_color_palette_style(){
$custom_css_pre = "
/* TT2 Global Styleの差分 */
/* background */
.has-background-background-color{
	background-color:#ffffff!important;
}

.has-background-color{
	color:#ffffff!important;
}

.has-background-border-color {
	color:#ffffff!important;
}

/* foreground */
.has-foreground-background-color{
	background-color:#000000!important;
}
.has-foreground-color{
	color:#000000!important;
}

.has-foreground-border-color {
	color:#000000!important;
}
";

//タブを除去
$custom_css_deltab = preg_replace('/\t+/', '', $custom_css_pre);
//改行を除去
$custom_css = str_replace(PHP_EOL, '', $custom_css_deltab);
//インラインでCSS出力
wp_add_inline_style( 'global-styles', $custom_css );
wp_add_inline_style( 'wp-edit-blocks', $custom_css );
}
}
add_action('wp_enqueue_scripts','sample_tt2_color_palette_style');
add_action('init','sample_tt2_color_palette_style');

上記のコードは、文字色（.has-〇〇-color）、背景色（.has-〇〇-background-color）、枠線色（.has-〇〇-border-color）について、「theme.json」における色を判別するスラグである「background」「foreground」に対して、それぞれ適用されるスタイルコードを、フロントエンドへは「global-styles」というIDを持つスタイルシートへ、ブロックエディター側へは「wp-edit-blocks」というIDを持つスタイルシートへインラインで出力しています。

インライン出力の詳細については以下のページを参照ください。

もう外部CSSを読み込ませる必要なし？wp_add_inline_styleが超便利！

これで、カラーパレットには表示しないで旧テーマのカラーをフロント・ブロックエディターへ反映させることができます。

「theme.json」上でカラーコードを直接編集するメリット・デメリット

次にTT3の「primary」「secondary」の色指定をTT2のカラーコードに直すという措置に対するメリットデメリットとおすすめの対策について紹介します。

何度か書いているように「theme.json」を編集することで、簡単に一発で全体の色を変更することができます。

TT2とTT3の場合で言えば、冒頭で表にしたように「primary」「secondary」に指定されている色コードが違うので、TT2テーマの時の色に戻すのであればTT3の「theme.json」に書かれている該当箇所のカラーコードをTT2の時のそれに戻せば（具体的には「primary」のカラーコードを「#9DFF20」→「#1a4548」へ、「secondary」のカラーコードを「#345C00」→「#ffe2c7」へ変えれば）解決します。

既に子テーマを有効化して運営しているサイトであれば、親テーマの「theme.json」をコピーして上記部分を編集すればよいでしょう。

逆に現状親テーマで稼働しているサイトの場合、「「theme.json」の上書きのためだけに子テーマを使用する？」で書いたように、そのために子テーマを使用することにはデメリットや追加作業が必要となるためにおすすめの方法ではないため、自分専用のプラグインを作って（「自分専用のプラグインを作ろう」を参照）、そこから措置をすることをおすすめします。

以下がTT3の「theme.json」に書かれているカラーパレット部分だけを上書きするためのコードです。

function sample_change_theme_json_setting( $theme_json ) {
$new_data = array(
	"$schema"=> "https://schemas.wp.org/trunk/theme.json",
	"version"=> 2,
	"settings"=> array(
		"color"=> array(
			"palette"=> array(
				array(
					"color"=> "#ffffff",
					"name"=> "Base",
					"slug"=> "base"
				),
				array(
					"color"=> "#000000",
					"name"=> "Contrast",
					"slug"=> "contrast"
				),
				array(
					"color"=> "#9DFF20",
					"name"=> "Primary",
					"slug"=> "primary"
				),
				array(
					"color"=> "#345C00",
					"name"=> "Secondary",
					"slug"=> "secondary"
				),
				array(
					"color"=> "#F6F6F6",
					"name"=> "Tertiary",
					"slug"=> "tertiary"
				)
			)
		)
	)
);

	return $theme_json->update_with( $new_data );
}

add_filter( 'wp_theme_json_data_theme', 'sample_change_theme_json_setting' );

まずは上記コードを自分専用プラグインのプログラムファイルへ追加します。

そして以下の部分を変更します。

• 「primary」項目の「#9DFF20」→「#1a4548」
• 「secondary」項目の「#345C00」→「#ffe2c7」

これで直接TT3の「theme.json」を直接編集しなくてもカラーパレット部分が置き換わり、「primary」「secondary」にしていた色がTT2の時のものに変わって表示されます。