ブロックテーマでサイトの色を統一するには、theme.json の settings.color.palette に色を登録し、不要な既定パレットと自由な色選択を必要に応じて止めます。登録した色はエディターの色選択欄に並び、CSS変数としてテーマのCSSからも使えます。この記事では、パレットの書き方、スラッグの付け方、既定パレットの扱い、サイトエディターで変更した内容との関係、PHPからの参照方法までを順に説明します。
作業の前に
theme.json を直接編集するのは、テーマのファイルを変更する作業です。配布されているテーマを使っている場合は、親テーマを直接編集するとテーマの更新で上書きされるため、子テーマを作ってそこに theme.json を置きます。編集前には現在の theme.json のコピーとサイトのバックアップを取り、ステージング環境で確認してから本番に反映してください。
WordPress 6.6以降では theme.json の version に3を指定します（2026年10月現在）。古いテーマでは2のままのこともありますが、新しく書く場合は3で始めるのが分かりやすい選択です。
カラーパレットを定義する
パレットは settings.color.palette に、色ごとに name（エディターに表示する名前）、slug（識別子）、color（色の値）を並べて書きます。
{
"$schema": "https://schemas.wp.org/wp/6.6/theme.json",
"version": 3,
"settings": {
"color": {
"defaultPalette": false,
"defaultGradients": false,
"custom": false,
"palette": [
{ "name": "ベース", "slug": "base", "color": "#ffffff" },
{ "name": "コントラスト", "slug": "contrast", "color": "#1a1a1a" },
{ "name": "メイン", "slug": "primary", "color": "#1d4e89" },
{ "name": "アクセント", "slug": "accent", "color": "#d9822b" },
{ "name": "薄い背景", "slug": "surface", "color": "#f3f5f8" }
]
}
},
"styles": {
"color": {
"background": "var:preset|color|base",
"text": "var:preset|color|contrast"
},
"elements": {
"link": {
"color": { "text": "var:preset|color|primary" }
}
}
}
}settings 側でパレットを定義し、styles 側で var:preset|color|スラッグ の形で参照して、サイト全体の背景色・文字色・リンク色に割り当てています。色を定義するだけでは見た目は変わらないので、使う場所を styles か、各ブロックの色設定で指定します。
生成されるCSS変数とクラス
パレットの色ごとに、WordPressは次のCSSを出力します。
- CSS変数：
--wp--preset--color--primary - 文字色のクラス：
.has-primary-color - 背景色のクラス：
.has-primary-background-color - 枠線色のクラス：
.has-primary-border-color
エディターで段落の文字色に「メイン」を選ぶと、そのブロックには has-primary-color クラスが付きます。テーマの独自CSSで同じ色を使いたいときは、色の値を直接書かずに color: var(--wp--preset--color--primary); のようにCSS変数を参照しておくと、theme.json の値を変えるだけで全体が追従します。
スラッグは役割で名付ける
スラッグには blue のような色の名前ではなく、primary（メイン）や accent（アクセント）のような役割の名前を付けるのがおすすめです。後でブランドカラーが青から緑に変わっても、primary の値を書き換えるだけで済み、「blue という名前なのに緑」という状態を避けられます。
スラッグを決めるときに注意したい点が2つあります。
1つ目は、スラッグを後から変えないことです。ブロックで色を選ぶと、保存される投稿の中身には色の値ではなくスラッグが記録されます。スラッグを変えると、その色を選んでいた既存のブロックは色を失います。色の値を変えるのは安全ですが、スラッグの変更は既存の記事すべてに影響する作業です。どうしても変える場合は、古いスラッグも残したまま新しいスラッグを追加し、記事の色を順に付け替えてから古いものを削除します。
2つ目は、数字を含むスラッグの書き方です。CSS変数やクラス名を作るとき、スラッグは小文字とハイフンの形（ケバブケース）に変換されます。accent2 のように英字と数字が続くスラッグは、変換で accent-2 になることがあり、CSSで --wp--preset--color--accent2 と書いても当たらない原因になります。最初から accent-2 のようにハイフンで区切っておくと混乱しません。
既定パレットと自由な色選択を止める
defaultPalette を false にすると、WordPressコアが用意している既定の色（黒、白、赤など）がエディターの色選択欄に出なくなります。テーマのパレットだけを見せたい場合に使います。同じように defaultGradients はコアの既定のグラデーションを、custom は色を自由に選べるカラーピッカーを制御します。
custom を false にすると、編集者はパレット外の色を使えなくなり、サイトの配色がそろいやすくなります。ただし、記事ごとに自由な色を使う運用をしているサイトでは、既存の記事で使われている色はそのまま表示されますが、編集時に同じ色を選び直せなくなります。既存記事の色の使われ方を確認してから決めてください。
特定のブロックだけパレットを変える
settings.blocks を使うと、ブロックごとに選べる色を絞れます。たとえばボタンでは背景色にメインとアクセントだけを使わせたい場合は、settings.blocks の中の core/button に color.palette を書き、その2色だけを並べます。ブロック単位でパレットを書くと、そのブロックではサイト全体のパレットの代わりにそちらが表示されます。
サイトエディターで変更した色との関係
サイトエディターの「スタイル」から色やパレットを変更すると、その内容はテーマのファイルではなく、グローバルスタイル（wp_global_styles という投稿タイプ）としてデータベースに保存されます。表示時には theme.json の値の上にグローバルスタイルが重なるため、運営者が画面で変えた色が優先されます。
theme.json でパレットの色を変えたのに反映されない場合、まずサイトエディターの「スタイル」で同じ色が変更されていないかを確認します。変更履歴から以前の状態に戻すことや、既定値に戻すこともできます。運営者が画面上で自由に調整する前提なら、theme.json はあくまで初期値と考え、ファイルとデータベースのどちらを正とするかを運用で決めておくと混乱を防げます。
テーマの styles フォルダーに置いたスタイルバリエーション（配色セット）でも、パレットの色の値を差し替えられます。バリエーションごとに同じスラッグで値だけを変えておくと、運営者が配色を切り替えても、記事のブロックに付いた色は新しい配色に追従します。
子テーマでパレットを定義した場合、親テーマのパレットは基本的に子テーマの定義で置き換わります。親テーマの色の一部を残したいときは、残したい色も子テーマ側にすべて書いてください。
PHPからパレットを参照する
テーマのPHPから登録済みの色を使いたい場合は、wp_get_global_settings() で取得できます。パレットは、コアの既定、テーマ、運営者の追加という出どころごとに分かれた配列で返ります。次の例は、テーマのパレットにある primary の色を、スマートフォンのブラウザーのアドレスバーの色として出力します。
<?php
add_action( 'wp_head', function () {
$palette = wp_get_global_settings( array( 'color', 'palette' ) );
$colors = isset( $palette['theme'] ) ? $palette['theme'] : array();
foreach ( $colors as $item ) {
if ( isset( $item['slug'], $item['color'] ) && 'primary' === $item['slug'] ) {
$value = sanitize_hex_color( $item['color'] );
if ( $value ) {
printf( '<meta name="theme-color" content="%s">' . "\n", esc_attr( $value ) );
}
break;
}
}
} );運営者がサイトエディターでテーマの色を変更している場合、その値を優先したいなら、マージ後の値を返す引数の指定や出どころの扱いを公式ドキュメントで確認してください。sanitize_hex_color() は16進数の色の値だけを通すため、rgb() 形式で定義している色は出力されません。
色の確認と公開前のチェック
パレットを決めたら、エディターとサイトの表示の両方で次の点を確認します。
- 文字色と背景色の組み合わせのコントラストが十分か。本文の文字はWCAGの目安でコントラスト比4.5:1以上を目指す
- リンク色が本文の文字色と見分けられるか
- 既存の記事で使われていた色が、
defaultPaletteやcustomの変更後も意図どおりに表示されるか - ページキャッシュやCDNのキャッシュを削除したあとの表示が正しいか
theme.json の変更が開発中にすぐ反映されないときは、wp-config.php に define( 'WP_DEVELOPMENT_MODE', 'theme' ); を一時的に書くと確認しやすくなります。本番サイトでは外してください。
クラシックテーマでは、theme.json を使わずに add_theme_support( 'editor-color-palette', ... ) でパレットを登録する方法もあります。ただし今後の機能追加は theme.json を中心に進んでいるため、新しく設定するなら theme.json を使う方が管理しやすくなります。
まとめ
- パレットは子テーマの theme.json の
settings.color.paletteに、name・slug・colorで定義する - 色ごとにCSS変数
--wp--preset--color--スラッグと3種類のクラスが出力される。独自CSSでもCSS変数を参照する - スラッグは役割で名付け、後から変えない。数字を含むならハイフンで区切る
defaultPalette・defaultGradients・customで既定パレットと自由な色選択を止められる- サイトエディターでの変更はグローバルスタイルとして theme.json より優先される。反映されないときはまずそこを確認する