WordPress Sydney（シドニー） でフォントを変更してスライダーのタイトルに反映させる

日本語フォントの変更

WordPressのテーマ、Sydney（シドニー）で日本語のフォントを変更した時の備忘録。

海外製のテーマは日本語のフォントが指定できなかったり、また指定しても反映されない領域があったりする。

シドニーでも本文のフォントは変わるのだがスライダーのタイトルや行動喚起ボタンのフォントがCSSで指定をしないと変更できなかったので、その時の事を記事にしておく。

今回はGoogleのWEBフォントに変更したがフリーのフォントを使用したい時はこちらの記事を参照してほしい。

WEBフォント

フォントをGoogle Fonts + 日本語から選択する。

元のフォントとの違いが分かるように”はんなり明朝”に変更してみる。

手順

主な手順は以下の通り。

1. 選択したフォントのHTML部分をコピーする
2. header.phpにてWebフォントを読み込む設定をする
3. style.cssでフォントを指定する

HTMLのコピー

”はんなり明朝”のHTML部分をコピーする。

header.phpの変更

header.phpを変更する。

子テーマを使用している場合は親テーマとはディレクトリを別にしているので親テーマのheader.phpを子テーマのディレクトリにコピーした後、編集する。

手順

1. 子テーマのディレクトリに移動する
2. 親テーマのheader.phpを子テーマにコピーする
3. 権限をwww-dataに変更する
4. header.phpに先程コピーしたHTML部分を追記する

※ 子テーマをsydney-childディレクトリに作成している前提

※ ubuntu OS の場合、www-dataが apache等のWEBサーバーを操作するデフォルトのユーザとグループ

cd /var/www/wordpress/wp-content/themes/sydney-child
sudo cp ./../sydney/header.php ./
sudo chown www-data:www-data header.php
sudo vi header.php

HTML部分を追記したheader.php

尚、流れでheader.phpをコピーした後、viエディターで編集をしたがWordPressのメニューから外観、テーマエディターで子テーマのテーマヘッダー（header.php）を呼び出して修正、「ファイルを更新」しても良い。

style.cssでフォントの指定

先程のメニューからスタイルシート（style.css）を選択するか、WordPressのメニューから外観、カスタマイズ、追加CSSにて下記を追加する。

ヘッダースライダーのタイトルのフォントの指定方法を変更した。

/* 本文 */
body { font-family: "Hannari"; }

/* ヘッダースライダーのタイトル */
.text-slider .maintitle {
  font-family: "Hannari";
  font-size : 40px;
}

/* 行動喚起ボタン */
a.roll-button.button-slider { font-family: "Hannari"; }

/* メニュー */
#mainnav ul li a {
font-family: "Hannari";}

フォントが”はんなり明朝”に変更された。

以上でシドニーでの日本語フォントの変更についての記事を終了する。