ブロックテーマでは自身のカラーパレットを用意して運営したほうがいい理由(考察)

公開日:2023(令和5)年9月19日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPressのデフォルトテーマにもなっているブロック形式で編集するテーマであるブロックテーマ。

この「ブロックテーマ」で基礎的なスタイル(デザイン)の設定を行っているのが「theme.json」というファイルです。

もちろん「theme.json」の記述の中には、ブロックエディターの各所で選択する「色」の設定も含まれていて、WordPress標準の色と共に、カラーパレットから選択できるようになっています。

ブロックエディターでは、この色の設定が「テーマ」「デフォルト」というカテゴリーに分かれていて、下図のように「テーマ」というのが上にあって選択しやすくなっています。

ブロックエディターのカラーパレット

となると、心理的には上の「テーマ」の中から色をポチっとしちゃいますね。

でもこれは、テーマが追加したもの、または、プラグインが追加したものなので、そのテーマから変えたり、プラグインを停止したりした途端に無効になってしまうんです。

前述したようにブロックテーマではこの「テーマ」というカテゴリーに対して、「theme.json」に書かれているカラーパレット設定や、フックを使った色の追加などができるようになっているので、最悪変更前のテーマや停止したプラグインが追加した色を、新しいテーマの「theme.json」に追加すれば維持することはできます。

ただ、変える度に追加していくと..カラーパレットで選択できる色はどんどん増えて気持ち悪くなっていきます。

これを防ぐには、自身用の色を追加して、テーマ変更時などでもそれを移植するというのが一番スマートな方法でしょう。

そこで今回はTT3(Twenty Twenty-Three)テーマを例に、「theme.json」へ独自の色を追加する方法、TT3が追加するカラーを削除する方法、既にTT3のカラーパレットで設定した色を維持する方法などについていろいろと紹介していきます。

本ページは子テーマではなく、自分用のプラグインを作成してカスタマイズすることを前提としています。自分専用のプラグインの作り方については以下を参照ください。

WordPress 6.3の段階では、「テーマ」「デフォルト」というカテゴリーを増やすことができない点と、「theme.json」の色設定の順→プラグインで追加した色設定の順に選択肢が表示される点から、プログラムで色を追加するよりも、テーマの「theme.json」へ色を追加することをおすすめするので、今回はその方法を紹介します。

プラグインからテーマのカラーパレットを変更するコード

ブロックテーマのカラーパレットは「theme.json」というファイルで記述されていて、親テーマのそれを直接編集するか、子テーマへ「theme.json」をコピーして編集するしか上書きする方法がありません。

が、さすがはWordPress、これをプラグイン側から上書きできるフックが用意されているので、今回はそれを利用して独自色を追加していきます。

以下が追加するコードです。

