add_editor_style()


WordPressのadd_editor_style()関数は、テーマのエディターにカスタムスタイルを適用するために使用されます。この関数を使用することで、フロントエンドとエディターの表示を統一することができます。

構文

add_editor_style( string|array $stylesheet = 'editor-style.css' );
  • $stylesheet(string|array) — 適用するスタイルシートのパスまたはURL。デフォルトは’editor-style.css’。

例1: 基本的な使用法

テーマディレクトリ内の’editor-style.css’をエディターに適用します。

add_editor_style( 'editor-style.css' );

例2: 複数のスタイルシートを適用

複数のスタイルシートをエディターに適用します。

add_editor_style( array( 'editor-style.css', 'custom-editor-style.css' ) );

例3: 外部スタイルシートを適用

外部のスタイルシートをエディターに適用します。

add_editor_style( 'https://example.com/custom-editor-style.css' );

例4: 子テーマのスタイルシートを適用

子テーマのスタイルシートをエディターに適用します。

add_editor_style( get_stylesheet_directory_uri() . '/editor-style.css' );

例5: カスタムフォントを適用

Googleフォントをエディターに適用します。

function custom_editor_styles() { add_editor_style( 'https://fonts.googleapis.com/css?family=Roboto' ); } add_action( 'admin_init', 'custom_editor_styles' );

例6: カスタムCSSを直接適用

カスタムCSSを直接エディターに適用します。

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

例7: エディターの背景色を変更

エディターの背景色を変更します。

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

例8: エディターのフォントサイズを変更

エディターのフォントサイズを変更します。

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

注意点

  • スタイルシートのパスはテーマディレクトリからの相対パスで指定します。
  • 外部のスタイルシートを使用する場合は、URLを直接指定できます。
  • 複数のスタイルシートを適用する場合は、配列を使用します。

関連機能：