Gutenbergの文字・背景色にカスタムカラーを登録する方法

WordPress 5.0から搭載された新エディタ「Gutenberg」の文字色、背景色に自分の好きな色をカスタム登録する方法を紹介します。

プラグインを使わずにfunctions.phpを編集して好きな色を追加登録します。

テーマがCocoonの場合は少しコードが変わります↓

【Cocoon】ブロックエディタに好きな色を登録する方法

...

web-ashibi.net

2019.07.27

旧エディタ（Classic Editor）はこちらの記事をどうぞ↓

【WordPress】エディタの文字・背景色に好きな色をカスタム登録する方法

...

web-ashibi.net

2018.12.09

functions.phpを編集する

以下のコードをfunctions.phpにコピペするだけで色を追加できます。文字色も背景色も共通のコードなので、両方に反映されます。

add_theme_support( 'editor-color-palette', array(
  array(
    'name'  => __( 'ピンク', 'genesis-sample' ),
    'slug'  => 'pink',
    'color'	=> '#f78da7',
  ),
  array(
    'name'  => __( 'レッド', 'genesis-sample' ),
    'slug'  => 'red',
    'color' => '#cf2e2e',
  ),
  array(
    'name'  => __( 'オレンジ', 'genesis-sample' ),
    'slug'  => 'orange',
    'color' => '#ff6900',
       ),
  array(
    'name'  => __( '琥珀', 'genesis-sample' ),
    'slug'  => 'amber',
    'color' => '#fcb900',
       ),
  array(
    'name'  => __( '薄いグリーンシアン', 'genesis-sample' ),
    'slug'  => 'light-green-cyan',
    'color' => '#7bdcb5',
       ),
  array(
    'name'  => __( '鮮やかなグリーンシアン', 'genesis-sample' ),
    'slug'  => 'vivid-green-cyan',
    'color' => '#00d084',
       ),
  array(
    'name'  => __( '淡いシアンブルー', 'genesis-sample' ),
    'slug'  => 'pale-cyan-blue',
    'color' => '#8ed1fc',
       ),
  array(
    'name'  => __( '鮮やかなシアンブルー', 'genesis-sample' ),
    'slug'  => 'vivid-cyan-blue',
    'color' => '#0693e3',
       ),
  array(
    'name'  => __( 'ライト・グレー', 'genesis-sample' ),
    'slug'  => 'light-gray',
    'color' => '#eeeeee',
       ),
  array(
    'name'  => __( 'シアンブルーグレー', 'genesis-sample' ),
    'slug'  => 'cyan-blue-gray',
    'color' => '#abb8c3',
       ),
  array(
    'name'  => __( '濃灰', 'genesis-sample' ),
    'slug'  => 'dark-gray',
    'color' => '#313131',
       ),
  array(
    'name'  => __( 'カラー１', 'genesis-sample' ),
    'slug'  => 'color1',
    'color' => '#e36b6d',
       ),
  array(
    'name'  => __( 'カラー２', 'genesis-sample' ),
    'slug'  => 'color2',
    'color' => '#6b9de3',
       ),
  array(
    'name'  => __( 'カラー３', 'genesis-sample' ),
    'slug'  => 'color3',
    'color' => '#7d6be3',
       ),
 	array(
    'name'  => __( 'カラー４', 'genesis-sample' ),
    'slug'  => 'color4',
    'color' => '#e3836b',
       ),
 	array(
    'name'  => __( 'カラー５', 'genesis-sample' ),
    'slug'  => 'color5',
    'color' => '#de81ce',
       ),
) );

「カラー１〜カラー５」が新しく追加した部分です。カラーコードだけ変更すればオッケーですが、好きな名前にしても構いません。

カラーコードを調べるのはこういうサイトが便利です↓

HTMLカラーコード

HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

html-color-codes.info

色を増やす・減らしたい場合

色を増やしたい場合も自由に追加することができます。コードの以下の部分をどんどん追加していく感じです↓

array(
  'name'  => __( 'カラー１', 'genesis-sample' ),
  'slug'  => 'color1',
  'color' => '#e36b6d',
),

逆に表示する色を減らしたい場合も、コードを削除するだけ。デフォルトで入っている色を削除しても問題ありません。

例えばこちらのコードだと↓

add_theme_support( 'editor-color-palette', array(
  array(
    'name'  => __( 'カラー１', 'genesis-sample' ),
    'slug'  => 'color1',
    'color' => '#e36b6d',
       ),
  array(
    'name'  => __( 'カラー２', 'genesis-sample' ),
    'slug'  => 'color2',
    'color' => '#6b9de3',
       ),
  array(
    'name'  => __( 'カラー３', 'genesis-sample' ),
    'slug'  => 'color3',
    'color' => '#7d6be3',
       ),
 	array(
    'name'  => __( 'カラー４', 'genesis-sample' ),
    'slug'  => 'color4',
    'color' => '#e3836b',
       ),
 	array(
    'name'  => __( 'カラー５', 'genesis-sample' ),
    'slug'  => 'color5',
    'color' => '#de81ce',
       ),
) );

こんな感じで表示されるカラーを少なくすることもできます。

好きな色を登録しておくと便利なので、皆さんもぜひカスタムしてみてください。