• このエントリーをはてなブックマークに追加

editor-style.cssを使えるようにするためには、
functions.phpに

add_editor_style("editor-style.css");

を追記して、アップロード・上書きする。

これで、editor-style.cssというCSSが読み込まれ、管理画面の投稿画面本文でも、実際に表示される表側(サイト訪問者)に表示される見た目と同じ見た目で編集できるようになる。

また、あえて、見た目を変えてしまうこともできる。見出しとか段落とかのタグの違いを確認するために、エディタ用CSSをカスタマイズするというのもあり。

tinymceのときはiframeで動いているためか、CSSの反映がなかなかされないので、Chromeなどの開発者ツールで、読み込んでいるeditor-style.css(まあ場所知ってるか…)をコピーして、別のタブとしてCSSを開いて、Ctrl+F5で、キャッシュ捨てて更新したのちに、作成中・編集中のページを再読込したら、スタイルが反映された。