add_editor_style() の使い方｜説明・引数・注意点

説明

基本構文

add_editor_style( string|string[] $stylesheet = 'editor-style.css' ): void

引数

• $stylesheet：CSSファイルのパス（テーマからの相対パス）

戻り値

戻り値はありません。

使い方（サンプル）

add_action( 'after_setup_theme', function() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'css/editor.css' );
} );

注意点

• after_setup_theme フックの中で呼びます。
• ブロックエディターで使うには add_theme_support( 'editor-styles' ) が必要です。

実務での使いどころ

• エディターの見た目を、サイトの表示に近づけるとき。
• 編集画面専用のCSSを、読み込むとき。

よくあるミスと対処

• ブロックエディターで使うのに、add_theme_support( 'editor-styles' ) を呼んでいない。エディターのスタイルが適用されない。
• after_setup_theme フックの外で呼んでいる。
• フロント用のCSSを、そのまま使い、エディターの余白や幅がずれる。エディター専用のCSSを用意する。

NG例

add_editor_style( 'editor-style.css' ); // ブロックエディターでは、これだけでは適用されない

OK例

add_action( 'after_setup_theme', function () {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'editor-style.css' );
} );

使い分け早見表

関連項目

add_theme_support()、wp_enqueue_style()

公式リファレンス：add_editor_style() | Function | WordPress Developer Resources