サイト型トップページの作り方を公開しています!Check

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

アイキャッチ/カラーパレット Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

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

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

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計300件(月間約20件)購入いただきました
はっちゃん
です
プロフィール

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

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

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

カラーパレット

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

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

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

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

スポンサーリンク

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

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

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

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

Cocoon設定での変更(6色)

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

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

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

カラーパレット
カラーパレット

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

追加できるのは最大6色。

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

PHPコードを使用した変更(24色)

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

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

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

カスタマイズは自己責任の上でおこないましょう。

  • Step1
    function.phpにコードを張り付ける

    コードは下記に記載します。

  • Step2
    各カラーコードを設定する

    それぞれ#に続けて6桁のカラーコードを入力します。(半角)

  • Complete
    確定させて完成
スポンサーリンク

Cocoon/PHPコードを貼り付ける場所(子テーマ使用)

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

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

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

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色まで
functions.php
  • PHPを使うので少し難しい
  • 子テーマを使うので大きな失敗がなく、テーマ更新でも上書きされない
  • 色は最大24色まで

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

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

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

まとめ

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

この記事は以上です。

シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

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