WordPressのリッチエディタにはTinyMCEが使われている。リッチエディタを使うのはソースコードなどタグを記事本文として流し込むときだけなので、あまり気にしなかったが、使っている人から、なぜ明朝体のでかいフォントなのかと言われた。皆さんはどうしているのだろうか。ここではリッチエディタにオリジナルのCSSを適用する方法を調べてみた。

リッチエディタはiframeで実現されているため、擬似的にhtml-head-bodyの構造を取っている。ここに適用されているCSSは以下の3つだが、このうち”wordpress.css”が変更の対象となる。

• wp-includes/js/tinymce/themes/advanced/css/editor_content.css
• wp-includes/js/tinymce/plugins/wordpress/wordpress.css
• wp-includes/js/tinymce/plugins/spellchecker/css/content.css

変更するにはまず適用するCSSを作成する。その際に、変更するwordpress.cssを当該CSSで@includeする。
フォントの指定を含め、一般的な設定をするのなら以下のようなCSSになるはず。使用しているテーマのCSSから必要な部分だけ持ってくればよい。

CSS

/*
rich_editor.css
ver 0.1 by Junon
*/
@import url('http://www.techdego.com/wp-incm��VFW2��2�F���6R��Vv��2�v�&G&W72�v�&G&W72�772r��Ц&�G��Т�&v���ТFF��s�8��Т&6�w&�V�B�6���#�6ffc�Т6���#�3�Тf��B�f֖Ǔ�&����V�fWF�6�fW&F��.89.8:�8*�88�y.8+E&�s2"�$��&v�����Rv�F��2&�"��6��.8:8*N8:�8*�"��V�'���.�����>8��8+N8+~88>8*�"�6�2�6W&�c�Тf��B�6��S��VӰТƖ�RֆV�v�C��C�Ч�Ч�Ɩ��ТFW�B�FV6�&F������S�Т6���#�3�ddC�Т&�&FW"�&�GF�Ӣ�F�GFVB3�ddC�Ч�Ч�f�6�FVB��7F�fR�ТFW�B�FV6�&F������S�Т6���#�3ccc�Т&�&FW"�&�GF�Ӣ�F�GFVB3�ddC�Ч�Ч���fW"�ТFW�B�FV6�&F������S�Т6���#�3�ddC�Т&�&FW"�&�GF�Ӣ�6�ƖB3�ddC�Ч�Ч��&v��V���Цƒ��&v���F��VӲ�ЧV�ƒ�Ɨ7B�7G��S�7V&S��ЧV�ƒV���&v���&�GF�Ӣ�6VӲ�ЧV�ƒV�ƒ�Ɨ7B�7G��S�6�&6�S��Ц�Ɩ���r����fW"��r��f�6�FVB��r��7F�fR��w�&�&FW#����S��Т�Ɩv��VgB�f��C��VgC��Т�Ɩv�&�v�B�f��C�&�v�C��Т�6�V&W"�6�V#�&�F���Ц6�FR�&R�f��B�f֖Ǔ�&6�W&�W"�Wr"�6�W&�W"�����76S��У��6�FS

上記をTinyMCEに適用すればよいのだが、今回は自分のテーマに付随させてテーマを外せばエディタのCSSも変わるようにする。

上記のCSS（ここではrich_editor.cssとする）をテーマのstyle.cssと同じ階層に保存する（背景画像をテーマと共有するため）。

テーマのfunctions.php（無ければ新規に作成）の最後に以下のコードを記述する。

PHP

function replace_editor_css($css_file) {
   $css_file = get_option('siteurl') . '/wp-content/themes/**theme-name**/rich_editor.css';
   return $css_file;
}
add_filter('mce_css', 'replace_editor_css');

ちなみに、上記の部分を別のphpファイルにして、pluginsフォルダに入れるとプラグインになる。テーマを変えてもCSSを適用したいならプラグイン化をお勧めする。

なお、上記のPHPがやっているのは、’tiny_mce_config.php’で”content_css : “のオプション（デフォルトはwordpress.css）を書き換えているだけ。
これでこのように独自のCSSのクラスがそのまま表示されるようになる。