【WordPress】エディタにCSSを読み込む方法の最適解はどれ

子テーマやプラグインから、エディター画面にCSSを読み込ませる方法がいくつかありましたので、最適解を探っていこうと思います。

今回は、以下の２通りご紹介します。

• 方法１：add_editor_style()で読み込む
• 方法２：wp_enqueue_style()で読み込む

環境

２つのスタイルシートを用意

まず「フロント用」と「エディター用」のCSSファイルを用意します。

• フロント用→サイトに適用させるスタイル
• エディター用→編集画面に適用させるスタイル

プラグインから読み込んでみる

今回は例として、自作プラグインからCSSを読み込んでみます。

• my-plugin
  • my-plugin.php（ここから読み込む）
  • css
    • style.css（フロント用）
    • editor-style.css（エディター用）

編集画面は実際のサイトにできるだけ近づけるのが望ましいため、通常はフロント用CSSをエディターにも読み込みます。

そうすることで、エディター用CSSは微調整（エディター特有の余白・枠線など）だけで済むようになります。

一方、すべてのスタイルをエディター用CSSに書く方法もありますが、フロントとの見た目にズレが生じやすくなるため、基本的には前者の方法をおすすめします。

方法１：add_editor_style()で読み込む

/**
 * エディター用の CSS 読み込み
 */
add_action( 'after_setup_theme', function() {

  // ブロックエディターをサポート
  add_theme_support( 'editor-styles' );

  // 指定のファイルを読み込む
  add_editor_style( plugin_dir_url( __FILE__ ) . 'css/style.css' ); // フロント用
  add_editor_style( plugin_dir_url( __FILE__ ) . 'css/editor-style.css' ); // エディター専用
});

テーマの初期化が行われた後にeditor-stylesを有効にし、指定のCSSファイルを読み込むといった処理を行っています。

add_theme_support( 'editor-styles' )の記述がない場合は、クラシックエディターでのみスタイルが読み込まれます。

特徴

• 自動で.editor-styles-wrapperが追加される
• クラシックエディターとブロックエディター両方で読み込まれる
• インラインCSSで読み込まれる
• 依存関係は指定できない

自動で.editor-styles-wrapperが追加される

ブロックエディターの編集エリアは.editor-styles-wrapperというクラスで囲まれており、本来スタイルを当てる際にはこのクラスを意識して記述する必要があります。

しかし、add_editor_style()で読み込む場合は自動的に.editor-styles-wrapperが各セレクタの接頭辞として追加されるため、特別な対応をせずともスタイルが正しく適用されます。

※body要素は置き換わる。

記述したCSS

body {
  background-color: #fff;
}

p {
  color: #333;
}

h1,
h2 {
  font-size: 2em;
}

ブロックエディターで読み込まれるCSS

.editor-styles-wrapper {
  background-color: #fff;
}

.editor-styles-wrapper p {
  color: #333;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2 {
  font-size: 2em;
}

この仕組みのおかげで、エディター専用のスタイルを容易に反映させることができるというわけです。

ただし、自ら.editor-styles-wrapperを記述すると、読み込まれる際にも同じクラスが二重に追加されてしまうという点に注意してください。

/* 記述したCSS */
.editor-styles-wrapper p {
  color: #333;
}

/* 読み込まれるCSS */
.editor-styles-wrapper .editor-styles-wrapper p {
  color: #333;
}

パスの指定方法

基本的にはテーマディレクトリからの相対パスを指定しますが、プラグインから読み込む場合はURLを指定することでうまく動作します。

// テーマに記述する場合
add_editor_style( 'css/editor-style.css' );

// プラグインに記述する場合
add_editor_style( plugin_dir_url( __FILE__ ) . 'css/editor-style.css' );

キャッシュ対策

念の為に、キャッシュ対策の方法も記述しておきます。

キャッシュが原因でスタイルが反映されない場合は、URLの最後にクエリパラメータを付与すれば解決します。

// editor-style.cssの最終更新時刻を取得
$editor_style_ver = filemtime( plugin_dir_path( __FILE__ ) . 'css/editor-style.css' );

// CSSファイルにバージョン番号を付加して読み込む
add_editor_style( plugin_dir_url( __FILE__ ) . 'css/editor-style.css?v=' . $editor_style_ver );

ただし、クエリパラメータはhttp(s)から始まる「絶対URL」でなければなりません。（相対パスは使えない）

テーマで絶対URLに書き換える場合は、get_stylesheet_directory_uri()や home_url()が便利です。

スタイルが一部適用されない現象について

プラグイン、または子テーマのfunctions.phpに、以下のコードを記述して検証してみました。

