Illustration, Graphic&Web Design

WordPress:ビジュアルエディターにCSSを関連付ける

投稿の編集画面(ビジュアルエディター)にCSSを適用します。実際に表示されるページデザインに近い状態を確認しながら記事を編集することができます。

「functions.php」に設定を追加し、使用中のテーマフォルダ直下に「editor-style.css」というファイル名のCSSをアップロードすれば、自動的にそのCSSがエディター画面に適用されるという仕組みです。

functions.phpにコードを追加

functions.phpに以下のコードを追加します。念のため編集する前にバックアップをとりましょう。「add_editor_style()」の引数を省略した場合、デフォルトのファイル名「editor-style.css」が関連付けられます。

//ビジュアルエディターにCSSを関連付ける
function visual_editor_style() {
	add_editor_style();
}
add_action( 'admin_init', 'visual_editor_style' );

「editor-style.css」を編集する

editor-style.cssに使用中のテーマのCSSから記事のスタイリングを行っている部分だけを抜き出しコピーします。その際、投稿記事全体のラッパーをセレクタに使用している場合は該当するセレクタを削除します。たとえば、ラッパーのクラス名が「.editor-area」だった場合、「.editor-area p {}」というセレクタでは、スタイリングが適用されません。「.editor-area」を削除し、「p {}」とします。

また、bodyをセレクタに使用したスタイリングは、「body {}」を「.mceContentBody {}」というセレクタに書き換えます。