WordPress

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

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

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

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

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

functions.phpを編集する

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'  => __( 'カラー1', 'genesis-sample' ),
    'slug'  => 'color1',
    'color' => '#e36b6d',
       ),
  array(
    'name'  => __( 'カラー2', 'genesis-sample' ),
    'slug'  => 'color2',
    'color' => '#6b9de3',
       ),
  array(
    'name'  => __( 'カラー3', 'genesis-sample' ),
    'slug'  => 'color3',
    'color' => '#7d6be3',
       ),
 	array(
    'name'  => __( 'カラー4', 'genesis-sample' ),
    'slug'  => 'color4',
    'color' => '#e3836b',
       ),
 	array(
    'name'  => __( 'カラー5', 'genesis-sample' ),
    'slug'  => 'color5',
    'color' => '#de81ce',
       ),
) );

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

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

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

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

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

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

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

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

add_theme_support( 'editor-color-palette', array(
  array(
    'name'  => __( 'カラー1', 'genesis-sample' ),
    'slug'  => 'color1',
    'color' => '#e36b6d',
       ),
  array(
    'name'  => __( 'カラー2', 'genesis-sample' ),
    'slug'  => 'color2',
    'color' => '#6b9de3',
       ),
  array(
    'name'  => __( 'カラー3', 'genesis-sample' ),
    'slug'  => 'color3',
    'color' => '#7d6be3',
       ),
 	array(
    'name'  => __( 'カラー4', 'genesis-sample' ),
    'slug'  => 'color4',
    'color' => '#e3836b',
       ),
 	array(
    'name'  => __( 'カラー5', 'genesis-sample' ),
    'slug'  => 'color5',
    'color' => '#de81ce',
       ),
) );
こんな感じで表示されるカラーを少なくすることもできます。

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

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

タイトルとURLをコピーしました