[WP] 子テーマ設定でWebフォントを使う

WordpressFont,WP-カスタマイズ

結構前に利用していたWordpressのプラグインの「wp-tegaki」。
長い間、更新されていないし、利用PHPのバージョンを7.1に上げた(*)際に、エラーで管理ページも開けなくなったので代替としてWebフォントを使うことに。
(* サーバーはさくらインターネットを利用しています。)

WordPressでは星の数ほどテーマはありますが、配信されているテーマをそのまま使うことはほとんど無く、カスタマイズした「子テーマ」として利用します。

子テーマ自体は他のサイトで沢山
[ 子テーマ – WordPress Codex 日本語版 ]


子テーマの設定

子テーマが実装された当初は style.css に親のstyle.cssを @import で読み込むことが定番だったけれど、昨今はfunction.phpで読み込み処理をするのが定番なのね。

style.css

/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/

スタイルシートヘッダにはいろいろ記載項目はありますが、最低限子テーマの名前となる「Theme Name」と親テーマとなる「Template」を設定してれば子テーマとして認識されます。
ちなみにTemplateは親テーマの名前ではなく、フォルダ名なので注意です。

function.php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

function.php では親テーマのcssファイルを読み込むコードを書きます。


Webフォントの選択

Webフォントを公開しているサイトはいろいろありますが、Googleでも公開されています。
日本語フォントも試験的に提供されています。

[ Google Fonts ]

[ Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access ]


Webフォント用に funtion.php の編集

Webフォントを利用するのに読込が必要なCSSファイルがあります。

たとえば Google Fonts日本語のM+1pフォントを使う場合

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

href属性で指定してる部分が読み込むCSSファイルになります。

これを読み込み処理を function.php に追加します。

function WebFontCSS() {
    wp_enqueue_style('mpuls1','https://fonts.googleapis.com/earlyaccess/mplus1p.css', array(), null, 'all');
}
add_action('wp_enqueue_scripts', 'WebFontCSS');


CSSでWebフォントの適用

style.css

.wf-mplus1p { font-family: "Mplus 1p"; }

使いたい箇所のCSSクラスのfont-family に追加したWebFontを設定してあればOKです。