ワードプレスで記事を書くときに使うカラーパレットについて。
文字の色を変えるとき、ボックスの枠や背景色を変えるときなど誰もが使うところですね!今回はこのパレットの色を変えるカスタマイズについて書いていきます。
Cocoonカラーパレットのデフォルト色
ブロックエディタの記事の編集画面からカラーパレットを開くとこんな感じで展開されるかと思います。

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

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

そんなときに色を変える方法があるよ!
もう少し目に優しい色にデフォルトのカラーパレットを変更してみたいと思います。
Cocoonカラーパレットの色を変える方法
2つの方法をご紹介します。
- Cocoon設定で色を追加
- functions.phpをカスタマイズする
1.Cocoon設定で色を追加
まずはコードをいじる必要がなく、Cocoon設定からとても簡単にできる方法です。
Cocoon設定 → エディター を開くと下の方に「拡張カラーパレット」の項目があるので、色を選択をクリックしてここで色を設定します。


色の設定の仕方はカラーコードを直接入力するか、コードが分からなくてもこのカラーバーを自分で動かして色味を調整しながら設定することもできます。
最後に保存を選択して完了です。簡単!
2.functions.phpをカスタマイズする方法
こちらはCocoonのスキン“SILK”を作成されたろこさんの『SILKの特徴や使い方』ページのカスタマイズ例からコードを引用させていただき、私がカラーコードを変更したものです。
豊富なカスタマイズ情報が実用的でとてもためになります。ありがとうございます。
この方法は中級編になりますが、作業的には子テーマにコピペしてカラーコードを編集するだけなので難しくはありません。
- STEP1function.phpにコードを張り付ける
コピペする場所はCocoonの場合はCocoon.Child(子テーマ)を選択し、外観 → テーマファイルエディター → テーマのための関数 です。
コードは下記に記載します。
- STEP2各カラーコードを設定する
それぞれカラーコードを入力します。(半角のみ使えます)
- 完成!
Cocoonデフォルトカラーを変更する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;
});
WordPressのテーマの設定やカスタマイズを行うときに編集するファイル。PHPをマスターするとわざわざプラグインを使用しなくてもfunctions.phpに記述するだけでできることも多く便利です!
このコードをそのままコピペすると下記のカラーに変わっているはずです。


さくっと調べて、私好みの色になりました♪
あとは自分好みに色を変更してみてください。
ふたつの方法を比較してみる
- 簡単で失敗がない
- いつもの設定から編集できる
- 色は最大6色まで
- やや中級向け
- 子テーマを使うので、大きな失敗がなくテーマ更新でも上書きされない
- 色は最大24色まで
どちらの方法でも、途中でカラーを変更すると過去に作成した記事もすべて新しいカラーが一括適用されます。
カラーコードを調べるときに役立つサイト
私はよくこちらでカラーコードを調べているのでリンクをのせておきます。
それではまた!
Comment