【WordPress】Gutenbergでカラーパレットの色を変更・追加する方法

2019-04-052020-01-04WordPress Gutenberg, WordPress

WordPress新エディタ「Gutenberg」でデフォルトのカラーパレットを変更する方法になります

「Gutenberg」のカラーパレットはデフォルトで11色が用意されていますが、function.phpを利用して割と簡単にパレットに好きな色を追加・変更する事も可能です

背景色と文字色を指定できますが、どうしてもデフォルト色が明るい色が多く組み合わせパターンではコントラスト比が不足しやすくなってしまうのも困りものです

LighthouseでSEO診断！十分なコントラスト比を持たせよう | ONE NOTES

LighthouseでSEO診断！問題ありとなったコントラスト比不足を解消する方法です

https://1-notes.com/seo/lighthouse-seo-check-contrast/

1. カラーパレットの色を変更する方法
2. カラーパレット12色サンプル
3. CSSクラスではなくstyleで色コードを割り当てる方法

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

こちらの記事を参考にさせて頂きました

Add Theme Color Palette to the Gutenberg Block Editor for WordPress

add_theme_support()にて’editor-color-palette’を指定すると配列形式でカラーパレットを変更できます

まず、簡単に白と黒だけ定義してみます

functions.php

function my_color_set()
	{
	add_theme_support('editor-color-palette', array(
		array(
			'name' => __('White','白') ,
			'slug' => 'white',
			'color' => '#FFF',
		) ,
		array(
			'name' => __('Black','黒') ,
			'slug' => 'black',
			'color' => '#000',
		)
	));
	}

add_action('after_setup_theme', 'my_color_set');

nameについて

nameには2つの引数が設定可能で、2つ目はエディタ上のカラーパレットをマウスホバーした際にタイトルとして表示されます（指定しなくても問題ありません）

slugについて

slugは、指定した文字列から色を変更した要素に背景色・文字色別にclass名を与えます

has-スラッグ名-background-color

has-スラッグ名-color

このスラッグ名から作られるクラス名でCSSに追加する必要があります

WordPressのフックでデフォルトのCSSを追加・編集可能かもですが、調べ中

colorについて

colorはhexカラーコードまたはrgbカラーコードを指定します

エディタ上で使われます

カラーパレット12色サンプル

コントラスト比も維持しながら使えそうな色も入れつつ、12色カラーパレットサンプルを作ってみました

functions.php

function my_color_set()
	{
	add_theme_support('editor-color-palette', array(
		array(
			'name' => __('Black') ,
			'slug' => 'black',
			'color' => '#000',
		) ,
		array(
			'name' => __('Dark gray') ,
			'slug' => 'dark-gray',
			'color' => '#333',
		) ,
		array(
			'name' => __('Medium gray') ,
			'slug' => 'medium-gray',
			'color' => '#999',
		) ,
		array(
			'name' => __('Light gray') ,
			'slug' => 'light-gray',
			'color' => '#d3d3d3',
		) ,
		array(
			'name' => __('Ghost white') ,
			'slug' => 'ghost-white',
			'color' => '#f8f8ff',
		),
		array(
			'name' => __('White','White') ,
			'slug' => 'white',
			'color' => '#FFF',
		) ,
		array(
			'name' => __('Red') ,
			'slug' => 'red',
			'color' => '#ff0000',
		) ,
		array(
			'name' => __('Vivid red') ,
			'slug' => 'vivid-red',
			'color' => '#cf2e2e',
		) ,
		array(
			'name' => __('Blue') ,
			'slug' => 'blue',
			'color' => '#0000ff',
		) ,
		array(
			'name' => __('Vivid blue') ,
			'slug' => 'vivid-blue',
			'color' => '#0693e3',
		) ,
		array(
			'name' => __('Green') ,
			'slug' => 'green',
			'color' => '#008000',
		),
		array(
			'name' => __('Vivid green') ,
			'slug' => 'vivid-green',
			'color' => '#00d084',
		)
	));
	}

add_action('after_setup_theme', 'my_color_set');

style.css

.has-black-color{#000}
.has-black-background-color{#000}

.has-dark-gray-color{#333}
.has-dark-gray-background-color{#333}

.has-medium-gray-color{#999}
.has-medium-gray-background-color{#999}

.has-light-gray-color{#d3d3d3}
.has-light-gray-background-color{#d3d3d3}

.has-ghost-white-color{color:#f8f8ff}
.has-ghost-white-background-color{background-color:#f8f8ff}

.has-white-color{color:#FFF}
.has-white-background-color{background-color:#FFF}


.has-red-color{color:#ff0000}
.has-red-background-color{background-color:#ff0000}

.has-vivid-red-color{color:#cf2e2e}
.has-vivid-red-background-color{background-color:#cf2e2e}

.has-blue-color{color:#0000ff}
.has-blue-background-color{background-color:#0000ff}

.has-vivid-blue-color{color:#0693e3}
.has-vivid-blue-background-color{background-color:#0693e3}

.has-green-color{color:#008000}
.has-green-background-color{background-color:#008000}


.has-vivid-green-color{color:#00d084}
.has-vivid-green-background-color{background-color:#00d084}

CSSクラスではなくstyleで色コードを割り当てる方法

カラーピッカーで色を指定すると旧エディタと同じ感じにstyleでカラーコードが直接HTMLに記述されます

CSSクラスで指定も良いのですが、色設定を変えた時でもCSSは残しておかないと過去記事を再編集する事になって少し手間そう

パレッドで選択した色もCSSクラスではなくstyleで色コード出ないかなと模索していたら、パレッド設定でslag値を空にして指定しなければ、styleでHTMLに出力される事を確認しました

slugなしだと、HTMLは以下の感じになります

<p style="background-color:#000;color:#FFF" class="has-text-color has-background">テキスト</p>

上記の12色サンプルですと

function my_color_set()
	{
	add_theme_support('editor-color-palette', array(
		array(
			'name' => __('Black') ,
			'color' => '#000',
		) ,
		array(
			'name' => __('Dark gray') ,
			'color' => '#333',
		) ,
		array(
			'name' => __('Medium gray') ,
			'color' => '#999',
		) ,
		array(
			'name' => __('Light gray') ,
			'color' => '#d3d3d3',
		) ,
		array(
			'name' => __('Ghost white') ,
			'color' => '#f8f8ff',
		),
		array(
			'name' => __('White','White') ,
			'color' => '#FFF',
		) ,
		array(
			'name' => __('Red') ,
			'color' => '#ff0000',
		) ,
		array(
			'name' => __('Vivid red') ,
			'color' => '#cf2e2e',
		) ,
		array(
			'name' => __('Blue') ,
			'color' => '#0000ff',
		) ,
		array(
			'name' => __('Vivid blue') ,
			'color' => '#0693e3',
		) ,
		array(
			'name' => __('Green') ,
			'color' => '#008000',
		),
		array(
			'name' => __('Vivid green') ,
			'color' => '#00d084',
		)
	));
	}

add_action('after_setup_theme', 'my_color_set');

これならCSSも書かなくて良いし、カラーパレットの変更も楽に行えて良いかも

2019-04-052020-01-04WordPress Gutenberg, WordPress

Posted by Yousuke.U