このページは2017年12月16日に更新されました
WordPressを使い始めてからというもの、ずっと悩まされてきたフォントの変更。この度晴れて現在使用中の「Skeleton」というテーマでの「メイリオ」や「ヒラギノ角ゴ」などの日本語向けフォントの追加・変更ができたので手順をご紹介します。
※WordPressにはじめからインストールされているTwentyシリーズは、この方法ではフォントを追加・変更できそうにありません(書き換えるファイルふたつのうちひとつが同じ名前では存在しないため方法が分かりません)。
以下の方法でできること：「Skeleton」の外観 〉 Theme OptionsのMain Body Typographyドロップダウンリストに日本語向けのフォントを選択肢として加えることにより、フォント変更をする。
WordPress内での直接編集を例に進めていきますが、行番号も示していきますから、TeraPadなどのソフトを使った方が分かりやすいかもしれません。
処理前のバックアップを強くおすすめします。
1. 「style.php」内にFont Stack(フォントスタック)を追加する
外観 〉 テーマ編集で右のファイル一覧から「style.php」を開きます。「style.php」はテーマ編集の画面で最初に開いている「スタイルシート(style.css)の4つ上にあります。
24行目から
// Declare CSS Font Stacks for reuse
が始まります。
これまでに何もしていなければ、26行目から以下の内容が続きます。
$helvetica = '"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif';
$arial = 'Arial, Helvetica, sans-serif';
$georgia = 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif';
$cambria = 'Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif';
$tahoma = 'Tahoma, Verdana, Segoe, sans-serif';
$palatino = '"Palatino Linotype", Palatino, Baskerville, Georgia, serif';
この下に、自分の使いたいフォント群を追加します。$の後はフォント群の任意の名前、=の後は使いたいフォントをカンマと半角スペースで区切って’ ‘で囲んで最後に;をつけます。フォント名にスペースが入る場合と日本語の場合はフォント名を””で囲みます。
ご覧のサイトの場合、37行目に
$meiryo = '"メイリオ", Meiryo, "Lucida Grande", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif';
を加えています。
この部分は加筆後の完成形がこんな風になっています。
// Declare CSS Font Stacks for reuse
$helvetica = '"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif';
$arial = 'Arial, Helvetica, sans-serif';
$georgia = 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif';
$cambria = 'Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif';
$tahoma = 'Tahoma, Verdana, Segoe, sans-serif';
$palatino = '"Palatino Linotype", Palatino, Baskerville, Georgia, serif';
$meiryo = '"メイリオ", Meiryo, "Lucida Grande", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif';
2. 「style.php」内のMain Body Styles(メイン・ボディ・スタイル)に「elseif」文を追加する
さきほどの部分から少し下がって46行目辺りに
// Main Body Styles
を見つけてください。
その下に、ifに続いてelseifという文字列が並んでいると思います。elseif ($typography[‘face’] == の後には手順1で$の後に入れたフォント群の名前を””で囲んで書きます。$fontstack = の後は$フォント群の名前;になります。半角スペースなどは入っていても分かりづらいので、以下をコピーし利用したいフォント群の名前を””の間と$のあとにmeiryoと置き換えると間違いが少なく済むと思います。
elseif ($typography['face'] == "meiryo") {
$fontstack = $meiryo;
}
この部分は上記をコピーしたとしても、どこに挿入するか一瞬では分かりづらいです。一つ上の行となる
$fontstack = $palatino;
}
の最後の「}」に注目してください。elseifから始まるコピーを書き加えるのは、この「}」のあとに半角スペースを入れたところです。
この部分に上記の加筆をするとこんな風になっています。
// Main Body Styles
echo 'body {';
if ($typography) {
if ($typography['face'] == "helvetica") {
$fontstack = $helvetica;
} elseif ($typography['face'] == "arial") {
$fontstack = $arial;
} elseif ($typography['face'] == "georgia") {
$fontstack = $georgia;
} elseif ($typography['face'] == "cambria") {
$fontstack = $cambria;
} elseif ($typography['face'] == "tahoma") {
$fontstack = $tahoma;
} elseif ($typography['face'] == "palatino") {
$fontstack = $palatino;
} elseif ($typography['face'] == "meiryo") {
$fontstack = $meiryo;
}
2+1/2. 「style.php」内のH1 SettingsからH5 Settings内に「elseif」文を追加する
この項目の手順は、飛ばしても今のところフォントの変更に影響はないようです。私は念のため、加筆しています。
// Main Body Stylesから順に下へ見ていくと、// H1 Settingsという見出しでh1からh5までのセッティング内にさらにif,elseif文が続きます。手順2.と同様に使いたいフォントを追加します。
このサイトであれば
elseif ($h1['face'] == "meiryo") {
$fontstack = $meiryo;
}
の$h1の部分をh2,h3…として追加してあります。
手順2、または2+1/2まで済んだら、「style.php」は上書き保存します。
3. 「options-sanitize.php」の「recognized font faces」部分に、Theme OptionsのMain Body Typographyドロップダウンリストで表示させたいフォント群の名前を追加する
外観 〉 テーマ編集右のファイル一覧から、今度は「option-sanitize.php」を見つけます。上から6番目です。299行目から
function of_recognized_font_faces
が始まります。
ここではstyle.phpの
// Declare CSS Font Stacks for reuse
部分で$のあとにつけたフォント群の名前を、Theme OptionsのMain Body Typographyドロップダウンリストにどんな文字列で表示させるかを記入します。
「options-sanitize.php」の299行目に
function of_recognized_font_faces
を見つけます。
301行目から
'helvetica' => 'Helvetica Neue, Helvetica*',
'arial' => 'Arial, Helvetica',
'tahoma' => 'Tahoma, Verdana',
'georgia' => 'Georgia, Constantia',
'cambria' => 'Cambria, Times New Roman',
'palatino' => 'Palatino Linotype, Garamond'
);
という文字列が並んでいます。style.phpで$のあとにつけたフォント群の名前が、左側に’ ’で囲って書かれています。=>の右側にはMain Body Typographyドロップダウンリストに表示させたい文字列が’ ’で囲ってあります。
このサイトでは、
'meiryo' => 'Meiryo, sans-serif'
のように記述しました。この一文は’palatino’の行の次の行にある};より前に書かれている必要があります。
上の例であれば、meiryoを加えた後はこんな風になっています。
function of_recognized_font_faces() {
$default = array(
'helvetica' => 'Helvetica Neue, Helvetica*',
'arial' => 'Arial, Helvetica',
'tahoma' => 'Tahoma, Verdana',
'georgia' => 'Georgia, Constantia',
'cambria' => 'Cambria, Times New Roman',
'palatino' => 'Palatino Linotype, Garamond',
'meiryo' => 'Meiryo, sans-serif'
);
ここまでできたら「options-santitize.php」を上書き保存します。
4. Theme OptionsのMain Body Typographyドロップダウンリストから、追加したフォントを選択する
いよいよフォントを変更します。外観 〉 Theme Opthionに行き、「
Main Body Typography」を見つけます。3つ並んだドロップダウンリストの真ん中がフォント指定になっています。
「Meiryo, sans-sherif」、またはご自身が選んだフォント群の名前がリストの最後に加わっていますから、これを選択し画面右下の「Save Options」をクリックして変更を保存します。
どうでしたか。リストにあなたの希望するフォントは加わっていましたか。その選択はサイトに反映されましたか。もしできなかったら、’ ‘””;など欠けているものはないか確認してみてください。元々ある文字列をコピーして必要なところだけ変えるようにすれば文字欠けは防げますが、それでも見落としてしまうことはあります。
また、私はプラグインなどほとんど入っていない、大きな書き換えもこれが初めて、という状態での処理でしたから、その辺りに違いがあると同じ事をしても違う結果になるかもしれません。
ご質問は、いただいても私自身まだcssとphpの差がきちんとは分からない、程度の知識しかないのでお答えはできません。詳しい方が見えて答えてくださる可能性もなくはないかも・・・。
見た目で一番気になっていたフォントが変更できたので、サイトの編集も一層楽しくなりそうです。きっと、新しいことに手を付けたら、また新しいことで悩むんでしょうね。それも含めて、楽しんでいきたいです。
おまけ
前回
WordPressでフォントを変更したいのにstyle.cssのfont-familyを変更しても反映されない
という記事にこの処理と、成功に至るまでの経過を書きました。現在ご覧いただいているフォントになるまでにどんなことがあったのか知りたい方は、お茶のお供の読み物にいかがてしょうか。
