WordPress TinyMCE の見栄え

Webサイトの更新方法など質問をいただくことがあります。
WordPressという最強な武器を持った企業や個人が、WordPressをガンガン販売・導入していることもあり、中には練習がてら中途半端に納品してしまっているケースもあります。
そして、ありがたいことに結構たくさんの質問やヘルプをいただきます。

管理画面のビジュアルエディタ（TinyMCE）の操作や見栄えに関することは、比較的多く質問をいただきますね。
そこでTinyMCEの見栄えについてメモってみます。

とにかく見栄えを整えてみる

一番わかりにくいケースは、TinyMCEと公開用コンテンツの見栄えが異なるケースです。
制作者が無能か、制作費用が足りなかったかのどちらかだと思いますが、見栄えが異なるのは運用する人にとってはちょっと厄介なことですよね。

そこでとりあえず、TinyMCEのスタイルがカスタマイズできるようにします。
追加するコードは以下のとおり。

add_editor_style( "editor-style.css" );

これでテーマディレクトリ上にある『editor-style.css』が適用されることになります。

IDやクラス指定をしない場合はスタイルが指定できないため、以下のようにID、クラスを割り当てます。

function custom_editor_settings( $initArray ){
    $initArray['body_id'] = 'primary';
    $initArray['body_class'] = 'post';
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

あとは、基本的に上記IDやクラス以下にスタイルを定義していけば問題ないと思います。

とりあえず見栄えが整った

これである程度TinyMCEの見栄えが公開サイトと整えられると思います。
あとは改行するときの『Enter』と『Shift + Enter』の違いなどを説明すれば、最低限な説明は完了・・・かな？

アイネクシオでもできるだけ親切に説明することを心がけていますが、足りない部分があったらご指摘くださいね。

 - WordPress PHP, TinyMCE, WordPress