WordPressのビジュアルリッチエディターにテーマのCSSを適用する

お知らせ
この記事は WordPressのビジュアルリッチエディターにテーマのCSSを適用する｜WordPress整体院へ引っ越しました。

ビジュアルリッチエディターにオリジナルのテーマのCSSが適用できるとページ作りもイメージしやすくなります。

まぁ、自分で使うぶんにはそれほど気にならないですが、ホームページを作ったお客さんにとってはやはり見たとおりのページができるのが理想ですよね。

 いつも使っているTinyMCE AdvancedというプラグインではテーマのCSSを適用する「Import the current theme CSS classes」オプションがあります。

しかし、複雑な構造のテーマ用のCSSをbodyしかないビジュアルリッチエディターの編集画面に適用されるといろいろと不都合があるんですよね…

例えばbodyに背景画像を設定して、その上に背景色白を設定した<dvi>を置いてそこに本文を表示、という構造にしていると編集画面では背景画像だけ表示されて困るんですよね。

編集画面の互換性まで考えてCSS作るのも面倒。

プラグイン中のCSSをいじれば解決できますが、それってプラグインをアップデートした時にまた書き直す必要がありそう…

うまい方法がないかと思っているとよい記事がありました。

WordPressのリッチエディタにCSSを適用する

ここに書いてある関数をfunctions.phpに書いてリッチエディタ用のCSSをアップすればOK。

あ、TinyMCE Advancedの「Import the current theme CSS classes」オプションをオフにするのを忘れずに。

リッチエディタ用のCSSはテーマのCSSから不要なものを削って、bodyの部分だけすこし手を加えればOK。幅も決められるので、編集画面と実際のページの状態がほぼ同じになります。

これなら、詳しくない人が編集しても直感的でわかりやすくなりますね。