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

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

説明

今回は「前回投稿した内容」の続きブロックエディターの文字サイズ設定を変えようと思う。参考にするテーマはもちろん「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_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 = '' ] )
投稿情報の抜粋記事を取得する。