WordPressのビジュアルエディターに読み込まれるCSSファイルの順番を任意に変更する方法

WordPressのビジュアルエディターで表示スタイルを変更しようと思ったら、一般的なのは以下の方法です。

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

例えば以下のように、add_editor_style関数を何個か書いたり。

以下のように、add_editor_style関数の引数に対して、配列内で複数スタイル指定なんてことも可能です。

ただこの、add_editor_style関数は、コード上で書いた順番そのままに、スタイル用のCSSファイルが読み込まれるわけではありません。

調べてみたところ、add_editor_style関数内で、いろいろな処理を行う中、順番が変わって表示されてしまうケースもあります。

CSSは、同じ「CSSセレクター優先度」であれば、後から読み込んだ方が適用されます。なので、ファイルの読み込み順も結構重要となるケースもあったりします。

そんな「CSS読み込み順が変更できない」というのも何かと不便だったので、「順番を指定できる何か良い方法はないものか?」とWordpressコードを調べてみたところ、良い手が見つかったので紹介です。

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

ビジュアルエディターに読み込むCSS順を変更する方法

今回は単純な例として以下の順番で読み込むという前提で説明します。

  1. 親テーマのstyle.css
  2. 親テーマのeditor-style.css
  3. 子テーマのstyle.css
  4. 子テーマのeditor-style.css

一般的な「WordpressテーマのCSSカスタマイズ」でも、親テーマのCSSより、子テーマのCSSが優先されます。

なので、「ビジュアルエディターのCSSカスタマイズ」も親テーマのCSSより、子テーマのCSSが優先されるようにしたいと思います。

ビジュアルエディターのCSSファイルの読み込み順を制御するには、add_editor_style関数は使用しないで、functions.php上で以下のように書くとうまくいくようです。

上記コードでは、以下のようなことを行っています。

  1. editor_stylesheetsをフック
  2. $stylesheets配列を取得
  3. $stylesheets配列最後尾にCSSファイルを順番通りに追加
  4. $stylesheets配列を返り値として戻す

$stylesheets配列にスタイルシートを指定する場合は、CSSファイルのフルパスを入力する必要があるので注意が必要です。

もちろん、「add_editor_style関数を用いてCSSを追加後、editor_stylesheetsをフックを利用して$stylesheets配列の順番をソートを用いて入れ替える」という方法もあります。ただ、個人的には上で書いたコードの方が「何をやっているのかが見た目的にも分かりやすい」ということで採用しました。

editor_stylesheetsフックの場所

せっかく、Wordpressを調べたので、今後のため「editor_stylesheets」フックの記述があった場所もメモがてら掲載しておきます。

「editor_stylesheets」フック用の記載のある場所は、「wp-includes/theme.php」にあるget_editor_stylesheets()関数の最後の部分です。

まとめ

ビジュアルエディターCSSを制御するための、こんな便利なフックがあるということを知りませんでした。

今回は、順番を入れ替える用途に利用しましたが、「特定の投稿ページのビジュアルエディターに特別なスタイルを適用する」とか「投稿と、固定ページのビジュアルエディタースタイルを変更する」なんてカスタマイズも、結構手軽にできるようになるかと思います。

ビジュアルエディタースタイルに対して、そこまでする必要があるのかはさておき。

参考 get_editor_stylesheets() | Function | WordPress Developer Resources

参考 関数リファレンス/add editor style – WordPress Codex 日本語版