WordPressでCSSをカスタマイズしても、TinyMCEビジュアルエディタ（編集画面）の見た目はそのままという状態で使ってる人が多いと思います。
CSSをカスタマイズしてスタイルを大量に追加し始めると編集時と公開時の見た目を揃えないと、訳が分からなくなってきます。
ということで、ビジュアルエディタにCSSを宛てる方法を調べたんですが、例によって少しハマったのでメモしておきたいと思います。
ビジュアルエディタにCSSを充てるにはeditor-style.cssを使えばよい
WordPressのビジュアルエディタはeditro-style.cssというスタイルシートを読み込みます。
ということなので、editor-style.cssを用意し、自分でカスタマイズしたstyle.cssと同じようなスタイルをeditor-style.cssに記入すればエディタの編集画面で公開時と同じような見た目になるというわけです。
editor-style.cssの設置場所
親テーマしか使ってない場合
テーマ直下にeditor-style.cssを置きます。
子テーマを使っている場合
子テーマの直下に置きます。
editor-style.cssの記載内容の注意点
style.cssに書かれているスタイルには、テーマが追加するセレクタ（クラス名、IDなど）がくっついていると思いますが、ビジュアルエディタではそのセレクタが無いので、取り除かないといけません。
style.cssに以下の記述があったら、
.post h2{ .... }editor-style.cssでは、以下のようになります。
h2{ .... }editor-style.cssを有効にするには？
色々調べると、editor-style.cssを置いただけではダメで、function.phpに以下の記述を追加しないと有効にならないと書かれています。
add_editor_style();editor-style.cssが反映されない場合
自分のトラブル事例
自分がやったときは、editor-style.cssに書き込んでも全く反映されず、Tiny MCE AdvancedをOFFにしたら反映されて、Tiny MCE Advancedの影響なのかといろいろ調べたのですが、原因はブラウザのキャッシュでした。
chromeの検証ツールなどでビジュアルエディタで使われているCSSを見て、自分で書いたCSSを読み込んでいる形跡がない場合はブラウザのキャッシュを疑いましょう。
キャッシュの削除方法は、Chromeの場合は検証ツールを表示させてブラウザのリロードボタン上で右クリックするとキャッシュ削除のメニューが表示されるので、それを使うのが簡単です。
より進んだ対策
いちいちキャッシュを削除するのが面倒であれば以下の記事にあるPHPコードをfunction.phpに追加してもよいでしょう。
function extend_tiny_mce_before_init( $mce_init ) {
$mce_init['cache_suffix'] = 'v='.time();
return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'extend_tiny_mce_before_init' );
とここまで書いて、Luxeritasと関係ないやんと思ったので、真面目に書きます。
Luxeritasでeditor-style.cssを使う場合
Luxeritasの場合は簡単です。
editor-style.cssの場所
Luxeritasでは親テーマ、子テーマともにeditor-style.cssがテーマ直下に予め用意されているので、それを編集すればよいです。
editor-style.cssの編集は、Luxeritasの管理メニューの中からできません。外観 → テーマの編集 と進んで 子テーマのeditor-style.cssを編集します。
Luxeritas 3.13で大きな変更がありました。
editor-style.cssは、Luxeritas管理メニューの『子テーマの編集』に進み、『ビジュアルエディタ』の項目でeditor-style.cssを編集できます。
Luxeritas 3.13では、そもそもeditor-style.css自体いじらなくても、style.cssの内容が有効になるようになってます。
editor-style.cssを有効にするには？
Luxeritasでは、editor-style.cssを編集するだけで有効になります。もともと自動的に読み込む仕様のようです。
Luxeritasでは、function.phpへの記述は不要です。
Luxeritas 3.13からこの記事いらなくなってます。
まとめ
やってみると簡単なのですが、簡単なものほどトラブルが起きた時には原因がわからずいろいろ調べて傷口を広げるパタンになりがちです。わからなかったらキャッシュを削除というよくあるトラブルでした。
