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

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

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

CSSファイルの作成

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

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

functions.phpファイルにadd_editor_styleを追加

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

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

add_editor_style('editor-style.css');

editor-sytle.cssにスタイルを設定

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

スタイル設定が反映されない場合

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です