Sassでeditor-style.cssとstyle.cssのコンテンツ部分のスタイルを同期する

WordPressの管理画面のエディタの「見た目」を表示画面のコンテンツの「見た目」と一致させるには、エディタスタイルシートを使う。

と一行追加すると、テーマディレクトリ直下のeditor-style.cssが管理画面のエディタに読み込まれる。

見出しや段落、箇条書きや画像に関するコンテンツ部分のスタイル指定を、editor-style.cssとstyle.cssとでいつも揃えておくにはSassを使って同じパーシャルファイル'_content.scss'を読み込めば良い。

'the_content();' を囲む要素のクラス名(ここでは'.content')の中に読み込めば、コンテンツ部分以外には影響を与えない。

editor-style.scssの方はこう書く。

body.mceContentBodyには、ふつうに横幅とフォント関連の指定をしておき、あとは共通のパーシャルファイル'_content.scss'を読み込んでおく。

これで、コンテンツ部分のスタイルを'_content.scss'に書いて行けば、管理画面、表示画面の両方に反映することができる。