この記事は最後に更新してから1年以上経過しています。
説明
先日投稿した「テーマを変更せずに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 | |
|---|---|
| Twenty Nineteen | |
| Twenty Seventeen | |
テーマ「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 | |
|---|---|
| Twenty Nineteen | |
| Twenty Seventeen | |
「Twenty Twenty」「Twenty Nineteen」「Twenty Seventeen」それぞれのブロックエディターは、それぞれ次のようになった。
各テーマのブロックエディターを見比べると、「Twenty Seventeen」のフォントサイズはやや小さく感じる。こちらについてはフォントサイズを調整した方が良さそうだ。
「Twenty Twenty」「Twenty Nineteen」「Twenty Seventeen」の3テーマは、このような感じでWebフォントを適用できた。ブロックエディター側はblock_editor_settings_allフィルターではなくadmin_footerアクションで対応したところがポイントであり、テーマによってどちらかを使い分けすることになる。
最終更新 : 2022年02月08日 10:54
関連
お勧め
delete_post_meta（2018年5月27日 更新）
bool delete_post_meta( int $post_id, string $meta_key [ , mixed $meta_value = '' ] )
投稿情報のカスタムフィールド情報を削除する。
wp_is_numeric_array（2018年5月27日 更新）
bool wp_is_numeric_array( mixed $data )
数値キーのみの配列か調べる。
get_tag_regex（2013年8月3日 更新）
string get_tag_regex( string $tag )
HTMLタグの正規表現パターンを取得する。
get_all_page_ids（2012年5月30日 更新）
array get_all_page_ids( )
全ページ（post_typeが'page'）の投稿IDを取得する。
the_post_thumbnail_caption（2018年5月27日 更新）
void the_post_thumbnail_caption( mixed $post = null )
投稿ページのサムネイル（アイキャッチ画像）キャプションを表示する。