ブロックエディターでカラーパレットをカスタマイズする方法【新規作成・色の追加】
ワードプレスのブロックエディターの配色では、カラーパレットから色を選択設定できるようになっています。テーマによっては標準のカラーパレットでなく、独自の色にカスタマイズされたカラーパレットの場合もあります。
これらのカラーパレットを別のカラーパレットに置き替えたり、自由に色を追加できるとサイトづくりがすごく楽になりますよね。
次の3通りのカスタムカラーパレットの設定方法を紹介します。
- すでにカスタムカラーパレットが設定されているテーマの場合、パレットに色を追加する
(事例としてテーマTwenty Twenty-Oneを使用) - カスタムカラーパレットでなく標準カラーパレットのテーマの場合、カスタムカラーパレットに置き替える
(事例としてテーマTwenty Seventeenを使用) - カスタムカラーパレットを完全に別のカスタムカラーパレットに置き替える
いずれも子テーマのfunctions.phpとstyle.cssにコードを記述していきます。
※functions.phpやstyle.cssを編集しますので、事前にバックアップを必ず取るようしてください。
ブロックエディターのカラーパレット
ブロックエディターには配色用のカラーパレットが準備されており、色を選択するだけで配色できるようになっています。
下記は段落ブロックの事例です。テキスト色の設定ボタンをクリックするとカラーパレットが開きます。
ワードプレスのカラーパレットは、上記のように12色が並んだものが標準ですが、テーマによってはテーマ独自の色を設定してカスタムカラーパレットとしている場合もあります。
例えばTwenty Seventeenは標準のカラーパレット、TwentyTwenty-Oneはカスタムカラーパレットです。
そこで本記事では、この2つのテーマを例にとってカラーパレットをカスタマイズしていきます。
カラーパレットの設定方法
- functions.phpへのeditor-color-paletteの記述をadd_them_supportにする
(パレットに追加する色は配列で与える) - functions.phpへの記述により付与されるクラスをセレクターとした配色設定をstyel.cssに記述する
(クラス名はhas-(slug名)-color となる)
例えば、ソフトコーラル・ミルキーナイト・フォックスイエローの3色をパレットに設定する場合はfunctions.phpに以下の記述が必要となります。
add_theme_support('editor-color-palette', [
[
'name' => 'ソフトコーラル',
'slug' => 'soft-coral',
'color' => '#f6b7aa',
],
[
'name' => 'ミルキーナイト',
'slug' => 'milky-night',
'color' => '#0e536d',
],
[
'name' => 'フォックスイエロー',
'slug' => 'fox-yellow',
'color' => '#fae06a',
],
]);
このような記述がテーマ内にあればカスタムパレットとして表示され、記述がなければ標準のカラーパレットが表示されることとなります。
functions.phpの記述により、ブロックエディター内ではカスタムパレットで配色ができるようになりますが、フロント側(web表示側)に反映されません。そこでstyle.cssの編集が必要となります。
具体的にはカラーパレットによって追加されたクラス名を使ってCSSに配色の記述をしてやるのです。
カラーパレットによって付与されるクラス名は、has-(slug名)-color となります。例えば上記のソフトコーラル色の場合は、class="has-soft-coral-color"となります。
具体的なCSS記述は次の事例で紹介します。
カラーパレットの設定事例
先の3色を設定するために、子テーマのfunctions.phpとstyle.cssに記述していきます。
すでにカスタムカラーパレットのあるテーマTwenty Twenty-Oneの場合と、標準カラーパレットであるテーマTwenty Seventeenの2つの事例で進めますが、実はどちらにも同じコード記述でOKです。
functions.phpへの記述
/* カラーパレットの色追加 */
function webchil_add_my_editor_color_palette() {
//既存のカラーパレットが存在して追加したい場合
$palette = get_theme_support( 'editor-color-palette' );
if ( ! empty( $palette ) ) {
$palette = array_merge( $palette[0], array(
[
'name' => 'ソフトコーラル',
'slug' => 'soft-coral',
'color' => '#f6b7aa',
],
[
'name' => 'ミルキーナイト',
'slug' => 'milky-night',
'color' => '#0e536d',
],
[
'name' => 'フォックスイエロー',
'slug' => 'fox-yellow',
'color' => '#fae06a',
],
) );
}else{
//既存のカラーパレットが存在しない場合
$palette = array(
[
'name' => 'ソフトコーラル',
'slug' => 'soft-coral',
'color' => '#f6b7aa',
],
[
'name' => 'ミルキーナイト',
'slug' => 'milky-night',
'color' => '#0e536d',
],
[
'name' => 'フォックスイエロー',
'slug' => 'fox-yellow',
'color' => '#fae06a',
],
);
}
add_theme_support( 'editor-color-palette', $palette );
}
add_action( 'after_setup_theme',
'webchil_add_my_editor_color_palette', 11 );
style.cssへの記述
:root {
--color-soft-coral: #f6b7aa;
--color-milky-night: #0e536d;
--color-fox-yellow: #fae06a;
}
.has-soft-coral-color {
color: var(--color-soft-coral);
}
.has-milky-night-color {
color: var(--color-milky-night);
}
.has-fox-yellow-color {
color: var(--color-fox-yellow);
}
.has-soft-coral-background-color {
background-color: var(--color-soft-coral);
}
.has-milky-night-background-color {
background-color: var(--color-milky-night);
}
.has-fox-yellow-background-color {
background-color: var(--color-fox-yellow);
}
カスタムカラーパレットのあるテーマに色を追加
(事例:テーマTwenty Twenty-One)
functions.phpへの記述した3色が、既存のカスタムパレットに追加されます。
このパレットを使って、グループブロックの中に段落ブロックで文字を入れて、背景色と文字色を今回追加した3色で設定してみました。
しかしこれをweb表示させると反映されていません。Twenty Twenty-One特有のカスタムカラーのままです。
しかしstyle.cssに先の記述をすると以下のようにフロント側にも反映されるようになります。
(わざとサイト全体がわかるように表示しています)
カスタムカラーパレットのないテーマにカスタムパレットを設定
(事例:テーマTwenty Seventeen)
functions,phpとstyle.cssに同じ記述をしても、もともと標準カラーパレットであるTwenty Seventeenの場合は、新しく設定したカスタムパレットに置き換わった形となります。
このように紹介したコードでは条件分岐によって、
- すでにカスタムカラーパレットの設定があるテーマでは元のパレットに色が追加
- 標準カラーパレットのテーマではカスタムカラーパレットに完全に置き換わる
という結果となるのです。
カスタムカラーパレットを完全に新しいパレットに置き替える場合
すでにカスタムカラーパレットの設定があるテーマで、新しいカラーパレットに完全に置き替えたい場合は、
remove_theme_support( 'editor-color-palette’ );
を追加することで実現できます。functions.phpへの記述は次の通りです。
/* カラーパレットの色追加 */
function webchil_add_my_editor_color_palette() {
$palette = get_theme_support( 'editor-color-palette' );
if ( ! empty( $palette ) ) {
remove_theme_support( 'editor-color-palette' );
}
$palette = array(
[
'name' => 'ソフトコーラル',
'slug' => 'soft-coral',
'color' => '#f6b7aa',
],
[
'name' => 'ミルキーナイト',
'slug' => 'milky-night',
'color' => '#0e536d',
],
[
'name' => 'フォックスイエロー',
'slug' => 'fox-yellow',
'color' => '#fae06a',
],
);
add_theme_support( 'editor-color-palette', $palette );
}
add_action( 'after_setup_theme',
'webchil_add_my_editor_color_palette', 11 );
style.cssへの記述は変わりません。
まとめ
カスタムカラーパレットの基本的な設定方法をもう一度おさらいすると、
- functions.phpへのeditor-color-paletteの記述をadd_them_supportにする
(パレットに追加する色は配列で与える) - functions.phpへの記述により付与されるクラスをセレクターとした配色設定をstyel.cssに記述する
(クラス名はhas-(slug名)-color となる)
となります。
パレットに追加する色の変更は、functions.phpに記述する配列の中味を変えれば可能です。
これでサイトの配色設定が非常に楽に進むことになります。ぜひ取り入れてみてください。