WordPress投稿画面 テキストエディタのフォントを変更したい

2017年5月29日2017年6月6日Wordpress

投稿はビジュアルエディタじゃくてテキストエディタを使う派の僕です。

ふと、投稿画面のテキストエディタの文字小さくね？そしてフォント変えたくね？と思って調べたら意外と情報がなかったので変更の仕方を共有。
管理画面のビジュアルエディタのフォントを変更する方法はたくさん見つかったんですけどね。。

WordPressのテキストエディタのフォントを変更

結論

お使いのテーマ（子テーマをお使いでしたら子テーマ）のfunctions.phpに以下を追記する。

// text-editor style
function change_editor_font(){
    echo'<style type="text/css">
        textarea#content.wp-editor-area {
        font-family: monospace;
        font-size:14px;
        }
    </style>';
}
add_action('admin_head', 'change_editor_font');

そもそもテキストエディタとは？

説明するまでもないかもしれないですが、投稿画面のテキストのタブの方を選択した状態で使うエディタです。画像などを挿入してもhtmlタグで表示されるほうですね。

functions.phpから変更

ビジュアルエディタの方はテーマがサポートしていればeditor-style.cssを編集することでフォント変更ができるようですが、テキストエディタの方はfunctions.phpにスタイルを追記して管理画面のヘッダーで読み込ませるやり方でした。

参考にしたのはこちらのページ。

ただしID名が上の方が記事を書いたときから変更になったためかうまく反映できなかったので、こちらのページの記述も参考にして書き換えました。

functions.phpに追記した僕の趣味丸出しのコードが以下のものです

// editor style
function change_editor_font(){
    echo'<style type="text/css">
        textarea#content.wp-editor-area {
        font-family: "Ricty Diminished Discord", monospace;
        font-size:16px;
        color:#333;
        background: #fafafa;
        }
    </style>';
}
add_action('admin_head', 'change_editor_font');

font-familyについては個人的に好きな Ricty Diminished Discord を入れてみましたが、cssではmonospaceだけ指定してブラウザで好きな等幅フォントに設定する方がスマートな気もしまっす。
フォントサイズがでかすぎるって方もいると思うので、お好きな数値に設定してください。14～16pxの範囲が無難だと思います。
文字色と背景色も完全に個人的趣味なので、お好きな数値に変えてください。

てなわけで冒頭のコードだけで十分かと思います。

おまけ

自分は試してないんですが、こちらのプラグインを使っても変更できそうです。絵文字入力も使われる方などには最適だと思います。

今回もどなたかのお役に立てば幸いです。

もっと簡単なやり方あるよ！って方は教えてください！！