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

説明

先日投稿した「テーマを変更せずにWebフォントを使ってみた」では、テーマ「Twenty Twenty One」でWebフォントを使うことができた。その後、ほかのテーマで試したところ、そのままではWebフォントを使うことができなかった。今回は、それらのテーマの対応について紹介する。

CSSカスタムプロパティ(変数)

「Twenty Twenty One」のstyle.cssでは、フォント名の指定にCSSカスタムプロパティを使っている。

--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);

これにより、CSSカスタムプロパティ--global--font-primaryに使用するWebフォントの名前を追加することで、Webフォントを使うことができた。

WordPressに同梱されている「Twenty Twenty One」以外のテーマでは、IEがCSSカスタムプロパティをサポートしていないこともあり、それらのstyle.cssでは該当する要素向けに直接font-familyが指定され、日本語環境の場合をそれらのスタイルをインラインCSSで上書きするようになっている。例えば「Twenty Twenty」の場合、日本語環境のフロントエンド側では次のような指定が適用されている。

body, input, textarea, button, …中略… .widget-content .wp-caption-text {
	font-family: sans-serif;
}

また「Twenty Nineteen」と「Twenty Seventeen」の場合はそれぞれのstyle.cssに日本語環境用のスタイルが記述され、それが適用されている。

このようなことから「Twenty Twenty One」「Twenty Nineteen」「Twenty Seventeen」のフロントエンド側については、「Twenty Twenty One」と同じようにwp_get_custom_cssフィルターで対象となる要素のfont-family設定を上書きすることで対応できる。具体的な各テーマの設定内容は次の通り。

