WordPressのビジュアルリッチエディター内で編集中のコンテンツに、独自のCSSを適用する方法。
2010/09/14 追記
本サイトで配布しているEnhancing CSSというプラグインを使うと簡単にできます。
以下は WordPress3.0 以降でのみ有効。
テーマファイルで設定する場合
- editor-style.css というファイルをテーマディレクトリの直下に作成する。
- functions.php に add_editor_style(); という行を追加する。
add_editor_style() はパラメータにCSSのファイル名を指定することもできるが、親テーマか子テーマのディレクトリ以下での相対パスで指定する必要があることに注意する。
プラグインで設定する場合
このサイトで配布している以下のプラグインにも、以下の処理を追加した。
ビジュアルリッチエディタにテーブル編集用のボタンを追加するプラグイン
add_filter('mce_css', 'add_custom_editor_style');
function add_custom_editor_style($css) {
$files = preg_split("/,/", $css);
$files[] = '/path/to/style.css';
$files = array_map('trim', $files);
return join(",", $files);
}
/path/to/style.css の部分が追加したいCSSまでのURL。
このファイル内にエディターに適用したいCSSを記述すると、ビジュアルリッチエディターに反映される。
以下の部分はいらないと思うんだけど、念のため。
$files = array_map('trim', $files);
