意外にみなさん、知らない人が多い?
WordPressのビジュアルエディターにCSSを読み込ませて、公開されるページのデザインをそのままビジュアルエディターで表現できます。
こんな感じです。
これうちの法人のホームページの1ページです。
このページの固定ページのビジュアルエディターを見てみると・・・
こんな感じで、見出し部分が表示されるページと全く同じスタイルを適用することができます。
見出し以外にもテーブルのデザインや、フォントの種類などCSSで指定出来る項目はビジュアルエディターにも反映させることができます。
ビジュアルエディターにCSSを設定する方法
add_editor_styleを追加
functions.phpに以下のコードを追加します。
[php] <?php add_editor_style(); ?>[/php]
<?php ?> 左のPHPブロックのところはfunctions.phpの書き方によっては必要ないので、エラーになったらPHPブロックの文字ところは削除してね。
editor-style.cssをテーマフォルダーに作成
テーマフォルダーに『editor-style.css』ファイルを作成して、その中にCSSを書いてください。
そうするとビジュアルエディターにその装飾が反映されます^^
『editor-style.css』でのCSSの書き方には少しだけ癖があるので、書き方についてはデフォルトテーマのTwenty-elevenなどの『editor-style.css』を参考にしてください^^
コメント