WordPress 関数 add_editor_styleを使ってビジュアルエディターのフォントを変更する

WordPressの「投稿の編集」画面のビジュアルタブで表示される文字フォントが「明朝体」である事が以前から気になっていました。

実際に表示する場合は「ゴシック体」にしているので編集時も「ゴシック体」の方が違和感が無いということで、編集画面のフォントを変更する方法を試してみました。

ネット検索すると方法はいろいろ出てきますがキモはadd_editor_style関数かということでWordPressの関数リファレンスを確認すると手法が載っています。

今回はこの方法で変更してみます。

1. functions.php

子テーマの「functions.php」に以下を追加

function custom_editor_settings(){
   add_editor_style('editor-style.css');
}
add_filter( 'admin_init', 'custom_editor_settings' );

2. editor-style.css

CSSスタイルファイルを子テーマフォルダに作成しフォントやサイズなどを指定。

body#tinymce.wp-editor {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
    font-size: 14px;
}

以上でビジュアルエディタのフォントが変更されます。