以前、Wordpress投稿画面のビジュアルエディターにスタイルシートを割り当てる方法を書きました。
ビジュアルエディターにスタイルを割り当てると、見た目的に非常に書きやすいエディターに変貌します。
ただ、上記の方法では「テーマ表示用のスタイル（style.css）」と「ビジュアルエディター用のスタイル（editor-style.css）」を分けて書く必要がありました。
似たようなスタイルを2度書くのは、正直言って効率が悪いです。
なので、「ビジュアルエディターにテーマスタイル（style.css）をそのまま割り当てる方法はないものか？」とWordpressコアファイルを調べてみたところ、良い方法を見つけることができたので紹介です。
目次
今回のカスタマイズで目指すところ
まず、Wordpressデフォルトの状態でビジュアルエディターで記事を書くと、以下のような表示になります。
これでも、問題なく記事を書けるのですが、味気ないというか、見づらい部分もあります。
例えば普段、Wordpressテーマで、以下のように公開ページで表示されていたとしましょう。
だとしたら、ビジュアルエディターでも、テーマのstyle.cssを用いて、「ほぼ同じ表示にしよう」というのが今回の趣旨です。
例えばこんな感じに表示させます。
このようにすると、記事の仕上がりを意識しながら文章を書くことができます。
主な手順
ビジュアルエディターに対して、テーマのstyle.cssを割り当てるには、主に以下の手順が必要です。
- functions.phpでビジュアルエディターにstyle.cssを割り当てる
- ビジュアルエディターの親要素に対してクラスを割り当てる
- ビジュアルエディターの余白を調整する
具体的なカスタマイズ方法は、以下で説明します。
ビジュアルエディターにstyle.cssを割り当てる方法
まず、Wordpressデフォルトは以下の状態です。
今回これを変更する方法、手順を追って説明したいと思います。
ビジュアルエディターにstyle.cssを取り込む
ビジュアルエディター対して、テーマ内のstyle.cssスタイルを割り当てるには、functions.phpに以下のように書き加えます。
add_editor_style( 'style.css' );
すると以下のように、ある程度スタイルが適用されました。
けれど、上記の場合、見出しのスタイルが適用されていません。
この原因は、見出しに対して以下のように、.articleを加えたCSSセレクタが割り当てられているからです。
.article h2 {
background-color: #f3f4f5;
font-size: 26px;
margin-bottom: 20px;
margin-top: 40px;
padding: 25px;
}実際の、ビジュアルエディターには、以下のようなclass属性が割り当てられています。
class=”mce-content-body content post-type-post post-status-publish post-format-standard page-template-default locale-ja mceContentBody wp-editor wp-autoresize html5-captions”
これを見てもらえば分かるように、ビジュアルエディターの親HTML要素に.articleを含むものはありません。
ですので、ビジュアルエディターに.article h2と同じスタイルを割り当てるのであれば、以下のように書く必要があります。
.article h2,
.mce-content-body h2 {
background-color: #f3f4f5;
font-size: 26px;
margin-bottom: 20px;
margin-top: 40px;
padding: 25px;
}ただこれだと、style.css内の見出しスタイリング部分をすべて修正する必要がありますし、CSSセレクタも増えて紛らわしくなります。
なので、逆にビジュアルエディターの親HTML要素に対して、以下のように.articleクラスを割り当ててやれば良いのではないかと。
class=”mce-content-body content post-type-post post-status-publish post-format-standard page-template-default locale-ja article mceContentBody wp-editor wp-autoresize html5-captions”
以下では、その具体的な方法について説明したいと思います。
ビジュアルエディターの親要素にクラスを追加する方法
ビジュアルエディターに対して.articleクラスを追加するには、functions.phpに対して以下のように記述します。
//ビジュアルエディターのクラス名に任意のclassを追加する
add_filter( 'tiny_mce_before_init', 'tiny_mce_before_init_custom_demo' );
function tiny_mce_before_init_custom_demo( $mceInit ) {
//追加するクラス名を付け加える
$mceInit['body_class'] .= ' article';//使用テーマにより追加するクラス名は変わります
return $mceInit;
}このように、クラス名を追加してやることで、ビジュアルエディターに対して.article h2というCSSセレクタも適用されるようになります。
ビジュアルエディターを表示すると、以下のように表示されます。
これで、公開ページ上で表示されるスタイルと、ほぼ同じになりました。
余白の調整
ただ、上記の状態だと、ビジュアルエディターの余白が少なすぎます。
もう少し見やすくするために、ビジュアルエディターに対して少し余白を設定してやるとより良いかもしれません。
余白を設定するには、style.cssに以下のようにpaddingを設定してやれば良いかと思います。
body.mce-content-body.wp-autoresize{
padding: 20px !important;
}!important指定がしてありますが、これはデフォルトのビジュアルエディタースタイルでも!important指定されているので、それより優先度の高いCSSセレクタで指定してやる必要があるからです。
とりあえず、!important指定してあったとしても、管理画面なので公開ページでは利用しません。ですので、AMP表示するわけでもない（AMPだと!important利用できないけど表示しないので問題ない）ですし、パフォーマンスへの影響もほぼ皆無なので、特に問題ないかと思います。
動作確認
このように、余白を指定すると、以下のように非常に見やすいビジュアルエディターとなります。
もちろん、style.cssで指定されている、引用や、表のスタイルなども適用されています。
これでかなり見やすく、手軽にカスタマイズできるビジュアルエディターとなりました。
まとめ
こんな感じで、ビジュアルエディターの適用CSSに、テーマ側のstyle.cssを適用させることができました。
この方法の、一番の利点としては、やはりテーマ側でカスタマイズしたスタイルと、同様の表示がビジュアルエディター側でもできることかと思います。
やはり、ビジュアルエディター側でも、公開状態と同じ表示で確認できた方が、記事の仕上がりも想像しやすいのは間違いないでしょう。
今回行ったカスタマイズを適用することで、Wordpressデフォルトのものよりは、非常に書きやすいビジュアルエディターに仕上がるかと思います。
