テーマを変更せずにWebフォントを使ってみた

説明

Windows環境のブロックエディターは、シンプルな角ゴシック体で表示され、少し味気ないものだ。趣味的なサイトであればもう少し柔らかい書体でもいいのでないかと思い、Google Fontsの日本語フォントを覗いてみた。

充実してきたGoogle Fontsの日本語フォント

久しぶりにGoogle Fontsを覗いてみると、日本語フォントが31種類に増えていた（2021年9月21日現在）。ゴシック体、明朝体、手書き書体などさまざまだが、ここでは硬すぎず、柔らかすぎない「Kiwi Maru」を使ってみることにした。なお、テーマのアップデートを考慮し、実装はテーマのfunctions.phpではなく、プラグインにしようと思う。

まずはフロント側

プラグインは、wp-content/pluginsディレクトリの下に適当な名前のディレクトリを作成し、その中に以下の内容のindex.php（PHPファイル名も適当でよい）を配置して、プラグインを有効化する。

<?php
/*
 Plugin Name: Using Google Fonts
 Description: Try using Google Fonts for a change.
 Version: 0.0.1
 */

function link_google_fonts() {
	?>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap" rel="stylesheet">
	<?php
}
add_action( 'wp_head', 'link_google_fonts' );

function my_custom_css( $css, $stylesheet ) {
	$append = <<<END
:root {
	--global--font-primary: var(--font-family-primary, "Kiwi Maru", --global--font-primary);
	--global--font-secondary: var(--font-family-secondary, "Kiwi Maru", --global--font-secondary);
}
END;
	return $css . $append;
}
add_filter( 'wp_get_custom_css', 'my_custom_css', 10, 2 );

ここではまずwp_headアクションで、Googleフォント関連のlink要素を出力している。このlink要素は、使用したいフォント詳細ページで「Select this style」をクリックすることで確認できる（すでに何等かの書体を選択済みの場合は、ページ右上のアイコンをクリック）。

次はフォント名の変更部分だが、ここではwp_headアクションを使用ぜず、テーマカスタマイザーの「追加CSS」の機能を利用している。wp_headアクションの場合、優先度のパラメータで出力場所を制御することになり、意図したところに出力できないことがある。これに対して「追加CSS」に指定した内容は、head要素の最終部分に出力されるようになっており、こちらの方が確実だと考えたからだ。

なおwp_get_custom_cssフィルターで追加した内容は、あくまでhead要素の出力時も適用されるものであり、「追加CSS」の内容として保存されるものではないので、その点は安心してほしい。

ブロックエディターにも適用できる！？

ブロックエディターでGoogleフォントを使用するために追加したコードは次の通りである。

global $pagenow;
if ( is_admin() && in_array( $pagenow, array( 'post.php', 'post-new.php' ) ) ) {
	add_action( 'admin_head', 'link_google_fonts' );
}

function my_block_editor_settings( $editor_settings, $block_editor_context ) {
	if ( isset( $editor_settings['styles'] ) ) {
		foreach ( $editor_settings['styles'] as $key => $style ) {
			if ( isset( $style['__unstableType'] ) && 'theme' === $style['__unstableType'] ) {
				$append = <<<END
:root {
	--global--font-primary: var(--font-family-primary, "Kiwi Maru", --global--font-primary);
	--global--font-secondary: var(--font-family-secondary, "Kiwi Maru", --global--font-secondary);
}
END;
				$editor_settings['styles'][$key]['css'] .= $append;
			}
		}
	}
	return $editor_settings;
}
add_filter( 'block_editor_settings_all', 'my_block_editor_settings', 10, 2 );

link要素の追加はadmin_headアクションを使用する。ただし、ブロックエディター以外のページでは不要なので、グローバル変数$pagenowでページファイルを確認し、該当するページのみadmin_headアクションを呼び出すようにした。

このプラグインを作成する当初、これでブロックエディターにもGoogleフォントが適用されるものと考えていたが、「追加CSS」の内容はブロックエディターには適用されず、ブロックエディターの表示はいままで通りだった。あれこれ調べた結果、たどり着いたのがblock_editor_settings_allフィルターである。

block_editor_settings_allフィルターは、ブロックエディターの各種設定を取得できる get_block_editor_settings関数にあるフィルターの1つである。このフィルターの第1パラメータ$editor_settingsには、PHP側からブロックエディター本体のJavaScript側へ引き継がれるパラメータ内容が格納されており、その中にはテーマのstyle.cssの内容も含まれている。このstyle.cssの内容にフォント名の変更部分を追加することで、ブロックエディターにもGoogleフォントが適用できた。

今回はWordPress 5.8.1のテーマ「Twenty Twenty-One」で、テーマを変更せずにGoogleフォントの「Kiwi Maru」を使えるようにしてみた。プラグインにより、フロント側だけでなく、ブロックエディター側でもWebフォントが使用できるのはちょっとした新発見だった。

まあ、ちょっとWebフォントを試すだけなら、現在使用しているテーマのstyle.cssを修正したり、小テーマのstyle.cssで対応したりする方が直接的で簡単なんだけどね。（続く）