WordPressのビジュアルエディタのフォントを変えるには

テーマによっては最初からビジュアルエディタ用のスタイルシートが
すでに用意されてたりしますが、それがない場合にどないすんねんってお話です。

中にはビジュアルエディタが嫌いって事で
HTML側でしか書かない人もいるでしょうけども
個人的にはビジュアルエディタの方が好きなんですよね。気楽で。

ただ初期設定のままだと、明朝系のフォントなんですよね。
これがまた見にくい。
そして、やっぱり限りなく実際のブログと同じフォントの大きさや字体に
合わせておいたほうが
更新→プレビュー→あら、折り返してる→改行しなおして更新
みたいなめんどくさい作業も少し減って効率もよくなるんではないでしょうか。

では、まずフォントを変える方法をば。

本体に変更を加えずにテーマ内で処理をする。

WordPressのコアファイルに変更を書き加えてしまうと
本体のアップデートがあった場合に上書きされて元にもどる可能性大なので
今回はテーマ内のfunction.phpに書き加える方法を使います。

あと、ビジュアルエディタ内のドロップダウンリストに
見出し1～と選べるようになっていますが
ブログの場合、大抵見出し3ぐらいまでは本体のデザインに使われてしまってるので
記事を書く際にはほとんど使用しないと思いますので、これも一緒に省きます。

テーマファイルのルート部分(style.cssがある所と同じ）に
editor-style.cssというファイルを作っておきます。

ビジュアルエディタの本文編集の所にあたるクラスは
body.mceContentBodyです。
なので、一例としてこんな感じに書いてあげます。

当ブログの場合は

body.mceContentBody {
font: 13px/19px 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',Verdana, Arial, Helvetica, sans-serif!important;
padding: 0.6em;
margin: 0;
}

にしてあります。

そしてfunction.phpに以下を追加。

add_filter('excerpt_mblength', 'new_excerpt_mblength');
add_editor_style('editor-style.css');
function custom_editor_settings( $initArray ){
$initArray['body_class'] = 'editor-area';
$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );