WordPressのビジュアルエディタは実際の表示をプレビューしながら投稿や固定ページを作成できるわけですが、スタイルシートも編集に反映されたらより便利です。
特にクライアントに納品するWordPressサイトであれば、使える機能かもしれませんね。
今日はその方法を紹介します。
functions.phpを編集
functions.phpに以下のコードを記述をします。（※＜＞は全角で書いています。実際は半角にします。）
＜?php
add_editor_style(‘editor-style.css’);
?＞
ビジュアルエディタ用のCSSの設置
上記コード内の「editor-style.css」がビジュアルエディタに適用させるスタイルシートです。
テーマディレクトリ直下に「editor-style.css」を作成するとビジュアルエディタに反映されるというわけです。
CSSを編集
作成した「editor-style.css」に、通常どおりスタイルを記述するとビジュアルエディタに反映されます。
ビジュアルエディタ用に独立したCSSなので好きに記述して構いませんが、実際の表示に合わせる目的であれば…
＜?php
php the_content();
?＞
…に適用させているスタイルに近い記述が必要になります。
是非お試しください。
