カテゴリー
WordPress

【WordPress】Twenty Fifteen 子テーマ。ブログ編集時の本文フォントが正しく設定されない問題を add_editor_style 関数で解決しました♪

Twenty Fifteen 子テーマで公開した投稿のフォントを変更した時に気がついた、管理者ページ側の問題点

  • 投稿の編集ページの入力フォームフォントが Noto Serif に設定されている。タイトル入力フォームは問題ない。
  • しかしそのフォントは日本語が見つからないため設定されない。

問題解決まで

  1. 設定されないフォント、Noto Serif を指定している場所を探す
  2. 親テーマの functions.php で editor-style.css を検索、修正部分を特定する
  3. Noto Serif フォント指定をしている関数を子テーマで先に書く（オーバーライド（上書き）はできないが親テーマが関数を if で囲っているため親テーマで読込させないことが可能）
  4. 子テーマディレクトリに css/editor-style.css ファイルを作り、フォントの設定を上書きする

１．設定されないフォント、Noto Serif を指定している場所を探す

編集ページで Noto Serif を指定しているのは、twentyfifteen/css/editor-style.css で したの。

調べ方はブラウザのデベロッパーツールを使用いたしました。Chrome で編集ページを開き、問題となっている投稿本文部分を適当に選択して、右クリック「要素の検証」でデベロッパーツールを開きます。Elements の Styles から有効となっている font-family を探します。その右上のリンクとなっている CSS がフォントを指定している問題のファイルですの♪

２．親テーマの functions.php で editor-style.css を検索、修正部分を特定する

親テーマ Twentyt Fifteen の functions.php の中を、キーワード editor-style.css で検索しました。お見事！次がヒットしましたの♪

add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) );

このソースを真似たものを子テーマに作ってあげればなんとかなるかもしれませんわね。。。

add_editor_style 関数は、自分のスタイルシートファイルを TinyMCE ビジュアルエディタと関連付けできる機能とのこと。つまりは投稿編集ページ用に特化した CSS を読み込めるようですわ。

また、子テーマで add_editor_style 関数を使用しなくとも子テーマディレクトリにファイルがあれば子テーマのスタイルも自動的に読み込むようですの。

パッと思い浮かぶのは twentyfifteen_fonts_url() をウェブフォントの URL に置き換えるようにすればよさそうですの。

いいえ、それよりも twentyfifteen_fonts_url() を定義している部分をたどってみますと、関数が if ( ! function_exists で囲われていますので、twentyfifteen_fonts_url() を子テーマで定義してやればよいのですわ！

３．Noto Serif フォント指定をしている関数を子テーマで先に書く

functions.php のみ、子テーマで上書きされず、ファイル内で同じ名前の関数を書いてもオーバーライド（上書き）ができません。

しかしながら、関数自体が次のように if で囲われている場合は話が別ですの。

if ( ! function_exists( 'twentyfifteen_fonts_url' ) ) :

function twentyfifteen_fonts_url() {
    ...
}

endif;

これは、子テーマなどですでに「twentyfifteen_fonts_url」という名前の関数が定義されていない場合に限り、if 内の関数定義部分を実行する、ということを示しています。

つまり、子テーマで定義することで親テーマの関数を上書きすることはできませんけれども、子テーマで定義した場合は親テーマの関数を無効にすることができますの。

別の言い方をしますと、親テーマの if で囲った関数は、子テーマで同名の関数を定義することで、子テーマ関数のみを有効にできますわ。

親テーマの functions.php 内の twentyfifteen_fonts_url 関数は、上記のように if で囲われておりますので子テーマ の functions.php で次のように書くことで、読み込むウェブフォントを変更いたしました。

/**             
 * 本テーマ用に Google フォントを登録します。
 * 親テーマの同名の関数は無視され、この関数が使用されます。
 *
 * @return このテーマ用のGoogle フォント URL 文字列
 */
function twentyfifteen_fonts_url() {
        $fonts_url = '//fonts.googleapis.com/earlyaccess/notosansjapanese.css';
        return $fonts_url;
}

これで、親テーマで Noto Serif の代わりに Noto Sans Japanese が読み込まれるようになりました♪

なおこの変更により、編集画面の他に一般に公開される投稿ページでも親テーマでのフォント読み込みが Noto Serif ではなく Noto Sans Japanese へと変更されました。

なぜなら親テーマの functions.php の twentyfifteen_scripts() で次のように定義されているからです。

// Add custom fonts, used in the main stylesheet.
 wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

ということは、【WordPress】Twenty Fifteen 子テーマ の CSS の読み込み方を最新のやり方に改めました♪@import → wp_enqueue_style 関数 | oki2a24 で行いました、theme_enqueue_styles() の次の行は不要ですの♪

// ウェブフォントの読み込み
wp_enqueue_style( 'oki2a24com-twentyfifteen-child-fonts',  '//fonts.googleapis.com/earlyaccess/notosansjapanese.css');

４．子テーマディレクトリに css/editor-style.css ファイルを作り、フォントの設定を上書きする

子テーマでフォント部分を上書きした editor-style.css を作成いたします。ここまでは簡単ですわね。

では、どうやって読み込めばよいかしら？答えは、子テーマで add_editor_style 関数で editor-style.css を指定すれば親テーマと両方読み込んでくれる♪と思ったのですけれどももっと楽でした♪

親テーマで add_editor_style 関数が使われており、関数で指定された相対パスに同名のファイルを置けば自動的に読み込まれます。

従いまして、子テーマディレクトリに、css/editor-style.css ファイルを作るだけで OK ですわね♪

css/editor-style.css ファイルには次のように書きました。

/*              
Theme Name: Twenty Fifteen
Description: Used to style the TinyMCE editor.
*/

/**
 * 1.0 Body
 */

body {
        font-family: "Noto Sans Japanese", serif;
}

おわりに

本投稿は【WordPress】Twenty Fifteen の子テーマを作った記録！ | oki2a24 の課題「投稿の編集ページのフォントが Noto Serif で見つからないため設定されない。」を解決するものですの。

そして、【WordPress】Twenty Fifteen 子テーマ の CSS の読み込み方を最新のやり方に改めました♪@import → wp_enqueue_style 関数 | oki2a24 の続きとなります。

たくさんのことを学べました♪今回も満足ですの！

以上です。

コメントを残す