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");

 

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はお断りしております。