ねこの手ラボ 
ブロックエディターのカラーパレットに色（オリジナルカラー）を追加する方法をご紹介します。
カラーパレットに色を追加する方法は、
・theme.json で追加する方法
・functions.php で追加する方法
の２種類あります。
しかし、クラシックテーマで色を追加する場合は、functions.php を使う方法一択です。
今回はクラシックテーマのブロックエディタのカラーパレットに、色だけを追加する方法をご紹介します。
クラシックテーマとブロックテーマで方法が違う
WordPressのテーマには大きく2種類あります。
- ブロックテーマ（Full Site Editing対応）：
theme.jsonで管理 - クラシックテーマ（従来型）：
functions.phpで管理
「カラーパレットを追加したいなら theme.json に書けばいいんでしょ？」
と思いがちですが、クラシックテーマでそれをやると問題が起きます。
やらないほうがいい方法：theme.jsonで追加する
クラシックテーマのルートに theme.json を置いてカラーを定義する方法です。
一見うまくいくように見えますが、theme.json を置いた瞬間にWordPressはそのテーマをブロックテーマとして認識します。
その結果、エディターのスタイル適用のされ方が変わり、editor-style.css の効き方がおかしくなったり、編集画面のフォントが突然明朝体になったりと、想定外の崩れが発生します。
クラシックテーマには theme.json は置かない方が良いです。
はじめよくわかってなくて、theme.json を設置したら、編集画面のフォントが変わってしまってびっくり！（速攻で撤去した）
クラシックテーマに theme.json を置くと、WordPressが「ブロックテーマだ」と認識してエディターのスタイル適用のされ方が変わってしまうようです。
色を追加する方法
１）functions.phpの追記
クラシックテーマでカラーパレットを追加するには、functions.php に追記する方法を使います。
functions.php にadd_theme_support( 'editor-color-palette' ) を使って以下を追記します。
function add_custom_color_palette() {
add_theme_support( 'editor-color-palette', array(
array( 'name' => 'ブランドカラー', 'slug' => 'brand', 'color' => '#e94f37' ),
array( 'name' => 'サブカラー', 'slug' => 'brand-sub', 'color' => '#f5a623' ),
) );
}
add_action( 'after_setup_theme', 'add_custom_color_palette' );これでエディターのカラーパレットにオリジナルカラーが追加されます。
2）CSSの追記
functions.php への追記だけでは、カラーパレットに色の選択肢が追加されるだけです。
実際にエディターやフロントエンドでその色が反映されるようにするには、CSSの追記も必要です。
WordPressが自動生成するクラス名は以下の形式です。
- テキストカラー：
has-{slug}-color - 背景色：
has-{slug}-background-color
slug に指定した値がそのままクラス名に使われるので、先ほどの例（brand / brand-sub）であれば、以下のCSSを追記します。
css
/* テキストカラー */
.has-brand-color {
color: #e94f37;
}
.has-brand-sub-color {
color: #f5a623;
}
/* 背景色 */
.has-brand-background-color {
background-color: #e94f37;
}
.has-brand-sub-background-color {
background-color: #f5a623;
}このCSSは style.css（またはエンキューしているCSSファイル）に追記します。
補足：エディター内にも反映させたい場合
上記だけではフロントエンド（実際のサイト表示）にしか反映されません。エディターの編集画面でもプレビューとして色を確認したい場合は、add_editor_style() でエディター用CSSを読み込ませる必要があります。
デフォルトカラーを残しつつ色を追加する方法
１）functions.phpへの追記
ここでひとつ注意点があります。
上記の方法を使うと、WordPressのデフォルトカラーが消えて、自分で定義した色だけになります。
「デフォルトは残しておきたい」という場合は、デフォルトカラーの一覧を自分でコピーして並べるという力技が必要です。
function add_custom_color_palette() {
add_theme_support( 'editor-color-palette', array(
// 追加カラー
array( 'name' => '赤', 'slug' => 'red', 'color' => '#ff0000' ),
array( 'name' => 'ピンク', 'slug' => 'pink', 'color' => '#ffc7ca' ),
array( 'name' => 'ライトグリーン', 'slug' => 'light-green', 'color' => '#ccffcc' ),
array( 'name' => 'スカイブルー', 'slug' => 'sky-blue', 'color' => '#ccffff' ),
array( 'name' => 'ライトイエロー', 'slug' => 'light-yellow', 'color' => '#ffff99' ),
array( 'name' => 'ライトグレー', 'slug' => 'light-gray', 'color' => '#CCC' ),
// --- WordPressデフォルトカラー ---
array( 'name' => 'ブラック', 'slug' => 'black', 'color' => '#000000' ),
array( 'name' => 'シアンブルーシェード', 'slug' => 'cyan-bluish-gray', 'color' => '#abb8c3' ),
array( 'name' => 'ホワイト', 'slug' => 'white', 'color' => '#ffffff' ),
array( 'name' => 'ペールピンク', 'slug' => 'pale-pink', 'color' => '#f78da7' ),
array( 'name' => 'ビビッドレッド', 'slug' => 'vivid-red', 'color' => '#cf2e2e' ),
array( 'name' => 'ルミナスビビッドオレンジ', 'slug' => 'luminous-vivid-orange','color' => '#ff6900' ),
array( 'name' => 'ルミナスビビッドアンバー', 'slug' => 'luminous-vivid-amber', 'color' => '#fcb900' ),
array( 'name' => 'ライトグリーンシアン', 'slug' => 'light-green-cyan', 'color' => '#7bdcb5' ),
array( 'name' => 'ビビッドグリーンシアン','slug' => 'vivid-green-cyan', 'color' => '#00d084' ),
array( 'name' => 'ペールシアンブルー', 'slug' => 'pale-cyan-blue', 'color' => '#8ed1fc' ),
array( 'name' => 'ビビッドシアンブルー', 'slug' => 'vivid-cyan-blue', 'color' => '#0693e3' ),
array( 'name' => 'ビビッドパープル', 'slug' => 'vivid-purple', 'color' => '#9b51e0' ),
) );
}
add_action( 'after_setup_theme', 'add_custom_color_palette' );デフォルトカラーのslugはWordPressのコアで定義されているものをそのまま使っています。
追加カラーのslugが被らないよう注意が必要です。
（上記の例では light-green-cyan と light-green で別slugなのでOKです）。
このような感じで、自分の好きな数だけ設定できるよ！
2）CSSの追記
functions.php への追記だけではカラーパレットに色の選択肢が追加されるだけです。実際に色を反映させるにはCSSの追記も必要です。
追加カラー分とデフォルトカラー分、両方まとめて記述しておきましょう。
css
/* ========================================
追加カラー
======================================== */
/* テキストカラー */
.has-red-color { color: #ff0000; }
.has-pink-color { color: #ffc7ca; }
.has-light-green-color { color: #ccffcc; }
.has-sky-blue-color { color: #ccffff; }
.has-light-yellow-color { color: #ffff99; }
.has-light-gray-color { color: #cccccc; }
/* 背景色 */
.has-red-background-color { background-color: #ff0000; }
.has-pink-background-color { background-color: #ffc7ca; }
.has-light-green-background-color { background-color: #ccffcc; }
.has-sky-blue-background-color { background-color: #ccffff; }
.has-light-yellow-background-color { background-color: #ffff99; }
.has-light-gray-background-color { background-color: #cccccc; }
/* ========================================
WordPressデフォルトカラー
======================================== */
/* テキストカラー */
.has-black-color { color: #000000; }
.has-cyan-bluish-gray-color { color: #abb8c3; }
.has-white-color { color: #ffffff; }
.has-pale-pink-color { color: #f78da7; }
.has-vivid-red-color { color: #cf2e2e; }
.has-luminous-vivid-orange-color { color: #ff6900; }
.has-luminous-vivid-amber-color { color: #fcb900; }
.has-light-green-cyan-color { color: #7bdcb5; }
.has-vivid-green-cyan-color { color: #00d084; }
.has-pale-cyan-blue-color { color: #8ed1fc; }
.has-vivid-cyan-blue-color { color: #0693e3; }
.has-vivid-purple-color { color: #9b51e0; }
/* 背景色 */
.has-black-background-color { background-color: #000000; }
.has-cyan-bluish-gray-background-color { background-color: #abb8c3; }
.has-white-background-color { background-color: #ffffff; }
.has-pale-pink-background-color { background-color: #f78da7; }
.has-vivid-red-background-color { background-color: #cf2e2e; }
.has-luminous-vivid-orange-background-color { background-color: #ff6900; }
.has-luminous-vivid-amber-background-color { background-color: #fcb900; }
.has-light-green-cyan-background-color { background-color: #7bdcb5; }
.has-vivid-green-cyan-background-color { background-color: #00d084; }
.has-pale-cyan-blue-background-color { background-color: #8ed1fc; }
.has-vivid-cyan-blue-background-color { background-color: #0693e3; }
.has-vivid-purple-background-color { background-color: #9b51e0; }このCSSを style.css（またはエンキューしているCSSファイル）に追記します。
なぜCSSが必要なのか
add_theme_support( 'editor-color-palette' ) がやることは「カラーパレットに選択肢を表示する」だけです。色を選んだときに実際に適用されるCSSは、自分で書く必要があります。
WordPressは色が選択されると has-{slug}-color（テキスト）や has-{slug}-background-color（背景）というクラスをHTMLに付与します。
このクラスに対するスタイルがないと、見た目に何も反映されません。
デフォルトカラーを再定義したことによる注意点
WordPressのデフォルトカラーは、コアのCSSで has-black-color などのスタイルがあらかじめ定義されています。
しかし add_theme_support( 'editor-color-palette' ) で色を上書き登録すると、デフォルトカラーの登録ごと差し替わります。WordPressはもうデフォルトカラーを「知らない状態」になるため、コアCSSとの紐付けも期待できなくなります。
結果として、追加カラー・デフォルトカラー問わず、登録したすべての色のCSSを自分で書く必要があります。
まとめ
クラシックテーマのカラーパレットに色を追加するときは、 functions.php に追加一択です。
| テーマの種類 | カラーパレットの追加方法 |
|---|---|
| クラシックテーマ | functions.php に追加 |
| ブロックテーマ | theme.json に追加 |
また、デフォルトを残したい場合はデフォルトカラー一覧を自前で用意する必要があります。
少し手間ですが、一度書いてしまえば使い回せます。
よく使う色や、テーマカラーを設定しておくと便利なので、オススメです。