ブロックエディターのカラーパレットに独自の色を追加する方法（クラシックテーマ・theme.json・プラグイン）

ブロックエディターの色選択に自社やブランドの色を並べるには、テーマの種類に合った場所でパレットを定義します。theme.json を持たないクラシックテーマなら functions.php の add_theme_support( 'editor-color-palette' )、ブロックテーマ（または theme.json を持つテーマ）なら theme.json の settings.color.palette、テーマに手を入れたくない場合はプラグインから wp_theme_json_data_theme フィルターで追加できます。

この記事では、3つの方法の使い分け、WordPress 既定のパレットを残す・隠す設定、パレットの色がフロント側に反映されているかの確かめ方を説明します。内容は2026年10月時点の WordPress 6.9 のソースコードで確認しています。

自分のテーマがどちらの種類か確認する

最初に、使っているテーマがどの方式でパレットを読むかを確認します。

• 管理画面の「外観」に「エディター」（サイトエディター）があればブロックテーマです。
• テーマのフォルダーに theme.json があるかを見ます。クラシックテーマでも theme.json を持つものがあり、その場合はパレットも theme.json の方式で扱われます。

どの方法でも、親テーマのファイルを直接編集すると、テーマの更新で変更が消えます。子テーマを作ってから作業し、本番に反映する前にステージング環境で確認してください。

方法1：クラシックテーマで add_theme_support を使う

theme.json を持たないクラシックテーマでは、after_setup_theme フックで editor-color-palette を登録します。子テーマの functions.php に次のように書きます。

<?php
// 子テーマの functions.php
// 親テーマも同じフックでパレットを登録している場合に上書きできるよう、優先度を 11 にしている
add_action( 'after_setup_theme', function () {
	add_theme_support( 'editor-color-palette', array(
		array(
			'name'  => esc_html__( 'メイン', 'my-child-theme' ),
			'slug'  => 'brand-main',
			'color' => '#1e4f8a',
		),
		array(
			'name'  => esc_html__( 'アクセント', 'my-child-theme' ),
			'slug'  => 'brand-accent',
			'color' => '#d9822b',
		),
		array(
			'name'  => esc_html__( '本文', 'my-child-theme' ),
			'slug'  => 'brand-text',
			'color' => '#222222',
		),
		array(
			'name'  => esc_html__( '背景（淡色）', 'my-child-theme' ),
			'slug'  => 'brand-pale',
			'color' => '#f4f7fb',
		),
	) );

	// パレット以外の色をカラーピッカーで選べないようにする（任意）
	add_theme_support( 'disable-custom-colors' );
}, 11 );

優先度を 11 にしているのは、子テーマの functions.php が親テーマより先に読み込まれるためです。同じ優先度 10 だと、後から実行される親テーマの登録で上書きされます。

disable-custom-colors を加えると、カラーピッカーで任意の色を選ぶ操作ができなくなり、パレットの色だけを使う運用にできます。グラデーションも同様に、editor-gradient-presets で登録し、disable-custom-gradients で自由な指定を止められます。

既定のパレットを残したい場合

theme.json を持たないクラシックテーマが editor-color-palette を登録すると、WordPress 既定のパレット（黒・白・ビビッドレッドなど）は表示されなくなります。既定の色も並べて残したい場合は、同じ after_setup_theme の中で次の1行を加えます。

<?php
add_action( 'after_setup_theme', function () {
	// theme.json を持たないクラシックテーマで、既定のパレットも表示する
	add_theme_support( 'default-color-palette' );
}, 11 );

この default-color-palette は、WordPress 本体の WP_Theme_JSON_Resolver が theme.json の無いテーマについてだけ参照する設定です。theme.json を持つテーマでは効かないため、次の方法2の defaultPalette を使います。グラデーションには同じ仕組みの default-gradient-presets があります。

スラッグの付け方

スラッグは、エディターがブロックに付けるクラス名とCSS変数名に使われます。英小文字とハイフンだけで、色そのものではなく役割で名付けておくと、後で色を変えても既存の記事を直さずに済みます。たとえば blue ではなく brand-main とします。

数字を含むスラッグは、CSS変数名に変換される際に区切りのハイフンが補われ（brand2 が brand-2 になるなど）、想定と違う名前になることがあるため避けたほうが無難です。

方法2：theme.json の settings.color.palette に書く

ブロックテーマ、または theme.json を持つクラシックテーマでは、子テーマの theme.json の settings.color.palette に定義します。WordPress 6.6 以降はスキーマのバージョン3を使います。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"color": {
			"defaultPalette": false,
			"custom": false,
			"palette": [
				{ "slug": "brand-main", "color": "#1e4f8a", "name": "メイン" },
				{ "slug": "brand-accent", "color": "#d9822b", "name": "アクセント" },
				{ "slug": "brand-text", "color": "#222222", "name": "本文" },
				{ "slug": "brand-pale", "color": "#f4f7fb", "name": "背景（淡色）" }
			]
		}
	}
}

