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』を参考にしてください^^

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

「エンジニアのためのWordPress開発入門」を執筆しました!

WordPressを使った開発案件は依然多く、それに携わるWebエンジニアも多数存在します。ただし、モダンな開発手法に慣れたWebエンジニアがWordPressに初めて触れたとき、その独特のアーキテクチャやシステムの構成に戸惑いを感じることがあるかもしれません。だが、WordPressは、それらを補ったうえにさらに強力なメリットを持ち合わせています。本書は、PHPプログラマがWordPressで開発する際に必要な基礎知識から、現場で役立つ具体的なカスタマイズ手法や開発のポイントについて詳しく解説しています。

この記事を書いた人

NPO法人のHP制作(WordPress)やkintoneを使った業務システムの構築をしています。サイボウズ株式会社公認kintoneエバンジェリスト/CoderDojo西宮と梅田のチャンピオン/認定NPO法人宝塚NPOセンター理事/NPO法人SEIN理事/

コメント

コメントする

目次
閉じる