WordPress
更新日 : 2021年4月14日
投稿日 : 2020年4月14日

エディタのフォントを設定する方法(WordPress5.4以降)

エディタのフォントを設定する方法(WordPress5.4以降)の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして8年~の経験があります。WordPressは2年半~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

WordPress5.4以上のアップデートに伴い、Nao Lightは
「管理画面のエディタのフォントが適用されていない!」
問題を修正しました。

しかし、従来は適用されていたのに、どうして適用されなくなったのか?

原因:「そのクラスCSSが適用されなくなったから」

単純な話です。指定していたクラスのCSSが適用されなくなりました。

どうも、指定はちゃんと入っているものの、別のCSSで上書きされていたようです。

適用できる新しい書き方

管理画面のエディタに指定のフォントを適用するには、テーマ直下に「editor-style.css」を配置します。
そのファイルをfunction.phpで読みこませるように指定することで、その中に書いたCSSが反映されます。

editor-style.cssは以下の通りです。

div.editor-styles-wrapper {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

「div.editor-styles-wrapper」です。divタグの中のeditor-styles-wrapperに適用させることで、エディタに指定のフォントを反映されるようになります。

参考)従来の書き方

.editor-block-list__block {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}

今まではこれで適用されましたし、検索するとこのやり方が当たると思います。
しかし、適用範囲を確認してみるとわかりますが、これだと5.4以降は上書きされています。

参考)管理画面のエディタにeditor-style.cssを適用させるfunction.phpの書き方

以下のようになります。「enqueue_block_editor_assets」にアクションフックをかけます。

function customEditorSettings() {
    wp_enqueue_style('theme-editor-style', get_stylesheet_directory_uri() . '/editor-style.css');
}
add_action('enqueue_block_editor_assets', 'customEditorSettings');