function sample_add_theme_json_color_palette_setting( $theme_json ) {
$new_data = array(
	"$schema"=> "https://schemas.wp.org/trunk/theme.json",
	"version"=> 2,
	"settings"=> array(
		"color"=> array(
			"palette"=> array(
				/*** 自身のカラーパレット ***/
				
				
				/*** TT3のカラーパレット ***/
				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_add_theme_json_color_palette_setting' );

コード内で「/*** 自身のカラーパレット ***/」の下に追加したものが独自のカラーパレットの内容、「/*** TT3のカラーパレット ***/」の下に記述されているものがTT3テーマで予め設定されているカラーパレットの内容です。

「/*** 自身のカラーパレット ***/」の下へ以下のコードを追加することで、独自の色を1つ追加できます(タブの位置を維持するため、ちょっと右寄りなっています)。

				array(
					"color"=> "カラーコード",
					"name"=> "色の名前",
					"slug"=> "色の識別子(スラグ)"
				),

コード中の各所を以下に基づいて指定します。

項目設定方法など
カラーコードカラーパレットで選択した際に適用する色をHex値で入力します
※Hex値・・・#000000などといった#+6桁の数字です
色の名前カラーパレット上で色をマウスオーバーした時に表示される説明です
色の識別子(スラグ)WordPressがカラーコードと色を紐づけるための一意の識別子を入力します
※識別子は半角英数字、「-」「_」が使用できます
※識別子が他と競合する場合は後から読み込まれた方が優先されるようです

例えば、黒色(#000000)を「黒」という名前、「my-black」というスラグで追加する場合は以下のようにします。

				array(
					"color"=> "#000000",
					"name"=> "黒",
					"slug"=> "my-black"
				),

複数の色を追加する場合は、上記のコードの塊を追加して必要事項を変更していきます。

色の追加が終わったら、更新して、投稿編集画面などで色の指定をしてみると、カラーパレットに追加した色があるのを確認できます。

QA Analytics QA Analytics

TT3のカラーパレット(色)を削除する

ここまでの方法では、実際にカラーパレットを表示させると、追加した色の後ろにTT3テーマが追加した色も表示され、選択できるようになっています。

この色は、テーマ固有のものであることが多いため、今後テーマを変更する可能性を考えて、選択できないようにしておくことが望ましいです。

その場合には以下の2つの措置を行う必要がありますので順に行っていきましょう。

  • カラーパレットの設定からTT3固有のカラー設定を削除する
  • 「theme.json」内でTT3固有のカラーを使用している部分を修正する

カラーパレットの設定からTT3固有のカラー設定を削除する

これは、前項で紹介した以下のコードをそのまま使用して行います。

function sample_add_theme_json_color_palette_setting( $theme_json ) {
$new_data = array(
	"$schema"=> "https://schemas.wp.org/trunk/theme.json",
	"version"=> 2,
	"settings"=> array(
		"color"=> array(
			"palette"=> array(
				/*** 自身のカラーパレット ***/
				
				
				/*** TT3のカラーパレット ***/
				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_add_theme_json_color_palette_setting' );

コード中の赤字にした部分がTT2固有のカラー設定部分ですので、すべて必要なければ削除すればOKです。

ただし、TT2(Twenty Twenty-Two)とTT3とで共通のスラグとなっているものがあり、明記はされていないものの恐らくこれは色として今後も必ず使われるものかと思われますので、以下の3色は残すようにしておくとよいかも知れません。

				array(
					"color"=> "#9DFF20",
					"name"=> "Primary",
					"slug"=> "primary"
				),
				array(
					"color"=> "#345C00",
					"name"=> "Secondary",
					"slug"=> "secondary"
				),
				array(
					"color"=> "#F6F6F6",
					"name"=> "Tertiary",
					"slug"=> "tertiary"
				)

TT2とTT3とで「primary」「secondary」スラグに対するカラーコードが異なるので、TT2の色を継承する場合は、カラーコードの変更が必要です

TT3固有のカラーが使われている場所の修正を行う

TT3の「theme.json」では、カラー設定を利用して、サイト全体のスタイルを定義している部分がありますので、TT2固有のカラー設定を削除した際には、それらも編集する必要があります。

以下がサイト全体のスタイルの部分をプラグイン側から上書きするためのコードですので、ご自身のプラグインのプログラムファイルへコピーします。

function sample_change_theme_json_style( $theme_json ) {

$new_data = array(
	"$schema"=> "https://schemas.wp.org/trunk/theme.json",
	"version"=> 2,
	"styles"=> array(
		"blocks"=> array(
			"core/navigation"=> array(
				"elements"=> array(
					"link"=> array(
						":hover"=> array(
							"typography"=> array(
								"textDecoration"=> "underline"
							)
						),
						":focus"=> array(
							"typography"=> array(
								"textDecoration"=> "underline dashed"
							)
						),
						":active"=> array(
							"typography"=> array(
								"textDecoration"=> "none"
							)
						),
						"typography"=> array(
							"textDecoration"=> "none"
						)
					)
				),
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--small)"
				)
			),
			"core/post-author"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--small)"
				)
			),
			"core/post-content"=> array(
				"elements"=> array(
					"link"=> array(
						"color"=> array(
							"text"=> "var(--wp--preset--color--secondary)"
						)
					)
				)
			),
			"core/post-excerpt"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--medium)"
				)
			),
			"core/post-date"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--small)",
					"fontWeight"=> "400"
				),
				"elements"=> array(
					"link"=> array(
						"typography"=> array(
							"textDecoration"=> "none"
						),
						":hover"=> array(
							"typography"=> array(
								"textDecoration"=> "underline"
							)
						)
					)
				)
			),
			"core/post-terms"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--small)"
				)
			),
			"core/post-title"=> array(
				"spacing"=> array(
					"margin"=> array(
						"bottom"=> "1.25rem",
						"top"=> "1.25rem"
					)
				),
				"typography"=> array(
					"fontWeight"=> "400"
				),
				"elements"=> array(
					"link"=> array(
						":hover"=> array(
							"typography"=> array(
								"textDecoration"=> "underline"
							)
						),
						":focus"=> array(
							"typography"=> array(
								"textDecoration"=> "underline dashed"
							)
						),
						":active"=> array(
							"color"=> array(
								"text"=> "var(--wp--preset--color--secondary)"
							),
							"typography"=> array(
								"textDecoration"=> "none"
							)
						),
						"typography"=> array(
							"textDecoration"=> "none"
						)
					)
				)
			),
			"core/comments-title"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--large)"
				),
				"spacing"=> array(
					"margin"=> array(
						"bottom"=> "var(--wp--preset--spacing--40)"
					)
				)
			),
			"core/comment-author-name"=> array(
				"elements"=> array(
					"link"=> array(
						":hover"=> array(
							"typography"=> array(
								"textDecoration"=> "underline"
							)
						),
						":focus"=> array(
							"typography"=> array(
								"textDecoration"=> "underline dashed"
							)
						),
						":active"=> array(
							"color"=> array(
								"text"=> "var(--wp--preset--color--secondary)"
							),
							"typography"=> array(
								"textDecoration"=> "none"
							)
						),
						"typography"=> array(
							"textDecoration"=> "none"
						)
					)
				)
			),
			"core/comment-date"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--small)"
				),
				"elements"=> array(
					"link"=> array(
						":hover"=> array(
							"typography"=> array(
								"textDecoration"=> "underline"
							)
						),
						":focus"=> array(
							"typography"=> array(
								"textDecoration"=> "underline dashed"
							)
						),
						":active"=> array(
							"color"=> array(
								"text"=> "var(--wp--preset--color--secondary)"
							),
							"typography"=> array(
								"textDecoration"=> "none"
							)
						),
						"typography"=> array(
							"textDecoration"=> "none"
						)
					)
				)
			),
			"core/comment-edit-link"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--small)"
				)
			),
			"core/comment-reply-link"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--small)"
				)
			),
			"core/comments-pagination"=> array(
				"spacing"=> array(
					"margin"=> array(
						"top"=> "var(--wp--preset--spacing--40)"
					)
				),
				"elements"=> array(
					"link"=> array(
						"typography"=> array(
							"textDecoration"=> "none"
						)
					)
				)
			),
			"core/pullquote"=> array(
				"border"=> array(
					"style"=> "solid",
					"width"=> "1px 0"
				),
				"elements"=> array(
					"cite"=> array(
						"typography"=> array(
							"fontSize"=> "var(--wp--preset--font-size--small)",
							"fontStyle"=> "normal",
							"textTransform"=> "none"
						)
					)
				),
				"typography"=> array(
					"lineHeight"=> "1.3"
				),
				"spacing"=> array(
					"margin"=> array(
						"bottom"=> "var(--wp--preset--spacing--40) !important",
						"top"=> "var(--wp--preset--spacing--40) !important"
					)
				)
			),
			"core/query"=> array(
				"elements"=> array(
					"h2"=> array(
						"typography"=> array(
							"fontSize"=> "var(--wp--preset--font-size--x-large)"
						)
					)
				)
			),
			"core/query-pagination"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--small)",
					"fontWeight"=> "400"
				),
				"elements"=> array(
					"link"=> array(
						"typography"=> array(
							"textDecoration"=> "none"
						),
						":hover"=> array(
							"typography"=> array(
								"textDecoration"=> "underline"
							)
						)
					)
				)
			),
			"core/quote"=> array(
				"border"=> array(
					"left"=> array(
						"color"=> "inherit",
						"style"=> "solid",
						"width"=> "1px"
					)
				),
				"elements"=> array(
					"cite"=> array(
						"typography"=> array(
							"fontSize"=> "var(--wp--preset--font-size--small)",
							"fontStyle"=> "normal"
						)
					)
				),
				"spacing"=> array(
					"padding"=> array(
						"left"=> "var(--wp--preset--spacing--30)",
						"right"=> "var(--wp--preset--spacing--30)"
					)
				)
			),
			"core/site-title"=> array(
				"elements"=> array(
					"link"=> array(
						":hover"=> array(
							"typography"=> array(
								"textDecoration"=> "underline"
							)
						),
						":focus"=> array(
							"typography"=> array(
								"textDecoration"=> "underline dashed"
							)
						),
						":active"=> array(
							"color"=> array(
								"text"=> "var(--wp--preset--color--secondary)"
							),
							"typography"=> array(
								"textDecoration"=> "none"
							)
						),
						"typography"=> array(
							"textDecoration"=> "none"
						)
					)
				),
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--medium)",
					"fontWeight"=> "normal",
					"lineHeight"=> "1.4"
				)
			),
			"core/separator"=> array(
				"css"=> " &:not(.is-style-wide):not(.is-style-dots):not(.alignwide):not(.alignfull){width: 100px}"
			)
		),
		"color"=> array(
			"background"=> "var(--wp--preset--color--base)",
			"text"=> "var(--wp--preset--color--contrast)"
		),
		"elements"=> array(
			"button"=> array(
				"border"=> array(
					"radius"=> "0"
				),
				"color"=> array(
					"background"=> "var(--wp--preset--color--primary)",
					"text"=> "var(--wp--preset--color--contrast)"
				),
				":hover"=> array(
					"color"=> array(
						"background"=> "var(--wp--preset--color--contrast)",
						"text"=> "var(--wp--preset--color--base)"
					)
				),
				":focus"=> array(
					"color"=> array(
						"background"=> "var(--wp--preset--color--contrast)",
						"text"=> "var(--wp--preset--color--base)"
					)
				),
				":active"=> array(
					"color"=> array(
						"background"=> "var(--wp--preset--color--secondary)",
						"text"=> "var(--wp--preset--color--base)"
					)
				),
				":visited"=> array(
					"color"=> array(
						"text"=> "var(--wp--preset--color--contrast)"
					)
				)
			),
			"h1"=> array(
				"typography"=> array(
					"fontSize"=> "3.625rem",
					"lineHeight"=> "1.2"
				)
			),
			"h2"=> array(
				"typography"=> array(
					"fontSize"=> "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)",
					"lineHeight"=> "1.2"
				)
			),
			"h3"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--x-large)"
				)
			),
			"h4"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--large)"
				)
			),
			"h5"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--medium)",
					"fontWeight"=> "700",
					"textTransform"=> "uppercase"
				)
			),
			"h6"=> array(
				"typography"=> array(
					"fontSize"=> "var(--wp--preset--font-size--medium)",
					"textTransform"=> "uppercase"
				)
			),
			"heading"=> array(
				"typography"=> array(
					"fontWeight"=> "400",
					"lineHeight"=> "1.4"
				)
			),
			"link"=> array(
				"color"=> array(
					"text"=> "var(--wp--preset--color--contrast)"
				),
				":hover"=> array(
					"typography"=> array(
						"textDecoration"=> "none"
					)
				),
				":focus"=> array(
					"typography"=> array(
						"textDecoration"=> "underline dashed"
					)
				),
				":active"=> array(
					"color"=> array(
						"text"=> "var(--wp--preset--color--secondary)"
					),
					"typography"=> array(
						"textDecoration"=> "none"
					)
				),
				"typography"=> array(
					"textDecoration"=> "underline"
				)
			)
		),
		"spacing"=> array(
			"blockGap"=> "1.5rem",
			"padding"=> array(
				"top"=> "var(--wp--preset--spacing--40)",
				"right"=> "var(--wp--preset--spacing--30)",
				"bottom"=> "var(--wp--preset--spacing--40)",
				"left"=> "var(--wp--preset--spacing--30)"
			)
		),
		"typography"=> array(
			"fontFamily"=> "var(--wp--preset--font-family--system-font)",
			"fontSize"=> "var(--wp--preset--font-size--medium)",
			"lineHeight"=> "1.6"
		)
	)
);

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

