WordPressのビジュアルエディタ上でサイトと同じ表示に設定する方法

WordPressのビジュアルエディタで記事を書いていると、サイト表示と同じようなスタイルで記事を書いたり見てみたくなります。内容によっては、サイトと同じスタイル設定にすることで記事の構成が分かりやすくなる利点もあります。

ビジュアルエディタにCSSを設定する方法

ビジュアルエディタにCSSを設定するためのCSSファイルを用意します。WordPress.orgのテーマを使用している場合、editor-style.cssの名前でCSSファイルがテーマファイルにあると思います。

※子テーマを使用している場合、子テーマにeditor-style.cssを作成しても反映されます。

CSSをビジュアルエディタに設定するには、functions.phpファイルに下にある「add_editor_style(‘スタイルファイル名’)」を設定します。

※Twenty Twelveをもとに子テーマを使用している場合、親テーマにadd_editor_styleがあるので追加する必要はありません。

add_editor_style('editor-style.css');

sytle.cssでコンテンツ（記事）部分に適用しているスタイルをeditor-sytle.css（ビジュアルエディタ用CSSファイル）に入力（コピー）することでビジュアルエディタでもサイト表示と同じような表示にすることが出来ます。

上記の設定をした後、ビジュアルエディタでスタイルが反映されない場合、ブラウザキャッシュなどに原因がある場合もありますので、キャッシュの削除や再読み込みなどをしてみてください。