カラーパレットの色を変更するカスタマイズ／Cocoon設定とPHPの２つの方法

ワードプレスのカラーパレットはデザインを整えるために必要。デフォルトで提供されている色は便利ですが、オリジナルのカラーを使いたい場合もありますよね。

今回は、ワードプレスのデフォルト色の確認方法や、テーマ「Cocoon」を使用したカラーパレットの変更方法を詳しくご紹介します。また、PHPコードを使ったカスタマイズも取り上げ、どちらの方法が最適かを比較していきます。

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

ワードプレスにはデフォルトのカラーパレットが設定されており、テーマによってはこのパレットが編集できるようになっています。

通常、ワードプレスのブロックエディタ（Gutenberg）では、選択可能な色の一覧が表示され、これが「デフォルト色」です。色設定でカラーパレットから色を選択することで、枠の色、背景色、文字色が設定できるようになっています。

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

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

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

カラーパレットの変更には、テーマの設定を利用するか、直接コードを編集する２つの方法があります。

1. Cocoon設定での変更
2. PHPコードを使用した変更

テーマの設定を利用することで、初心者でも簡単に変更可能ですが、カスタマイズの幅は限られます。一方で、PHPコードを使用する方法では、自由度が高いカスタマイズが可能です。

Cocoon設定での変更（６色）

Cocoonでは、テーマ設定から6色のカラーパレットを簡単に変更できます。

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

この方法は、初心者でも直感的に操作できるため、手軽にカラーパレットを変更したい方におすすめです。

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

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

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

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

より多くのカラーパレットを設定したい場合、PHPコードを使って24色のカスタムパレットを追加することが可能です。これにより、テーマのデザインに合った独自のカラーパレットを作成でき、サイト全体の統一感を高められます。

PHPコードを使用してカラーパレットを変更する場合は、子テーマを使用してコードを追加することが推奨されます。functions.phpファイルにカスタムコードを貼り付けることで、アップデート時に元のコードが上書きされるリスクを回避できます。

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

PHPコードを貼り付ける場所は子テーマのテーマのための関数 (functions.php) です。

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

以下のコードを使用して、24色のカラーパレットを追加することができます。

//カラーパレット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コードの意味

このコードは、ワードプレスのブロックエディター（Gutenberg）で使われるカラーパレットをカスタマイズするためのものです。具体的には、特定の色を新しい色に置き換えています。

フィルターの追加

add_filter('block_editor_color_palette_colors', function($colors) {

• add_filterは、ワードプレスのフック機能を使って特定の処理を変更するための関数です。
• block_editor_color_palette_colorsは、カラーパレットの色を変更するためのフィルターです。
• $colorsは、現在のカラーパレットの色の配列です。

新しい色の定義

$skin_colors = [
    'red' => '#e60033',
    'pink' => '#efcdc4',
    // ...（他の色も同様に定義）
];

• $skin_colors配列には、変更したい色のスラッグ（識別子）とそのカラーコードが定義されています。

色の置き換え

foreach ($skin_colors as $slug => $color) {
    $key = array_search($slug, array_column($colors, 'slug'));
    if ($key !== false) {
        $colors[$key]['color'] = $color;
    }
}

• foreachループを使って、$skin_colorsに含まれる各色について処理を行います。
• array_column($colors, 'slug')は、現在のカラーパレットからスラッグだけの配列を作成します。
• array_search($slug, ...)を使って、現在のカラーパレットにスラッグが存在するかを調べます。
• スラッグが見つかった場合、その色のコードを新しい色（$color）に置き換えます。

変更された色パレットを返す

return $colors;

• 最後に色が変更された配列を返します。これによって新しいカラーパレットがブロックエディターで使用されます。

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

お好みで色を変更してみてください。

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

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

Cocoonのテーマ設定で簡単に変更できる6色の方法と、PHPコードを使用した24色の方法を比較すると、それぞれメリットとデメリットがあります。

Cocoonの設定は手軽で直感的ですが、自由度が低い点がデメリットです。PHPコードを使う方法は自由度が高く、複数の色を追加できる反面、コーディングの知識が必要になります。

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

まとめ

Cocoon設定の手軽さを取るか、PHPコードを使った自由度の高さを取るかは、サイトの目的やデザインのこだわり次第です。それぞれの方法を理解し、自分に合ったカスタマイズを選ぶことでサイトのデザインをより魅力的に仕上げることができます。

この記事は以上です。