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

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

説明

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

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

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

テーマTwenty Twenty-OneでKiwi Maruを使ってみた

まずはフロント側

プラグインは、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で対応したりする方が直接的で簡単なんだけどね。(続く)


最終更新 : 2021年12月15日 15:16


お勧め

get_post_time(2018年5月27日 更新)

mixed get_post_time( [ string $d = 'U' [ , bool $gmt = false [ , mixed $post = null [ , bool $translate = false ] ] ] ] )
パラメータ$dで指定されたフォーマットに従って投稿データの投稿時刻を取得する。

has_tag(2012年1月17日 更新)

bool has_tag( [ mixed $tag = '' [ , mixed $post = null ] ] )
投稿記事に投稿タグが付属しているか調べる。

delete_term_meta(2018年5月27日 更新)

bool delete_term_meta( int $term_id, string $meta_key [ , mixed $meta_value = '' ] )
タームのメタ情報を削除する。

wp_save_post_revision(2023年4月3日 更新)

int | WP_Error | void wp_save_post_revision( int $post_id )
現状の投稿のリビジョンを作成する。

safecss_filter_attr(2023年3月31日 更新)

string safecss_filter_attr( string $css [ , string $deprecated = '' ] )
インラインスタイルをサニタイズする。