add_filter( 'wp_theme_json_data_theme', 'sample_change_theme_json_style' );

「theme.json」でカラー設定を行った色を流用する場合は

var(--wp--preset--color--〇〇)

という記述をすることになっていて、例えば「secondary」というスラグを持つ色であれば

var(--wp--preset--color--secondary)

と記述するので、前項で確実にTT3固有の色「base」「contrast」を削除した場合には、それになっている部分を修正して他の色へ変更する必要がありますから、追加した自身の色の中から選んで変更しておくといいでしょう。

既に設定している色を表示上のみ継承する方法

最後に、もう既に何も気づかずに過去の投稿などでテーマ固有のカラー設定を選択してコンテンツを作成してしまった方は、テーマ固有のカラー設定を削除することで、その部分の色が失われてしまいます(一般的には黒になります)。

また、それを懸念して、カラー設定を残してしまうと永遠にそのカラー設定を残し続けることになり、冒頭で説明した通り、テーマを変更するごとにカラーパレットの内容が増殖していってしまいますから具合が悪いです。

そこで、カラーパレットには表示させずに、フロントエンド(閲覧画面)とブロックエディター側では色を適用するという措置をして、過去のコンテンツには影響がないようにします。

TT3テーマ固有のカラー設定でこれを行う場合には、以下のコードを自分用プラグインのプログラムファイルへ追加します。

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

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

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

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

.has-contrast-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_tt3_color_palette_style');
add_action('init','sample_tt3_color_palette_style');

上記は「base」と「contrast」というスラグを持つTT3固有のカラー設定に対して、フロントエンドとブロックエディター側へ色を適用させるためのコードです。

お察しの通り、色のスラグに基づいて、「文字色」「背景色」「枠線色」を出力させて適用させることで、ブロックエディターのカラーパレットには表示されず、かつ、フロントエンドやブロックエディター上では色が適用されるようになりますから、その他の色も削除した際にはそれらを追加すればOKです。


必要な設定は以上です。

このように、独自の色を追加して、デフォルトの色は削除しておくようにしておけば、カラーパレットがごちゃごちゃになったり、後から削除したり表示だけを残す措置が軽減されますから、できるだけ早めに措置をしておくことを、経験則からもおすすめします。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)
ブロックテーマでサイトの背景画像を設定する5つの方法