WordPressのビジュアルエディタにCSSを反映させて実際の公開ページに表示を近づける方法
代表取締役
児島 大
投稿画面は、ビジュアルとテキストの2種類のエディタが用意されています。
ビジュアルエディタでタイトルや本文を書いても、実際に公開しているページのデザインと違っているのが初期の状態です。
これは、公開画面のデザインを表現するのにつかわれているCSSファイルが、ビジュアルエディタには読まれない仕組みだからです。
目次
ビジュアルエディタにもCSSを読み込ませて、実際の公開ページにデザインをあわせる
ビジュアルエディタ用のスタイルシートを用意する
ビジュアルエディタに読み込ませるスタイルシートを用意します。
テーマフォルダ直下にeditor-style.css というファイルを作ります。そして、本文欄で反映されるCSSをコピーします。
editor-style.cssを読み込ませるコードをfunction.phpに追記
以下のコードをfunctions.phpの最下部に追記します。
//ビジュアルエディタにeditor-style.cssを読み込ませる
add_editor_style("editor-style.css");