WordPressクラシックテーマでブロックエディターのカラーパレットに色を追加する方法

ブロックエディターのカラーパレットに色（オリジナルカラー）を追加する方法をご紹介します。

カラーパレットに色を追加する方法は、

・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 は置かない、が鉄則です。

色を追加する方法

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' );

これでエディターのカラーパレットにオリジナルカラーが追加されます。

デフォルトカラーを残しつつ色を追加する方法

ここでひとつ注意点があります。

上記の方法を使うと、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です）。

まとめ

クラシックテーマのカラーパレットに色を追加するときは、 functions.php に追加一択です。

テーマの種類	カラーパレットの追加方法
クラシックテーマ	functions.php に追加
ブロックテーマ	theme.json に追加

また、デフォルトを残したい場合はデフォルトカラー一覧を自前で用意する必要があります。
少し手間ですが、一度書いてしまえば使い回せます。

よく使う色や、テーマカラーを設定しておくと便利なので、オススメです。