ビジュアルエディタのフォントを変えたい

WordPress コピペ
CSS WordPress
Yasuko
yasuko
コンサートできるようになってほしいな

入力したときと記事になったときの違和感

ワードプレスの投稿画面で入力する際は明朝フォントなのに、公開して記事になったらサイトで指定したフォントになって、思ってたのと違う・・・ってことありますよね。

そんな時はエディタのフォントをサイトと同じものに変更しよう！

新しく editor-style.css というファイルを作ります。

文字コードは UTF-8 です。

body.mceContentBody {
  font-family: 'Noto Sans JP', sans-serif;
}

この editor-style.css をテーマファイルのフォルダ内にFTPでUPします。

body.mceContentBody {
  font-family: 'Noto Sans JP', sans-serif;
}
.editor-area p{}
.editor-area a{}

フォントだけでなく、通常のcssを書くように editor-style.css にスタイルを書き足していけば、エディタ内のスタイルを変えることが出来ます。

続きまして、functions.php に以下をコピペ。

自分のわかりやすいところでOK！

// ビジュアルエディタのフォント変更

add_editor_style('editor-style.css');
function custom_editor_settings( $initArray ){
$initArray['body_class'] = 'editor-area'; //オリジナルのクラスを設定する
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

たったこれだけ！

とにかく、コピペしてUPしてリロードしてみよう。