WordPressのエディタ用CSS、editor−style.cssとしてよく紹介されていますが、すごく便利ですよね。

サイトによって違うスタイルを、いい感じに管理画面で表示することで、記事の完成系がすごくわかりやすく、直感的な操作に近付きます。

visualeditor

ちなみにこのブログはこんな感じのビジュアルエディタで投稿されています！

自分のブログやウェブサイトでは使っていなくても、実案件などでは使っているよ！という人も多いのではないでしょうか。

ただ、普通に用意しようとすると、面倒臭いんですよね。

メインのcssに変更を入れるたび、editor-style.cssにも手を入れなくてはならないというのはどうにも面倒臭い。

@importでCSSを読み込む形で切り分けても良いのですが、何かと柔軟にそれぞれのCSSを書き出せるような構成のSassでいいやん！というお話です。

 

幸せになれるファイル構成の一例


.
├── config.rb
├── index.php
├── javascripts
├── sass
│   ├── _posts.scss
│   ├── _zurui-sass.sass
│   ├── buttons.scss
│   ├── editor-style.scss
│   ├── ie.scss
│   ├── partials
│   │   ├── _buttons.scss
│   │   ├── _danger.scss
│   │   ├── _glow.scss
│   │   └── _options.scss
│   ├── print.scss
│   └── screen.scss
├── style.css
└── stylesheets
    ├── buttons.css
    ├── editor-style.css
    ├── ie.css
    ├── posts.css
    ├── print.css
    └── screen.css

と、こんな感じの構成で作っています。

365日毎日更新記録を達成した人の作ったsass+compassのgemがすごく便利なので、悔しいけど使っているのは本人には直接言わず、トラックバックでそれとなく伝える事にします。

 

キモは表示用CSSとエディタ用の関係性を保つ_posts.scssの存在

Sassの機能において、アンダースコアが先頭についているファイルはCSSとしてコンパイルされず、@importしたファイルの中に書き出されます。

僕が普段書く時には、WordPressのthe_content();の中身に適応したいスタイルだけ、_posts.scssを用意しておいて、そこに書いたものが絶対！という形にしています。

これにより、投稿のスタイルをちょっと変えたり、足したりということがすごく楽になります。

WordPressのテーマ側、例えばsingle.phpで


<h1><?php the_title() ?></h1>
<div class="postContent">
  <?php the_content() ?>
</div>

こういった形にしておき、_posts.scssとして、記事本文のためのスタイルとして、見出しや段落などを用意してmixinにしておきます。

@mixin postFormat{
  h1{
    ...（省略）
  }
}

サイト表示用のSCSSでは


@import "posts";

.postContent{
  line-height:1.6em;
  font-size:12pt;
  color:#444;
  @include postFormat;
}

このような形でファイルを読み込み、mixinを実行。

editoir-style.phpでは


@import "compass/reset";
@import "compass";
@import "posts";

body.mceContentBody {
  margin:15px;
  line-height:1.6em;
  font-size:12pt;
  color:#444;
}

@include postFormat;

このように設定。

.mceContentBodyは、投稿のtextarea部分ですが、ここにmarginを設定しておかないと、カーソル開始位置が左側のボーダーとほぼ重なるため、非常に見にくい状態になってしまうので入れておくとよいかと思います。

ここまでできたら、テーマのfunction.phpに


add_editor_style('stylesheets/editor-style.css');
function custom_editor_settings( $initArray ) {
  $initArray['body_class'] = 'editor-area';
  return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

このコードを追加し、エディタ用のスタイルを有効化すれば完了です。

 

あくまで、この方法は、楽に管理するための構成の一例です。

同じようにSassで管理しても、もっと良いファイルの作り方もあると思います。

ただ、WordPressに限らず、TinyMCEをはじめとしたエディタのためのCSSをサポートしているCMSなどのテーマ開発では、こういった形で自分なりに管理しやすい構成にしておけば何かと良いよね！と思うのでした。