Cocoonカラーパレットの設定方法／色を追加・変更するカスタマイズ

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

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

Cocoon設定で簡単にできるものと、PHPを編集する方法の２つをご紹介します。

ワードプレスのカラーパレット／デフォルト色

ブロックエディタの投稿編集画面から色が変更できるタイプのブロックメニュー（見出しボックス等）を選択すると、このようにカラーピッカー展開されます。

色設定でカラーピッカーから色を選択することで、枠の色、背景色、文字色が設定できるようになっています。

画像の通り、デフォルトの設定ではほとんどがくっきりはっきりとした明度の原色ですね。サイトのイメージカラーを統一している場合など、お好みの色に変更したい場合があるのではないでしょうか。

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

ワードプレスのカラーパレットの色を変更する方法

Cocoonカラーパレットの色を変えるには２つの方法があります。

Cocoon設定での変更（６色）

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

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

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

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

PHPコードを使用した変更（２４色）

次はfunctions.phpをカスタマイズする方法。

こちらはCocoonのスキン“SILK”を作成されたろこさんの『SILKの特徴や使い方』ページのカスタマイズ例からコードを流用させていただき、私がカラーコードを変更したものです。（現在、引用サイトが削除され閲覧できなくなりました）

PHPは動的にWebページを生成することができる言語で、編集を誤るとページに重大な不具合が起こる可能性があります。

この方法はPHPを使うため慎重に操作する必要はありますが、子テーマにコピペしてカラーコードを編集するだけなので難しくはありません。必要なくなったら、追加したコードをまるごと消せば元に戻るので安全。親テーマの更新でも上書きされず、子テーマを使うメリットです。

Cocoon／PHPコードを貼り付ける場所（子テーマ使用）

PHPコードを貼り付ける場所は、「外観」→「テーマファイルエディター」→「Theme Functions (functions.php)」　です。

子テーマを使用するので、右上の編集するテーマを選択：Cocoon.Childを選択しているか必ず確認しましょう。

カラーパレットを変更するPHPコード

こちらのカラーパレットを変更するPHPコードを「Theme Functions (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',
	'cocoon-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;
});

PHPコードの意味

このコードは、ワードプレス（Cocoon）の「フック」と呼ばれる機能を使用しています。

このコードの動作は以下の通り。

1. add_filter() 関数
   • この関数は、フック機能を使用して特定のイベントやアクションに対してフィルターを追加します。この場合、block_editor_color_palette_colors フィルターフックに対してコールバック関数を追加しています。
2. コールバック関数
   • コールバック関数は、block_editor_color_palette_colors フィルターが呼び出された際に実行されます。このコードでは新しいカラーパレットを定義し元のカラーパレットの一部を置き換えています。
3. $skin_colors 配列
   • これは変更したい特定の色を定義した配列です。各色は連想配列で、キーは色の識別子（slug）、値は新しいカラーコードです。
4. foreach ループ
   • $skin_colors 配列内の各色に対して、元のカラーパレットの中から一致する色を見つけ、その色を新しいカラーコードに変更しています。
5. array_search() 関数
   • これは、指定された値（この場合は色の識別子）を配列内で検索し、最初に見つかったキーを返す関数です。このコードでは元のカラーパレットから指定された色の slug を検索しています。
6. カラーパレットの変更
   • $key が見つかった場合、元のカラーパレットの対応する色のキーを使用して、その色のカラーコードを新しいカラーコードに置き換えています。

最終的に、変更が加えられた新しいカラーパレットが返され、ワードプレスのブロックエディタで使用されます。このコードを使用することで、ワードプレスのブロックエディタで使える色が変更されます。たとえば、「赤」が#e60033に、「ピンク」が#efcdc4になります。

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

あとは自分好みに色を変更してみてください。

参考サイト　WEB見本　原色大辞典ーHTMLカラーコード

Cocoon設定でカラーパレットの色を追加・変更するふたつの方法を比較

どちらの方法でも、途中でカラーを変更すると過去に作成した記事も含め、サイト内にすべて新しいカラーが一括適用されます。

まとめ

当記事で使用した「functions.php」はワードプレスの機能を追加できるファイル。

Cocoonには編集するためのフックが随所設定されており、PHPをマスターするとこういった機能面でのカスタマイズが可能になります。

今回はカラーパレットの既存のカラーを上書きして変更しましたが、既存のカラーを残したままカラーを追加するといったカスタマイズも可能です。

デザインを整えるCSSと比較するとハードルが高いように感じますが、PHPが使えるようになるとさらにブログ作りが楽しくなりますよ。

この記事は以上です。