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

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

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

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

環境

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

まず「フロント用のCSSファイル」と「エディターにのみ適用させる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の仕様変更次第ですが、場合によってはこのような意図しない現象が起こるので、無条件で安心して使える読み込み方法ではないことは頭に入れておいた方が良さそうです。

方法２：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円〜、お支払いはPayPay・Amazonギフトカードなど柔軟に対応してます🤔