この記事は最後に更新してから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_the_post_thumbnail_caption(2018年5月27日 更新)

string get_the_post_thumbnail_caption( mixed $post = null )
投稿ページのサムネイル(アイキャッチ画像)キャプションを取得する。

wp_enqueue_style(2019年11月25日 更新)

void wp_enqueue_style( string $handle [ , string $src = false [ , array $deps = array() [ , string $ver = false [ , string $media = 'all' ] ] ] ] )
使用するスタイルシート(CSS)を出力用のキューに入れる。パラメータ$srcが指定された場合は、グローバル変数$wp_stylesに登録してから出力用のキューに入れる。

post_class(2018年5月27日 更新)

void post_class( [ string $class = '' [ , int $post_id = null ] ] )
投稿情報の種別に応じたクラス属性(class="post-?? post ...")を表示する。具体的なクラス名は、投稿ID(post-番号)、投稿種別(postやpage)、カテゴリー(category-名前)、タグ(tag-名前)などがある。これらクラス名に合わせたCSSを準備することで、投稿ページのユニークなデザインが表現可能になる。

get_header(2020年8月18日 更新)

void | false get_header( [ string $name = null [ , array $args = array() ] ] )
ヘッダパーツを記述したメインヘッダファイルheader.php(またはサブヘッダファイルheader-???.php)を読み込む。

get_the_excerpt(2018年5月27日 更新)

string get_the_excerpt( [ mixed $post = null$deprecated = '' ] )
投稿情報の抜粋記事を取得する。