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

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

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

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

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のテーマ「SWELL」。Webサイトのベースとしても多く利用されている投資価値No.1のテーマです。

レビュー記事はこちら購入はこちら

環境

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

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

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

フロント用のCSSファイルもエディター側で読み込ませることで、エディター用のCSSファイルは補助的に上書きしたスタイルを記述するだけで済みます。

「エディターのスタイルは全てエディター用CSSに書く！」という場合は、フロント用のCSSファイルは特に不要です。

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

今回は例として、プラグインから外部CSSを読み込む方法で解説していきます。

• my-plugin
  • my-plugin.php（ここから読み込む）
  • css
    • style.css（フロント用のスタイルシート）
    • editor-style.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()が便利です。

方法２：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ファイル内で記述した場合、どのよ…

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ クリックしてジャンプ！ ／