@importが引き起こすadd_editor_style()が効かないトラブルと解決策【WordPress】

add_editor_style()のトラブルについて

@import が動かない場合がある

以前の記事内でも少し触れているのですがadd_editor_style()で読み込んだCSSファイル内では@importが動かない場合があります。これについては確実な文献を見つけられていないので@importを使わない方向で解決したいと思います。

関連する症状

@importが原因の可能性がある症状で確認できているものは次のようなものがあります。

• エディターにCSSが適用されていない
• WEBフォントが読み込めていない

別のCSSを読み込む場合のトラブル

読み込んだCSSファイル内の@importが効かない

add_editor_style( 'editor-style.css' );のようにエディター用のCSSファイルを1つ用意し、そのファイル内で@importを使ってフロントエンド用のCSSファイル「style.css」を読み込もうとしましたがstyle.cssの内容は全く反映されませんでした。

解決策：@import を使わずCSSファイルを読み込む

複数のCSSファイルを読み込みたい場合は@importを使わずadd_editor_style()でそれぞれ指定するようにします。この場合、先頭に指定したファイルから順に読み込みます。

// 配列で複数のファイルを読み込める
add_editor_style( array( 'style.css', 'editor-style.css' ) )

WEBフォントを読み込む場合のトラブル

@import が動かなかったパターン

add_editor_style( 'style.css' );としてフロントエンドと共通のCSSファイルを読み込み、style.css内で次のようなWEBフォントを指定したところ、WEBフォントも含めstyle.cssの内容は反映されませんでした。

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400&display=swap');

解決策：@import を使わずWEBフォントを読み込む

方法1：wp_enqueue_style()で読み込む

functions.phpでwp_enqueue_style()を使って読み込む方法です。
フロントエンドと管理画面でそれぞれ関数を実行してWEBフォントを読み込んでいます。

function add_web_fonts() {
	wp_enqueue_style( 'noto-serif', 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400&display=swap', array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'add_web_fonts' );    // フロントエンドに適用
add_action( 'admin_enqueue_scripts', 'add_web_fonts' ); // 管理画面に適用

---

方法2：add_editor_style()でまとめて読み込む

add_editor_style()でまとめて読み込む方法です。
読み込むのは管理画面のみなので、フロントエンドでは別に読み込む必要があります。

function wpdocs_theme_add_editor_styles() {
	add_editor_style( array( 'style.css', 'editor-style.css', 'WEBフォントURL' ) );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

まとめ・補足

よく分からない挙動

@importでのWEBフォント読み込みの場合、URLに含まれる「 ;（セミコロン）」を削除するとそのファイル内の他のスタイルが適用されるようになりました。URLが正しくないので当然WEBフォントは使えませんが──。

そこでセミコロンをURLエンコードした「%3B」で書き換えるとWEBフォントも使えるようになり、スタイルも反映されました。

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400&display=swap');
↓
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200%3B400&display=swap');

とはいえこれでは根本的な解決になっていないのでfunctions.phpで読み込む方が良さそうです。

add_editor_style()で指定したファイルでは@importを使わない

add_editor_style()で読み込むCSSに@importが使われている場合、@importが効かないだけでなくそのファイルに書かれた他の記述まで効かなくなる場合があるようです。

そのためadd_editor_style()で指定するファイルでは@importは使わず他の方法で解決するのが良さそうです。

---