テーマ追加する内容
Twenty Twenty
body, input, textarea, button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, .has-drop-cap:not(:focus)::first-letter, .entry-content .wp-block-archives, .entry-content .wp-block-categories, .entry-content .wp-block-cover-image, .entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-posts, .entry-content .wp-block-pullquote, .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large, .entry-content .wp-block-archives *, .entry-content .wp-block-categories *, .entry-content .wp-block-latest-posts *, .entry-content .wp-block-latest-comments *, .entry-content p, .entry-content ol, .entry-content ul, .entry-content dl, .entry-content dt, .entry-content cite, .entry-content figcaption, .entry-content .wp-caption-text, .comment-content p, .comment-content ol, .comment-content ul, .comment-content dl, .comment-content dt, .comment-content cite, .comment-content figcaption, .comment-content .wp-caption-text, .widget_text p, .widget_text ol, .widget_text ul, .widget_text dl, .widget_text dt, .widget-content .rssSummary, .widget-content cite, .widget-content figcaption, .widget-content .wp-caption-text {
	font-family: "Kiwi Maru", sans-serif;
}
Twenty Nineteen
body:lang(ja), button:lang(ja), input:lang(ja), select:lang(ja), optgroup:lang(ja), textarea:lang(ja), .author-description .author-link:lang(ja), .comment-metadata:lang(ja), .comment-reply-link:lang(ja), .comments-title:lang(ja), .comment-author .fn:lang(ja), .discussion-meta-info:lang(ja), .entry-meta:lang(ja), .entry-footer:lang(ja), .main-navigation:lang(ja), .no-comments:lang(ja), .not-found .page-title:lang(ja), .error-404 .page-title:lang(ja), .post-navigation .post-title:lang(ja), .page-links:lang(ja), .page-description:lang(ja), .pagination .nav-links:lang(ja), .sticky-post:lang(ja), .site-title:lang(ja), .site-info:lang(ja), #cancel-comment-reply-link:lang(ja), h1:lang(ja), h2:lang(ja), h3:lang(ja), h4:lang(ja), h5:lang(ja), h6:lang(ja), .page-title:lang(ja), blockquote cite:lang(ja), table:lang(ja), .button:lang(ja), input:lang(ja)[type="button"], input:lang(ja)[type="reset"], input:lang(ja)[type="submit"], .comment-navigation .nav-previous:lang(ja), .comment-navigation .nav-next:lang(ja), .comment-list .pingback .comment-body:lang(ja), .comment-list .trackback .comment-body:lang(ja), .comment-list .pingback .comment-body .comment-edit-link:lang(ja), .comment-list .trackback .comment-body .comment-edit-link:lang(ja), .comment-form .comment-notes:lang(ja), .comment-form label:lang(ja), .widget_archive ul li:lang(ja), .widget_categories ul li:lang(ja), .widget_meta ul li:lang(ja), .widget_nav_menu ul li:lang(ja), .widget_pages ul li:lang(ja), .widget_recent_comments ul li:lang(ja), .widget_recent_entries ul li:lang(ja), .widget_rss ul li:lang(ja), .widget_tag_cloud .tagcloud:lang(ja), .widget_calendar .calendar_wrap .wp-calendar-nav:lang(ja), .entry .entry-content .wp-block-button .wp-block-button__link:lang(ja), .entry .entry-content .wp-block-archives li > a:lang(ja), .entry .entry-content .wp-block-categories li > a:lang(ja), .entry .entry-content .wp-block-latest-posts li > a:lang(ja), .entry .entry-content .wp-block-latest-posts .wp-block-latest-posts__post-date:lang(ja), .entry .entry-content .wp-block-verse:lang(ja), .entry .entry-content .has-drop-cap:lang(ja):not(:focus):first-letter, .entry .entry-content .wp-block-pullquote cite:lang(ja), .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text:lang(ja), .entry .entry-content .wp-block-cover-image .wp-block-cover-text:lang(ja), .entry .entry-content .wp-block-cover-image h2:lang(ja), .entry .entry-content .wp-block-cover .wp-block-cover-image-text:lang(ja), .entry .entry-content .wp-block-cover .wp-block-cover-text:lang(ja), .entry .entry-content .wp-block-cover h2:lang(ja), .entry .entry-content .wp-block-audio figcaption:lang(ja), .entry .entry-content .wp-block-video figcaption:lang(ja), .entry .entry-content .wp-block-image figcaption:lang(ja), .entry .entry-content .wp-block-gallery .blocks-gallery-image figcaption:lang(ja), .entry .entry-content .wp-block-gallery .blocks-gallery-item figcaption:lang(ja), .entry .entry-content .wp-block-file:lang(ja), .entry .entry-content .wp-block-file .wp-block-file__button:lang(ja), .entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta:lang(ja), .wp-caption-text:lang(ja), .gallery-caption:lang(ja) {
	font-family: "Kiwi Maru", -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif;
}
Twenty Seventeen
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea {
	font-family: "Kiwi Maru", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

テーマ「Twenty Nineteen」では適用される要素も多く、それらに:lang()疑似クラスを使用しているため、他よりも長めになっていることがわかる。

head要素とbody要素

ブロックエディター側は「Twenty Twenty One」と同じblock_editor_settings_allフィルターを使おうと考えたが、「Twenty Twenty」「Twenty Nineteen」「Twenty Seventeen」のいずれも期待通りにはならなかった。その理由は、「Twenty Twenty」はhead要素内に、「Twenty Nineteen」と「Twenty Seventeen」はbody要素内に日本語環境用のスタイルを出力しているためだ。

「Twenty Twenty」に関してはadmin_headアクションでも対応可能だが、「Twenty Nineteen」と「Twenty Seventeen」についてはadmin_footerアクションでの対応となる。そこで今回は3つまとめてadmin_footerアクションで対応する。

function my_custom_css_footer() {
	$block_editor_font_replace = [
		'twentytwenty'    => "ここにTwenty Twenty用のスタイル",
		'twentynineteen'  => "ここにTwenty Nineteen用のスタイル",
		'twentyseventeen' => "ここにTwenty Seventeen用のスタイル"
	];
	if ( is_child_theme() ) {
		$stylesheet = get_template();
	} else {
		$stylesheet = get_stylesheet();
	}
	if ( isset( $block_editor_font_replace[$stylesheet] ) ) {
?>
<style type="text/css">
<?php echo $block_editor_font_replace[$stylesheet]; ?>
</style>
<?php
	}
}

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

このadmin_footerアクションでは、子テーマの場合は親テーマの名前を、子テーマ以外の場合は自身のテーマ名を取得し、それに応じたスタイルをフッター部分に出力している。各テーマの具体的なスタイル内容は次の通り。

テーマ追加する内容
Twenty Twenty
.editor-styles-wrapper > *, .editor-styles-wrapper p, .editor-styles-wrapper ol, .editor-styles-wrapper ul, .editor-styles-wrapper dl, .editor-styles-wrapper dt, .editor-post-title__block .editor-post-title__input, .editor-styles-wrapper .wp-block h1, .editor-styles-wrapper .wp-block h2, .editor-styles-wrapper .wp-block h3, .editor-styles-wrapper .wp-block h4, .editor-styles-wrapper .wp-block h5, .editor-styles-wrapper .wp-block h6, .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter, .editor-styles-wrapper cite, .editor-styles-wrapper figcaption, .editor-styles-wrapper .wp-caption-text {
	 font-family: "Kiwi Maru", sans-serif;
}
Twenty Nineteen
.editor-styles-wrapper:lang(ja), .editor-styles-wrapper h1:lang(ja), .editor-styles-wrapper h2:lang(ja), .editor-styles-wrapper h3:lang(ja), .editor-styles-wrapper h4:lang(ja), .editor-styles-wrapper h5:lang(ja), .editor-styles-wrapper h6:lang(ja), .editor-styles-wrapper figcaption:lang(ja), .editor-styles-wrapper .gallery-caption:lang(ja), .editor-styles-wrapper .editor-post-title__block .editor-post-title__input:lang(ja), .editor-styles-wrapper .block-editor-default-block-appender textarea.block-editor-default-block-appender__content:lang(ja), .editor-styles-wrapper .wp-block-paragraph.has-drop-cap:lang(ja):not(:focus)::first-letter, .editor-styles-wrapper .wp-block-table:lang(ja), .editor-styles-wrapper .wp-block-cover h2:lang(ja), .editor-styles-wrapper .wp-block-cover .wp-block-cover-text:lang(ja), .editor-styles-wrapper .wp-block-button .wp-block-button__link:lang(ja), .editor-styles-wrapper .wp-block-quote cite:lang(ja), .editor-styles-wrapper .wp-block-quote footer:lang(ja), .editor-styles-wrapper .wp-block-quote .wp-block-quote__citation:lang(ja), .editor-styles-wrapper .wp-block-pullquote[data-type="core/pullquote"] .wp-block-pullquote__citation:lang(ja), .editor-styles-wrapper .wp-block[data-type="core/pullquote"] .wp-block-pullquote__citation:lang(ja), .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation:lang(ja), .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation:lang(ja), .editor-styles-wrapper .wp-block-file:lang(ja), .editor-styles-wrapper ul.wp-block-archives li > a:lang(ja), .editor-styles-wrapper .wp-block-categories li > a:lang(ja), .editor-styles-wrapper .wp-block-latest-posts li > a:lang(ja), .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-date:lang(ja), .editor-styles-wrapper .wp-block-latest-comments .wp-block-latest-comments__comment-meta:lang(ja), .editor-styles-wrapper .wp-caption dd:lang(ja), .editor-styles-wrapper .wp-block-freeform blockquote cite:lang(ja) {
	font-family: "Kiwi Maru", -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif;
}
Twenty Seventeen
.editor-post-title__block .editor-post-title__input, .editor-styles-wrapper, .editor-styles-wrapper button, .editor-styles-wrapper input, .editor-styles-wrapper select, .editor-styles-wrapper textarea {
	font-family: "Kiwi Maru", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

「Twenty Twenty」「Twenty Nineteen」「Twenty Seventeen」それぞれのブロックエディターは、それぞれ次のようになった。

テーマTwenty TwentyのブロックエディターにKiwi Maruを適用

テーマTwenty NineteenのブロックエディターにKiwi Maruを適用

テーマTwenty SeventeenのブロックエディターにKiwi Maruを適用

各テーマのブロックエディターを見比べると、「Twenty Seventeen」のフォントサイズはやや小さく感じる。こちらについてはフォントサイズを調整した方が良さそうだ。


「Twenty Twenty」「Twenty Nineteen」「Twenty Seventeen」の3テーマは、このような感じでWebフォントを適用できた。ブロックエディター側はblock_editor_settings_allフィルターではなくadmin_footerアクションで対応したところがポイントであり、テーマによってどちらかを使い分けすることになる。


最終更新 : 2021年10月04日 15:11


お勧め

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 = '' ] )
投稿情報の抜粋記事を取得する。