add_editor_style()

add_editor_style() は、WordPress の管理画面のエディター（ブロックエディターやクラシックエディター）にカスタム CSS を適用するための関数です。

この関数を使うことで、投稿や固定ページを作成する際に、フロントエンドと同じスタイルを適用でき、より直感的な編集が可能になります。特に、テーマ独自のデザインを維持しながら、管理画面でも一貫した見た目を実現したい場合に便利です。

機能の説明

add_editor_style() とは？

add_editor_style() は、WordPress のエディターにスタイルシートを追加するための関数です。この関数を使用すると、管理画面のエディターに適用する独自の CSS ファイルを指定できます。通常、functions.php 内で使用し、テーマディレクトリ内の CSS ファイルを適用する形になります。

いつ使うのか？

• 管理画面のエディターでフロントエンドと同じデザインを適用したい場合
• 独自のフォントやカラー設定をエディターにも適用したい場合
• ユーザーが編集しやすい環境を提供したい場合

シンプルなコード例

function my_custom_editor_styles() {
    add_editor_style('editor-style.css');
}
add_action('admin_init', 'my_custom_editor_styles');

• add_editor_style('editor-style.css') は editor-style.css という CSS ファイルをエディターに適用します。
• add_action('admin_init', 'my_custom_editor_styles') により、管理画面の初期化時に my_custom_editor_styles() 関数を実行します。

使い方の説明

複数の CSS ファイルを適用する

function my_custom_multiple_editor_styles() {
    add_editor_style(array('editor-style.css', 'custom-editor.css'));
}
add_action('admin_init', 'my_custom_multiple_editor_styles');

• add_editor_style() は配列として複数の CSS ファイルを指定することも可能です。
• editor-style.css と custom-editor.css の2つのスタイルをエディターに適用しています。

一緒に使うことが多い関連タグ

add_theme_support('editor-styles')

ブロックエディター（Gutenberg）で add_editor_style() を適用するには、以下のコードを追加する必要があります。

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

追加情報で取得したい場合

フロントエンドの CSS をエディターにも適用したい

function my_editor_styles() {
    add_editor_style('style.css');
}
add_action('admin_init', 'my_editor_styles');

テーマのメイン CSS（style.css）を管理画面にも適用します。

想定されるトラブル

editor-style.css が適用されない

• editor-style.css が wp-content/themes/your-theme/ に存在するか確認する。
• add_theme_support('editor-styles') を適用しているか確認する（Gutenberg 用）。
• キャッシュをクリアして再確認する。

Q＆A

まとめ

• add_editor_style() はエディターに独自のスタイルを適用するための関数。
• functions.php に記述し、適用する CSS ファイルを指定。
• Gutenberg では add_theme_support('editor-styles') も必要。
• 適用されない場合はファイルの存在やキャッシュを確認。