Writing Notes with Grammyはい、ごめんください。
音楽聞きながら仕事してたら、やけに捗って遅くまでテンションあがってしまったひじりです。お肌が荒れて困りますわね奥さん。

さて、お客様が WordPress を使うにあたって、プレビュー機能があるとはいえ、やはり編集画面は実際の画面に近いほうがいいよね、ということで色々カスタマイズしていたのですが、一気に便利になった方法がありました。

editor-style.css にスタイルをコピーするのがメンドクサアァァァイ!!

管理画面のスタイルは editor-style.css をテーマ用ディレクトリに作成してゴニョゴニョするのですが、クラスとか増えるたびコピーするのが面倒になってきました。最後にやる作業であることは間違いないのですが、今後も増えてくるだろうなと。
そうすると、適用されている CSS をそのまま使えたらいいのになー と、思うわけです。コピーするのがメンドク(ry

管理画面の細かいカスタマイズについては下記サイトが参考になります。
WordPressのTinyMCEをチキチキにカスタマイズする | 高橋文樹.com
WordPressテーマのfunctions.phpでは$content_widthを定義するべし | firegoby

まずは使ってる CSS を呼んで設定を足そう

editor-style.css を使えるようにするには、add_editor_style という関数を使うのですが、これは CSS を有効化するためのものではなく、読み込むための命令なんですね。ということは、他の CSS も読み込めるわけです。いくつでも良いみたいですよ。

また、テーマ内で投稿内容が反映される場所って、大抵 class や id の指定がされています。例えば、デフォルトテーマの Twenty シリーズだったら #primary とか。投稿画面=投稿内容が反映される部分 と考え、class もしくは id を設定しましょう。class は知ってたけど、ダメ元で id やったら適用できました(・ω・)

早速 function.php に下記の内容を追記。editor-style.css はひとまず空っぽのまま作っておいてください。css フォルダに置いてあるような css は、function.php からの相対パスを設定してください。

これで設定した CSS が読み込まれます。プラグイン使わないと、かゆいところに手が届いて良いですね。
編集画面を確認すれば、表示が変わったのがわかるかと。chrome などの開発用ツールで確認しても読み込まれているのがわかるかと思います。$initArray[‘body_id’] を使ったら、ちゃんと body に id が設定されました!

そして editor-style.css で調整

このままだと、「body に背景は設定してて #primary は白いんだけどなあ」という場合などに対応できていません。それを editor-style.css で差を吸収します。下記は一例です。

あとは、style.css などで設定した class などがそのまま使えるので、theme_advanced_styles(TinyMCE Advanced だとスタイルを選べる部品)とか有効にしてるとずらりっと出てきます。これは逆に使いにくいかもしれないですが…?

管理画面のカスタマイズに躊躇していた方も、ぜひ一度お試しください♪


1件のコメント

  1. body.mceContentBody に border-right:1px solid #CCC;を指定してるのは幅の目安のため。/[WP] 使用中の CSS を読み込んで極力簡単にエディタのデザインを変える方法(プラグイン不使用) http://t.co/cNBU5SSc