子テーマの theme.json は親テーマの theme.json と統合され、子テーマ側で書いた項目が優先されます。

ブロックテーマでは、管理者がサイトエディターの「スタイル」から色を変更すると、その内容がグローバルスタイル（データベースの投稿タイプ wp_global_styles）に保存され、theme.json の値より優先されます。theme.json を書き換えても色が変わらないときは、サイトエディター側で変更されていないかを確認してください。

方法3：プラグインからパレットを追加する

テーマを変えてもパレットを維持したい場合や、複数のサイトに同じ色を配りたい場合は、wp_theme_json_data_theme フィルター（WordPress 6.1 以降）でテーマのデータを上書きできます。wp-content/mu-plugins/ に置くと、プラグイン一覧から誤って無効化されることもありません。

<?php
/**
 * Plugin Name: Brand Color Palette
 * Description: ブロックエディターのパレットにブランドカラーを設定する
 */
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) {
	$data = array(
		'version'  => 3,
		'settings' => array(
			'color' => array(
				'defaultPalette' => false, // 既定のパレットも残すなら true
				'palette'        => array(
					array( 'slug' => 'brand-main', 'color' => '#1e4f8a', 'name' => 'メイン' ),
					array( 'slug' => 'brand-accent', 'color' => '#d9822b', 'name' => 'アクセント' ),
				),
			),
		),
	);
	return $theme_json->update_with( $data );
} );

update_with() は、テーマのデータに新しい値を統合したオブジェクトを返します。パレットの配列はテーマ側の定義と入れ替わる動きになるため、テーマが持つ色も使い続けたい場合は、その色もこの配列に含めてください。ここで使う version の値 3 は WordPress 6.6 以降を前提にしています。

フロント側で色が効いているか確認する

エディターで色を選ぶと、ブロックには has-brand-main-color（文字色）や has-brand-main-background-color（背景色）のようなクラスが付きます。WordPress 5.9 以降は、パレットからこれらのクラスとCSS変数 --wp--preset--color--brand-main を含むスタイルが自動で出力されます。

確認の手順は次のとおりです。

1. 投稿で段落ブロックを作り、パレットの色を文字色と背景色に指定して保存します（下書きのプレビューでかまいません）。
2. フロントのページを開き、開発者ツールで段落にクラスが付いているか、色が適用されているかを確認します。
3. ページのソースで、ID が global-styles-inline-css の style 要素に、パレットのCSS変数とクラスが含まれているかを見ます。

テーマが独自に強い指定（!important など）で文字色を上書きしていると、クラスが付いていても色が変わらないことがあります。また、グローバルスタイルの読み込みを止めているテーマもあります。その場合は、子テーマのCSSでクラスを定義しておきます。

/* 子テーマの style.css: クラスとCSS変数を明示しておく例 */
.has-brand-main-color { color: var(--wp--preset--color--brand-main, #1e4f8a); }
.has-brand-main-background-color { background-color: var(--wp--preset--color--brand-main, #1e4f8a); }

キャッシュ系のプラグインやCDNを使っている場合は、キャッシュを削除してから確認してください。

色を選ぶときのアクセシビリティ

パレットは、どの組み合わせで使われても読めることを意識して選ぶと、運用が楽になります。WCAG 2.2 では、通常の文字と背景のコントラスト比を 4.5:1 以上、大きな文字は 3:1 以上とすることが求められています（達成基準 1.4.3）。ボタンの枠線などのUI部品も、周囲との間に 3:1 以上のコントラストが必要です（達成基準 1.4.11）。

パレットに登録する前に、文字色と背景色の候補をコントラストチェッカーで組み合わせて確認しておくと、記事ごとに読みにくい配色が生まれるのを防げます。

まとめ

• theme.json の無いクラシックテーマは add_theme_support( 'editor-color-palette' )、theme.json を持つテーマは settings.color.palette でパレットを定義する。
• 既定のパレットを残すかどうかは、クラシックテーマでは default-color-palette、theme.json では defaultPalette で決める。
• 子テーマで作業し、クラシックテーマでは親テーマより後に登録されるよう優先度を調整する。
• テーマに依存させたくない場合は、mu-plugins から wp_theme_json_data_theme フィルターで追加できる。
• フロント側でクラスとCSS変数が出力されているかを開発者ツールで確認し、文字と背景のコントラストは WCAG 2.2 の基準を目安にする。

関連記事:

• theme.jsonでブロックエディターのタイポグラフィを設定する方法
• CSSカスタムプロパティで色を動的に切り替える方法