結構前に利用していた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です。
