手間をかけずにWordPressのビジュアルエディタを見やすくしてみよう

『さあ　お仕置きの時間だよ　ベイビー』
今日もおなかがスプラッシュ。はじめまして、4月からWP-D戦隊の仲間入りWP-Dエメラルドです。

ビジュアルエディタにCSSを当ててみる

WordPressをガッツリCMSとして使ってもらう時にはカスタムフィールドなど使って項目ごとに入力してもらうように構築していくと思いますが、

• 会社概要の役員の名前を変更したい！
• プライバシーポリシーが1行変更になった。
• 新着情報はフリーテキストで入力したい。

なんて要望があるときは、ビジュアルエディタが表のサイトに近いほうがお客さんでも更新しやすい時ってありますよね。

WordPressのビジュアルエディタにCSSを適用するステップは3つ。

1. ビジュアルエディタにclassをつける。

tiny_mce_before_initフックを使ってビジュアルエディタにclassをつけます。
筆者は慣習的に”editor-area”というclassで統一していますが、”wp-editor”などデフォルトで付いているclassもありますのでこのステップは必須ではなくお好みで。

function custom_editor_settings( $initArray ){
	$initArray['body_class'] = 'editor-area';
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

2. フロントのテーマの編集エリアのclassを”editor-area”に合わせる。

テーマ設計と絡んでくるので一概に言えませんが、ベタなコーポレートサイトのレイアウトであれば下記エリアを”editor-area”にします。

3. ビジュアルエディタにCSSを読み込む。

add_editor_styleというWordPressの関数でビジュアルエディタにCSSを読み込めます。
フロントと同じstyle.cssを読み込む場合はこんな感じ。
引数なしだと”editor-style.css”を読み込みます。

function my_theme_add_editor_styles() {
    add_editor_style( 'style.css' );
}
add_action( 'init', 'my_theme_add_editor_styles' );

詳しくは英語版Codexをご参照あれ。
http://codex.wordpress.org/Function_Reference/add_editor_style

今なぜこの話題なのか！

ビジュアルエディタにCSSを効かせることは特に目新しい話ではないのですが、CSSプリプロセッサのおかげで管理画面用のスタイルの切り分けがしやすくなったと思います。

以前は、いくつも@importしたCSSの中から納品用に必要なスタイルだけをピックアップしてeditor-style.cssを作成する、というアホなこともやっていたのですが今は勝手にできてしまうので意識することもなくなりました。

筆者も今年に入ってSass+Compass環境でCSSを書いていて、フォルダ構成はこんな感じでやっています。

style.scss

テーマ名などの項目や、ヘッダー・フッター・サイドバーなどのサイト全体共通のスタイル。トップページのスタイルも別に切り分けない場合はここに記述

_editor-style.scss

今日の主役。.editor-areaの中のスタイルは全てここに記述

_config.scss

リセット、基準のフォント設定、よく使うmixinなど

結論：editor-style.scssを切り分けておくと管理が楽

Sassだと入れ子もできるので、editor-style.scssを.editor-areaの入れ子にしておくとビジュアルエディタで意図しないスタイルが効いてしまうことはまずないかと思います。

.editor-area {
	
	//.editor-area内の処理

}

Sassに限った話ではなく、効率化できるところはもっと効率化して、デザインとかカスタマイズに力入れられるようにしていきたいですね。
では皆さま、快適なWordPressライフを！！