この記事は最後に更新してから1年以上経過しています。

ブロックエディターの色設定を変えてみる

ブロックエディター対応テーマを作る時のポイントその1

説明

バージョン5.3で機能強化されたブロックエディター。対応を考えて新テーマ「Twenty Twenty」のソースコードを眺めていく。

add_theme_support関数が大事

テーマのfunctions.phpではafter_setup_themeアクションを使ってテーマの各種設定を行う。「Twenty Twenty」のafter_setup_themeアクションは、一見するとブロックエディター関連の設定はなく、どうなっているのか考えてしまったのだが、after_setup_themeアクションが2つ登録され、1つ目のtwentytwenty_theme_support関数では基本的設定が、2つ目のtwentytwenty_block_editor_settings関数ではブロックエディターに関連する次のような設定が行われていた。

  1. add_theme_support( 'editor-color-palette', $arr1 );でカラーパレットを設定。
  2. add_theme_support( 'editor-font-sizes', $arr2 );で文字サイズを設定。
  3. 文字色が白の場合はadd_theme_support( 'dark-editor-style' );を指定。

上記の'editor-color-palette'で設定した内容は、投稿編集ページの「色設定」パネルに適用される。

投稿編集ページの「色設定」パネル

「Twenty Twenty」は5色のカラーを指定しており、「背景色」と「文字色」に便宜上$arr1で指定した配列の内容が適用されていることがわかる。

色情報として指定されている連想配列は次のような内容となっている。

array(
	'name'  => __( 'Accent Color', 'twentytwenty' ),
	'slug'  => 'accent',
	'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
)

// 上記の連想配列をprint_rで表示
Array
(
    [name] => アクセント色
    [slug] => accent
    [color] => #cd2653
)

'slug'の値は、背景色として指定された場合は'has-accent-background-color'、文字色の場合は'has-accent-color'のようにclass属性値の一部として使用される。

テーマによる違い

'editor-color-palette'で指定する色設定はテーマによって異なり、「Twenty Twenty」と「Twenty Nineteen」では次のようになっている。

name | slugTwenty TwentyTwenty Nineteen
アクセント色 | accent#cd2653－
メイン | primary#000000#0073a8
サブ | secondary#6d6d6d#005075
繊細な背景 | subtle-background#dcd7ca－
背景色 | background#f5efe0－
ダークグレー | dark-gray－#111
ライトグレー | light-gray－#767676
白 | white－#FFF

なお「Twenty Twenty」の「背景色」は初期状態では「#f5efe0」だが、テーマカスタマイザー（「外観」－「カスタマイズ」）の「背景色」が変更された後はその色が適用されるようになっている。

子テーマでアクセント色を変える

ブロックエディターの色設定を変更する準備として、確認用に「Hello world!」の段落ブロックの背景色をアクセント色に変更する。その部分のHTMLコードと表示内容は次の通りである。

<p class="has-background has-accent-background-color">WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。</p>
背景色をアクセント色を指定したところ

現在使用しているテーマでブロックエディターの色設定を変更する場合は該当するadd_theme_support関数のパラメータを修正すればよいが、「Twenty Twenty」のように今後バージョンアップする可能性があるテーマでは書き戻されてしまう。今回は、それを踏まえて子テーマでアクセント色を赤系の「#cd2653」から青系の「#5326cd」に変更してみる。作成するファイルはstyle.cssとfunctions.phpとなる。

まずはstyle.cssの内容から。

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Template:     twentytwenty
 Version:      0.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* COLOR */

.color-accent,
.color-accent-hover:focus,
.color-accent-hover:hover {
	color: #5326cd;
}

/* BACKGROUND COLOR */

.bg-accent,
.bg-accent-hover:focus,
.bg-accent-hover:hover {
	background-color: #5326cd;
}

/* BORDER COLOR */

.border-color-accent,
.border-color-accent-hover:focus,
.border-color-accent-hover:hover {
	border-color: #5326cd;
}

/* FILL COLOR */

.fill-children-accent,
.fill-children-accent * {
	fill: #5326cd;
}

/* CUSTOM COLORS */

:root .has-accent-color {
	color: #5326cd;
}

:root .has-accent-background-color {
	background-color: #5326cd;
}

色に関連したスタイルは今回変更するアクセント色関連のみ。「Twenty Twenty」ではアクセント色の「#cd2653」をリンクや引用などにも使用しており、ここではそれらには対応していない。

次にfunctions.php。こちらは2つのアクションを利用する。

<?php
function twenty20_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
		array('parent-style')
	);
}

add_action( 'wp_enqueue_scripts', 'twenty20_enqueue_styles' );

function twenty20_block_editor_settings() {
	$editor_color_palette = get_theme_support( 'editor-color-palette' );
	$editor_color_palette[0][0]['color'] = '#5326cd';
	add_theme_support( 'editor-color-palette', $editor_color_palette[0] );
}

add_action( 'after_setup_theme', 'twenty20_block_editor_settings', 11 );

wp_enqueue_scriptsアクションでは、親テーマのstyle.cssと子テーマ自身のstyle.cssを円キューしている。

after_setup_themeアクションは、プライオリティは標準の10ではなく11を指定し、確実に親テーマよりも後に実行するようにする。処理内容は、親テーマで設定された色設定情報を get_theme_support関数で取得し、アクセント色の部分を変更して設定し直している。なおget_theme_support関数で取得した値は設定時の配列を格納した配列となり、そのまま使用できないので要注意。

「Twenty Twenty」をこちらの子テーマに切り替え、「Hello world!」の投稿を表示。投稿を編集することなく、段落の背景が変更された。

子テーマが適用され背景色のアクセント色が青系の「#5326cd」に変更された

まとめ

'editor-color-palette'で指定する色情報の配列は制限はない。既存のテーマからの移行する場合は各色のslugを引き継ぐことで、既存の投稿を変更することなく新しいスタイルを適用できる。また独自テーマの場合は色数を増減させたり、自由なslugを指定できる。

最後に、ブロックエディターの「色設定」パネルは「カスタムカラー」のリンクをクリックすることで任意の色を指定できる機能がある。この機能はafter_setup_themeアクションなどに次の内容を追加することで無効化できる。

add_theme_support( 'disable-custom-colors' );

最終更新 : 2019年12月11日 17:20

関連

お勧め

get_next_image_link（2021年7月25日 更新）

string get_next_image_link( [ string | int[] $size = 'thumbnail' [ , string | false $text = false ] ] )
次の添付ファイルへのリンクを取得する。

wp_after_insert_post（2020年12月11日 更新）

void wp_after_insert_post( int | WP_Post $post, bool $update, WP_Post $post_before )
投稿情報を保存した後にアクションを実行する。

wp_save_post_revision（2024年1月10日 更新）

int | WP_Error | void wp_save_post_revision( int $post_id )
現状の投稿のリビジョンを作成する。

wp_debug_backtrace_summary（2012年6月15日 更新）

mixed wp_debug_backtrace_summary( [ string $ignore_class = null [ , int $skip_frames = 0 [ , bool $pretty = true ] ] ] )
デバッグ用の呼び出し情報を取得する。

nocache_headers（2018年5月27日 更新）

void nocache_headers( )
ブラウザのキャッシュを無効にするHTTPヘッダーを出力する。