WordPressのビジュアルエディターにテーマのstyle.cssを割り当てる方法

以前、Wordpress投稿画面のビジュアルエディターにスタイルシートを割り当てる方法を書きました。

Wordpressの記事を作成するとき、投稿画面のビジュアルエディターを用いている方も多いかと思います。 ビジュアルエディターは、デフ...

ビジュアエディターにスタイルを割り当てると、見た目的に非常に書きやすいエディターに変貌します。

ただ、上記の方法では「テーマ表示用のスタイル(style.css)」と「ビジュアルエディター用のスタイル(editor-style.css)」を分けて書く必要がありました。

似たようなスタイルを2度書くのは、正直言って効率が悪いです。

なので、「ビジュアルエディターにテーマスタイル(style.css)をそのまま割り当てる方法はないものか?」とWordpressコアファイルを調べてみたところ、良い方法を見つけることができたので紹介です。

スポンサーリンク
レクタングル(大)広告

今回のカスタマイズで目指すところ

まず、Wordpressデフォルトの状態でビジュアルエディターで記事を書くと、以下のような表示になります。

デフォルトのWordpressビジュアルエディターの表示

これでも、問題なく記事を書けるのですが、味気ないというか、見づらい部分もあります。

例えば普段、Wordpressテーマで、以下のように公開ページで表示されていたとしましょう。

Wordpress公開ページの表示スタイル

だとしたら、ビジュアルエディターでも、テーマのstyle.cssを用いて、「ほぼ同じ表示にしよう」というのが今回の趣旨です。

例えばこんな感じに表示させます。

カスタマイザー後のビジュアルエディターの表示

このようにすると、記事の仕上がりを意識しながら文章を書くことができます。

主な手順

ビジュアルエディターに対して、テーマのstyle.cssを割り当てるには、主に以下の手順が必要です。

  1. functions.phpでビジュアルエディターにstyle.cssを割り当てる
  2. ビジュアルエディターの親要素に対してクラスを割り当てる
  3. ビジュアルエディターの余白を調整する

具体的なカスタマイズ方法は、以下で説明します。

ビジュアルエディターにstyle.cssを割り当てる方法

まず、Wordpressデフォルトは以下の状態です。

デフォルトのWordpressビジュアルエディターの表示

今回これを変更する方法、手順を追って説明したいと思います。

ビジュアルエディターにstyle.cssを取り込む

ビジュアルエディター対して、テーマ内のstyle.cssスタイルを割り当てるには、functions.phpに以下のように書き加えます。

すると以下のように、ある程度スタイルが適用されました。

style.cssのみを割り当てたビジュアルエディター

けれど、上記の場合、見出しのスタイルが適用されていません。

この原因は、見出しに対して以下のように、.articleを加えたCSSセレクタが割り当てられているからです。

テーマによってCSSセレクタは変わります。

実際の、ビジュアルエディターには、以下のような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と同じスタイルを割り当てるのであれば、以下のように書く必要があります。

ただこれだと、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に対して以下のように記述します。

このように、クラス名を追加してやることで、ビジュアルエディターに対して.article h2というCSSセレクタも適用されるようになります。

ビジュアルエディターを表示すると、以下のように表示されます。

ビジュアルエディターに対してクラスを追加した表示状態

これで、公開ページ上で表示されるスタイルと、ほぼ同じになりました。

余白の調整

ただ、上記の状態だと、ビジュアルエディターの余白が少なすぎます。

もう少し見やすくするために、ビジュアルエディターに対して少し余白を設定してやるとより良いかもしれません。

余白を設定するには、style.cssに以下のようにpaddingを設定してやれば良いかと思います。

!important指定がしてありますが、これはデフォルトのビジュアルエディタースタイルでも!important指定されているので、それより優先度の高いCSSセレクタで指定してやる必要があるからです。

とりあえず、!important指定してあったとしても、管理画面なので公開ページでは利用しません。ですので、AMP表示するわけでもない(AMPだと!important利用できないけど表示しないので問題ない)ですし、パフォーマンスへの影響もほぼ皆無なので、特に問題ないかと思います。

動作確認

このように、余白を指定すると、以下のように非常に見やすいビジュアルエディターとなります。

全てのカスタマイズを終えたビジュアルエディターの表示

もちろん、style.cssで指定されている、引用や、表のスタイルなども適用されています。

style.cssで指定されている、引用や、表のスタイルなども適用

これでかなり見やすく、手軽にカスタマイズできるビジュアルエディターとなりました。

ビジュアルエディターにスタイルが適用されない場合は、試しにブラウザキャッシュを削除してリロードしてみてください。

まとめ

こんな感じで、ビジュアルエディターの適用CSSに、テーマ側のstyle.cssを適用させることができました。

この方法の、一番の利点としては、やはりテーマ側でカスタマイズしたスタイルと、同様の表示がビジュアルエディター側でもできることかと思います。

やはり、ビジュアルエディター側でも、公開状態と同じ表示で確認できた方が、記事の仕上がりも想像しやすいのは間違いないでしょう。

今回行ったカスタマイズを適用することで、Wordpressデフォルトのものよりは、非常に書きやすいビジュアルエディターに仕上がるかと思います。

テーマによっては、今回行ったカスタマイズをそのまま行っても正常動作しない可能性があります。カスタマイズを行う際は、テーマ側で指定されているクラス名などを調べて適切に指定する必要があるのでご注意ください。