Cocoon／カラーパレットの色をデフォルトから追加・変更する２つの方法

ワードプレスで記事を書くときに使うカラーパレットについて。

文字の色を変えるとき、ボックスの枠や背景色を変えるときなど誰もが使うところですね！今回はこのパレットの色を変えるカスタマイズについて書いていきます。

カラーパレットのデフォルト色
カラーパレットの色を変える方法
1. １.Cocoon設定で色を追加
2. ２.functions.phpをカスタマイズする方法
デフォルトカラーを変更するPHPコード
ふたつの方法を比較してみる
カラーコードを調べるときに役立つサイト

カラーパレットのデフォルト色

ブロックエディタの記事の編集画面からカラーパレットを開くとこんな感じで展開されるかと思います。

見てお分かりの通り、ほとんどがくっきりはっきりとした明度の原色ですね。

私はくすんだ感じの色が好きなので、自分好みに変えたいな～

そんなときに色を変える方法があるよ！

もう少し目に優しい色にデフォルトのカラーパレットを変更してみたいと思います。

カラーパレットの色を変える方法

２つの方法をご紹介します。

Cocoon設定で色を追加
functions.phpをカスタマイズする

１.Cocoon設定で色を追加

まずはコードをいじる必要がなく、Cocoon設定からとても簡単にできる方法です。

Cocoon設定 →　エディター　を開くと下の方に「拡張カラーパレット」の項目があるので、色を選択をクリックしてここで色を設定します。

色の設定の仕方はカラーコードを直接入力するか、コードが分からなくてもこのカラーバーを自分で動かして色味を調整しながら設定することもできます。

追加できるのは最大６色になります。

最後に保存を選択して完了です。簡単！

２.functions.phpをカスタマイズする方法

こちらはCocoonのスキン“SILK”を作成されたろこさんの『SILKの特徴や使い方』ページのカスタマイズ例からコードを引用させていただき、私がカラーコードを変更したものです。

豊富なカスタマイズ情報が実用的でとてもためになります。ありがとうございます。

この方法は中級編になりますが、作業的には子テーマにコピペしてカラーコードを編集するだけなので難しくはありません。

子テーマを使用し、カスタマイズ前にバックアップをとりましょう。

STEP1
function.phpにコードを張り付ける
コピペする場所はCocoonの場合はCocoon.Child（子テーマ）を選択し、外観　→　テーマファイルエディター　→　テーマのための関数　です。
コードは下記に記載します。
STEP2
各カラーコードを設定する
それぞれカラーコードを入力します。（半角のみ使えます）
STEP3
完成！

デフォルトカラーを変更するPHPコード

こちらを「テーマのための関数（.functions.php）」に貼り付けます。

//カラーパレット24色を変更
add_filter('block_editor_color_palette_colors', function($colors) {
  $skin_colors = [
    'red' => '#e60033',
'pink' => '#efcdc4',
'purple' => '#fce4d6',
'deep' => '#434b56',
'indigo' => '#626f82',
'blue' => '#a6b8c2',
'light-blue' => '#f4f4f4',
'cyan' => '#f5f1e8',
'teal' => '#909792',
'green' => '#afbdb0',
'light-green' => '#b7d4be',
 'lime' => '#ccdfcc',
'yellow' => '#fed67d',
'amber' => '#fff3b8',
'orange' => '#979286',
'deep-orange' => '#d7c9aa',
'brown' => '#b2a28e',
'grey' => '#e0e0d8',
'black' => '#666666',
'white' => '#ffffff',
'watery-blue' => '#eff1f5',
'watery-yellow' => '#fff7cc',
'watery-red' => '#fdf2f2',
'watery-green' => '#ebf8f4'
  ];
  
  foreach ($skin_colors as $slug => $color) {
    $key = array_search($slug, array_column($colors, 'slug'));
    if ($key !== false) {
      $colors[$key]['color'] = $color;
    }
  }
  
  return $colors;
});

functions.phpとは

WordPressのテーマの設定やカスタマイズを行うときに編集するファイル。PHPをマスターするとわざわざプラグインを使用しなくてもfunctions.phpに記述するだけでできることも多く便利です！

このコードをそのままコピペすると下記のカラーに変わっているはずです。