add_action( 'after_setup_theme', function() {
  add_theme_support( 'editor-styles' );
});

すると、テーマ（SWELL）の独自機能である「インラインボタン」の色変更が、編集画面だけ反映されなくなりました。

検証してみると、本来先に読み込まれるはずの基本スタイルが、色変更クラスよりも後に読み込まれてしまう現象が起きていました。

通常時

[class*=is-style-btn_] {
  /* ①基本スタイル */
}
.red_ {
  /* ②色変更 */
}

editor-styles有効時

.red_ {
  /* ①色変更 */
}
:where(.editor-styles-wrapper) [class*=is-style-btn_] {
  /* ②色変更クラスよりも後に読み込まれてしまったため、色変更が反映されない */
}

※上記の場合、詳細度が同じなので後で読み込まれているスタイルが優先されます。

このように場合によっては意図しない現象が起こるので、テーマの設計やWordPressの仕様を理解した上でeditor-stylesを適用する必要があります。

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

/**
 * ブロックエディター用のCSS読み込み
 */
function enqueue_custom_editor_assets() {

    // フロント用
    wp_enqueue_style(
        'my-custom-plugin-style',
        plugin_dir_url( __FILE__ ) . 'css/style.css',
        [],
        filemtime( plugin_dir_path( __FILE__ ) . 'css/style.css' )
    );

    // エディター用
    wp_enqueue_style(
        'my-custom-plugin-editor-style',
        plugin_dir_url( __FILE__ ) . 'css/editor-style.css',
        [],
        filemtime( plugin_dir_path( __FILE__ ) . 'css/editor-style.css' )
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_custom_editor_assets' );

基本的には、フロントエンドでスタイルシートやスクリプトを読み込む際の記述方法と同じです。

• フロントエンドで読み込むフック：wp_enqueue_scripts
• ブロックエディターで読み込むフック：enqueue_block_editor_assets

という感じ。

特徴

• 編集画面全体（サイドバーやツールバーなど）にスタイルが影響する
• ブロックエディターでのみ読み込まれる
• 外部CSSファイルとして読み込まれる
• 依存関係を指定できる

CSSの書き方に注意

この方法では.editor-styles-wrapperクラスを自動的に付与してくれないため、セレクターの書き方を工夫しないと、編集画面全体にスタイルが適用されてしまいます。

例えば、フロント用のCSSに以下のようなスタイルが記述されていた場合。

/* フロント用CSS */
button {
  font-size: 20px!important;
}

サイドバーやツールバーなどのbutton要素にスタイルが反映されてしまい、編集画面全体が崩れてしまいます。

適切に.editor-styles-wrapperで囲ったり、詳細度を高めたりしないと、意図したスタイルにならないことに注意が必要です。

おまけ：enqueue_block_assetsフック

enqueue_block_assetsはフロント、エディター両方で読み込まれるフックです。

is_admin()で判定し、エディターのみ、もしくはフロントのみで読み込むといったことも柔軟に対応できます。

/**
 * コンテンツアセットのエンキュー。ただし、エディター内のみ
 */
function example_enqueue_editor_content_assets() {
    if ( is_admin() ) {
        wp_enqueue_script(
            'example-editor-content-scripts',
            plugins_url( 'constent-scripts.css', __FILE__ )
        );
        wp_enqueue_style(
            'example-editor-content-styles',
            plugins_url( 'constent-styles.css', __FILE__ )
        );
    }
}
add_action( 'enqueue_block_assets', 'example_enqueue_editor_content_assets' );

ただし、エディターのiframeの内側と外側の両方に読み込まれるため、エンキューするスクリプトライブラリによっては問題が発生するという報告がされているので、今のところ少し使いづらいという印象です。

add_editor_style()とwp_enqueue_style()はどちらが良いか

両者の大きな違いは、.editor-styles-wrapperが自動で追加されるかとどうか、依存関係の指定の有無です。

add_editor_style()の場合は、ブロックエディターを囲っている.editor-styles-wrapperの直前でインラインCSSとして優先的に読み込んでいるため、依存関係は特に不要かなと思っています。

やはり、自動でエディター専用クラスが追加されるのはメリットとして非常に大きいので、他に理由がない限りadd_editor_style()で読み込む方が良いかもしれません。

あわせて読みたい

【WordPress】プラグインのパスやURLを取得する方法 WordPressのプラグイン開発でつまずきがちな、パスやURLを取得する方法をまとめました。 プラグインのパスやURLを取得する 以下のphpファイル内で記述した場合、どのよ…

カスタマイズに困ったらお気軽にご相談を！

• 「ちょっとしたCSSの調整だけお願いしたい」
• 「不具合を直してほしい」

料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