WordPressでビジュアルエディターの表示を実際のスタイルに合わせる方法

WordPressのビジュアルエディタ－の表示を実際のスタイルと合わせる方法をご紹介します。

できること

デフォルトでは表画面のスタイルシートを変更しても、エディターの表示は変わりません。ちょっと設定を変えることで、表画面と編集画面の表示を合わせることができます。

表画面↓

↓管理画面

設定方法

こちらの記事を参考にさせていただきました。

「editor-style.css」という名前ファイルを作成し、テーマフォルダにアップロードします。

スタイルシートの内容をコピペします。画像を参照している場合はパスを変更します。

「functions.php」に次のコードを追加します。

// ビジュアルリッチエディター用CSS
add_editor_style('editor-style.css');

// 記事を囲っている div のクラスがpost以外の場合はクラス名を変更
function mytheme_mce_settings( $initArray ){
 $initArray['body_class'] = 'post';
 return $initArray;
}

add_filter( 'tiny_mce_before_init', 'mytheme_mce_settings' );

以上です！

こちらの記事もあわせてどうぞ

1. WordPressで「続きを読む」に広告を挿入するプラグイン「Master Post Advert」
2. WordPressで記事を直接編集するプラグイン「Front-end Editor」
3. WordPressを携帯表示するプラグイン「Ktai Style」
4. WordPressでコメントのエラー表示をカスタマイズする「Comment Validation」
5. WordPressで記事を読むのにかかる所要時間を表示する方法
6. WordPressをスマートフォン表示にするプラグイン「WPtouch」
7. Google Libraries APIを利用してWordPressを高速化するプラグイン「Use Google Libraries」

© 2012 ミニミニ大作戦 ~ Design by Premium WordPress Themes