この記事は最後に更新してから1年以上経過しています。
説明
今回は「前回投稿した内容」の続きブロックエディターの文字サイズ設定を変えようと思う。参考にするテーマはもちろん「Twenty Twenty」である。
ポイントはadd_theme_support関数
まずは「Twenty Twenty」のafter_setup_themeアクションから。twentytwenty_block_editor_settings関数ではブロックエディターに関連する次のような設定が行われている
add_theme_support( 'editor-color-palette', $arr1 );でカラーパレットを設定。add_theme_support( 'editor-font-sizes', $arr2 );で文字サイズを設定。- 文字色が白の場合は
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 | slug | Twenty Twenty | Twenty Nineteen |
|---|---|---|
| 小 | small | 18 | 19.5 |
| 通常 | normal | 21 | 22 |
| 大 | large | 26.25 | 36.5 |
| 特大 | larger | 32 | － |
| 特大 | huge | － | 49.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
関連
お勧め
wp_authenticate（2022年1月31日 更新）
WP_User | WP_Error wp_authenticate( string $username, string $password )
ユーザー認証を行う。
wp_send_json_success（2020年12月10日 更新）
void wp_send_json_success( [ mixed $response = null [ , int $status_code = null [ , int $options = 0 ] ] ] )
AJAXリクエストの成功レスポンスとしてJSON情報を返す。
wp_oembed_get（2014年11月16日 更新）
mixed wp_oembed_get( string $url [ , mixed $args = '' ] )
oEmbedに対応したページの埋め込み用コンテンツを取得する。
setup_postdata（2014年11月16日 更新）
bool setup_postdata( stdClass $post )
投稿記事に関連するグローバル変数を設定する。
the_permalink（2018年5月27日 更新）
void the_permalink( [ mixed $post = 0 ] )
現在の投稿データのパーマリンクを表示する。