【Cocoon】カラーパレットを自分好みに変更するカスタマイズ｜Cocoon設定とPHP活用法

Cocoon

2022年06月17日2025年03月23日

記事内に広告が含まれています

ワードプレスのカラーパレットを自分好みにカスタマイズしたいと思ったことはありませんか？デフォルトのパレットも便利ですが、サイトの個性やブランドカラーを表現するには物足りないことも。

この記事では、人気テーマ「Cocoon」の設定を使った簡単なカスタマイズ方法から、PHPを利用したカラーパレット変更方法まで解説します。それぞれのメリット・デメリットも比較しているので自分に合った方法を見つけましょう。

INDEX

ワードプレスのカラーパレット｜デフォルト色
ワードプレスのカラーパレットの色を変更する方法
1. Cocoon設定（6色）
2. PHPコード（24色）
Cocoon設定でカラーパレットの色を追加・変更するふたつの方法を比較
まとめ

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

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

しかし、デフォルトの色は原色が多く、サイトのデザインに合わせてカスタマイズしたい場合があります。

私は彩度を抑えたくすみ色が好きなので、自分好みに変えたいな～

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

目次に戻る

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

カラーパレットを変更する方法は主に2つあります

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

Cocoon設定（6色）

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

ダッシュボードで「Cocoon設定」→「エディター」を開きます。
「拡張カラーパレット」の項目で色を選択します。
- カラーピッカーを使うか、6桁のカラーコードを直接入力します。最大6色まで選択可能です。
「保存」をクリックして完了です。

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

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

メリット

操作が簡単で失敗が少ない
初心者でも直感的に設定できる

デメリット

最大6色まで

PHPコード（24色）

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

より多くのカラーパレットを設定したい場合、PHPコードを使って24色のカスタムパレットを追加することが可能です。この方法では、子テーマのfunctions.phpファイルを編集します。

注意

必ず子テーマで使用し、テーマのアップデートによる影響を回避しましょう。
コード編集時にはミスがないよう注意してください。エラーが発生するとサイトが動作しなくなる場合があります。
スタマイズは自己責任の上でおこないましょう。

Step1

PHPコードを貼り付け

子テーマのfunctions.phpを開き、以下のコードを貼り付けます。

PHPの記述について

管理画面の「外観」から「テーマファイルエディター」
- Cocoon Child: テーマのための関数 (functions.php)をクリックします
元から書いているコード（テーマ用関数）は消さずにPHPを記述します
- //以下に子テーマ用の関数を書く、から下の行に追加しましょう

子テーマ（Cocoon child）が選択されていることを確認します

//カラーパレット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;
});

カラーパレットを構成する色を変更または上書きする機能です。このコードを使用すると、デフォルトの色パレットを最大24色のカスタムカラーに置き換えることができます。