WordPressのビジュアルエディターにCSSを設定出来るって知ってますか?

意外にみなさん、知らない人が多い?
WordPressのビジュアルエディターにCSSを読み込ませて、公開されるページのデザインをそのままビジュアルエディターで表現できます。

こんな感じです。
これうちの法人のホームページの1ページです。

スナップショット 12:11:25 10:59

スナップショット 12:11:25 10:59-2

このページの固定ページのビジュアルエディターを見てみると・・・

スナップショット 12:11:25 11:01

こんな感じで、見出し部分が表示されるページと全く同じスタイルを適用することができます。
見出し以外にもテーブルのデザインや、フォントの種類など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』を参考にしてください^^

WordPressのビジュアルエディターにCSSを設定出来るって知ってますか?

コメントを残す

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