ブロックエディターの文字サイズ設定を変えてみる

説明

今回は「前回投稿した内容」の続きブロックエディターの文字サイズ設定を変えようと思う。参考にするテーマはもちろん「Twenty Twenty」である。

ポイントはadd_theme_support関数

まずは「Twenty Twenty」のafter_setup_themeアクションから。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-font-sizes'で設定した内容は、投稿編集ページの「テキスト設定」パネルに適用される。

投稿編集ページの「テキスト設定」パネル

プルダウンメニューは「小」「通常」「大」「特大」「カスタム」が指定可能になっており、「カスタム」以外は便宜上$arr2で指定した配列の内容が適用されていることがわかる。

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

array(
	'name'      => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ),
	'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
	'size'      => 21,
	'slug'      => 'normal',
)

// 上記の連想配列をprint_rで表示
Array
(
    [name] => 通常
    [shortName] => 中
    [size] => 21
    [slug] => normal
)

sizeで指定する値はpx値となり、小数点を含んだ値も指定できる。またslugの値は、「標準」の場合は'has-normal-font-size'のようにclass属性値の一部として使用される。

テーマによる違い

'editor-font-sizes'で指定する文字サイズ設定はテーマによって異なり、「Twenty Twenty」と「Twenty Nineteen」では次のようになっている。

name | slugTwenty TwentyTwenty Nineteen
小 | small1819.5
通常 | normal2122
大 | large26.2536.5
特大 | larger32
特大 | huge49.5

「Twenty Twenty」の文字サイズは「Twenty Nineteen」からやや小さくなっており、翻訳されたnameはどちらも「特大」だがslugが異なっているので注意したい。

子テーマで文字サイズを変える

ブロックエディターの文字サイズ設定を変更する準備として、確認用に「Hello world!」の段落ブロックの文字サイズを「小」に変更する。その部分のHTMLコードと表示内容は次の通りである。

WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。

子テーマは前回作成したものを使用し、適宜修正していく。

まずはstyle.cssには以下を追加する。

/* Block Font Sizes -------------------------- */

.entry-content .has-small-font-size {
	font-size: 0.75em;
}

.entry-content .has-normal-font-size,
.entry-content .has-regular-font-size {
	font-size: 0.9em;
}

こちらは「小」と「通常」を少し小さくしたもの。ブロックエディターの編集画面を気にしなければ、このstyle.cssの修正で対応できる。

続いてブロックエディターの編集画面に対応するため、functions.phpを修正する。赤字部分が前回の内容に追加したところだ。

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] );

	$new_sizes = array(
		'small'		=> 16,
		'normal'	=> 18.5,
	);
	$editor_font_sizes = get_theme_support( 'editor-font-sizes' );
	foreach ( $editor_font_sizes[0] as $i => $set ) {
		if ( isset( $new_sizes[ $set['slug'] ] ) ) {
			$editor_font_sizes[0][$i]['size'] = $new_sizes[ $set['slug'] ];
		}
	}
	add_theme_support( 'editor-font-sizes', $editor_font_sizes[0] );
}

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

追加したところでは、まず親テーマで設定された文字サイズ設定情報を get_theme_support関数で取得し、その配列の中の「小」と「通常」のサイズを「16」と「18.5」にそれぞれ変更。add_theme_support関数で再設定している。

以上の変更内容を確認するため、編集ページを再読み込みし、編集画面から確認してみる。

ブロックエディターの変更前(左)と変更後(右)

「18」から「16」への変更なので違いはわずかだが、右側の方が文字サイズが小さくなっていることは確認できる。

次にプレビュー画面を比較する。

プレビューの変更前(左)と変更後(右)

編集画面と同様、変更後の方が文字サイズは小さい。

まとめ

'editor-font-sizes'で指定する文字サイズ色情報の配列は制限はない。今回紹介したように既存のテーマからの移行する場合は各サイズのslugを引き継ぐことで、既存の投稿を変更することなく新しいサイズを適用できる。

最後に、ブロックエディターの「テキスト設定」パネルはプルダウンメニューの横には数値を直接指定できる入力ボックスがある。この入力ボックスが不要な場合は'after_setup_theme'アクションなどに次の内容を追加することで無効化できる。

add_theme_support( 'disable-custom-font-sizes' );

最終更新 : 2019年12月12日 09:02


お勧め

get_the_date(2018年5月27日 更新)

mixed get_the_date ( [ string $d = '' [ , mixed $post = null ] ] )
パラメータ$dで指定したフォーマットで投稿日を取得する。

is_php_version_compatible(2019年5月10日 更新)

bool is_php_version_compatible( string $required )
PHPバージョンの互換性を調べる。

in_category(2018年5月27日 更新)

bool in_category( mixed $category [ , mixed $post = null ] )
投稿情報が指定したカテゴリーに属しているか調べる。

get_category(2018年5月27日 更新)

mixed get_category( mixed $category [ , string $output = OBJECT [ , string $filter = 'raw' ] ] )
IDを指定してカテゴリー情報を取得する。

add_action(2018年5月27日 更新)

bool add_action( string $tag, mixed $function_to_add [ , int $priority = 10 [ , int $accepted_args = 1 ] ] )
WordPressシステムの関数にアクション関数を追加する。