本記事ではエディターカラーパレット(Editor Color Palette)(以降カラーパレットと呼ぶ)のデフォルトのカラーを上書きする形で自分好みにカスタマイズする方法を解説します。
上書きするので、デフォルトのカラーは全て消え、登録したカラーのみがカラーパレットに反映されます。
カラーパレットにデフォルトで登録されている色
右メニューのブロックタブにはカラーパレットがあり、
- 文字色
- 背景色(単色・グラデーション )
それぞれの色をワンクリックで変更できるようになっています。
ワンクリックで直感的に色を変えられるのはとても便利ですね。
しかしながら、デフォルトで登録されている色は扱いにくいカラーが多い(テーマを利用している場合はテーマ製作者がテーマにあったカラーパレットを用意している場合が多いのでデフォルトのカラーは異なる)ので、
- お客さんが指定した好きな色をデフォルトで使えるようにしたい
- サイトの色になじむ色だけを登録して使いたい
などの要望がでてきそうです。
また、デフォルトではカスタムカラーを選択することで自由に色を決めることができますが、選択した色はカラーパレットに登録されるわけではないので毎回カラーを指定する必要があります。
この機能もサイトのデザイン性やカラーの統一感を保ちたい人にとってはユーザーに使って欲しく無いかと思われるので、機能をOFFにできたらいいですね。
カラーパレットのデフォルトカラーを変更・登録する方法
なるべく正しい情報を掲載するためにWordPress公式のBlock Editor Handbookを参考にしました。
今回は以下の画像のような4色のパレットを作成してみます。
1. カラーパレットを登録する
after_setup_themeフックを使用
functions.php
function my_theme_setup() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => esc_attr__( 'black'),
'slug' => 'black',
'color' => '#333',
),
array(
'name' => esc_attr__( 'dark gray', 'themeLangDomain' ),
'slug' => 'darkgray',
'color' => '#CED4E2',
),
array(
'name' => esc_attr__( 'blue', 'themeLangDomain' ),
'slug' => 'blue',
'color' => '#BAD5F9',
),
array(
'name' => esc_attr__( 'pink', 'themeLangDomain' ),
'slug' => 'pink',
'color' => '#FFB7C5',
),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup'); name
私たちが何の色かわかるようにつける色の名前(ラベル)です。
読む人がわかる名前をつければいいと思います。
カラーパレットの色にマウスカーソルを載せるとnameに指定した色の名前が表示されます(上記写真ではblackと表示されています)。
slug
ここで指定した値が自動で以下のようなclass名になります。
文字色・・・.has-{slug}-background-color
背景色は・・・.has-{slug}-color
例えばslugにblackを指定していた場合、
クラス名.has-black-background-colorと.has-black-colorが自動で作成されます。
styleを当てるときにこのクラス名を使います。
color
16進数で指定します。
2. スタイルシートにカラーを追記
style.css
functions.phpに以下コードを記載するとエディタ上ではカラー表示されますが、フロント側はstyleを指定しないとカラーが反映されません。
functions.phpのslugで指定したclassを使用してcssを記述します。
//black
.has-black-background-color {
background-color: #333;
}
.has-black-color {
color: #333;
}
//darkgray
.has-darkgray-background-color {
background-color: #CED4E2;
}
.has-darkgray-color {
color: #CED4E2;
}
//blue
.has-blue-background-color {
background-color: #BAD5F9;
}
.has-blue-color {
color: #BAD5F9;
}
//pink
.has-pink-background-color {
background-color: #FFB7C5;
}
.has-pink-color {
color: #FFB7C5;
}その他知っておくと良い情報
登録した順番でカラーが表示される。
登録できる色の数に制限はない。
完成例（パステル系）
パステル系のカラーパレットを作ってみました。
カラーパレットのデフォルトグラデーションカラーを変更・登録する方法
ボタンやリストなど一部のブロックでは背景色をグラデーションにすることができます。
グラデーションも自分好みにカラーパレットを作成し登録することができます。
以下の画像がデフォルトのグラデーションカラーパレットです。
今回は以下の画像のような3種類のグラデーションカラーをパレットに登録します。
1. グラデーションカラーパレットを登録する
functions.php
after_setup_themeフックを使用
add_theme_support(
'editor-gradient-presets',
array(
array(
'name' => esc_attr__( 'yellow to pink', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(246, 255, 0, .8) 0%,rgba(255, 0, 161, .8) 100%)',
'slug' => 'yellow-to-pink',
),
array(
'name' => esc_attr__( 'green to blue', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,#84fab0 0%,#8fd3f4 100%)',
'slug' => 'green-to-blue',
),
array(
'name' => esc_attr__( 'blue to skyblue', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)',
'slug' => 'blue-to-skyblue',
),
)
);name
私たちが何の色かわかるようにつける色の名前(ラベル)です。hoverでツールチップ表示されます。
gradient
ブロックの背景に適用されるグラデーションのCSS値を記述します。
使用できるグラデーションについては以下のサイトを参考にしてください。
slug
ここで指定した値が自動で以下のようなclass名になります。
背景色(グラデーション )・・・.has-{slug}-gradient-background
例えばslugにblackを指定していた場合、
クラス名.has-black-background-colorと.has-black-colorが自動で作成されます。
styleを当てるときにこのクラス名を使います。
2. スタイルシートにグラデーションカラーを追記
style.css
.has-yellow-to-pink-gradient-background {
background: linear-gradient(135deg, rgba(246, 255, 0, 0.8) 0%, rgba(255, 0, 161, 0.8) 100%);
}
.has-green-to-blue-gradient-background {
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}
.has-blue-to-skyblue-gradient-background {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}カラーパレットのカスタムカラーを無効にする方法
カラーパレットのカスタムカラーを無効にするには以下のコードをfunctions.phpに記載するだけです！
after_setup_themeフックを使用
add_theme_support( 'disable-custom-colors' );カラーパレットのカスタムグラデーションを無効にする方法
デフォルトではグラデーションをカスタマイズできるようになっています。
カラーパレットのカスタムグラデーションカラーを無効にするには以下のコードをfunctions.phpに記載するだけです！
after_setup_themeフックを使用
add_theme_support( 'disable-custom-gradients' );これでグラデーションも固定になります。
コメント