ワードプレスのadd_editor_style関数の使用方法・解説

カテゴリー カスタムフィールド、テーマ、ワードプレスコア

概要

add_editor_style 関数は、WordPressのビジュアルエディタにおいて使用されるスタイルシートを追加するための関数です。この関数を使用することで、テーマの特徴として独自のTinyMCEのcssファイル名を指定することができます。これにより、ビジュアルエディタ内でのコンテンツ表示をテーマに合わせたものにカスタマイズすることができ、ユーザーが実際のページとほぼ同じように見えるエディタ体験を得ることができます。

よく使われる実装目的

  1. テーマのスタイルに合わせたエディタデザインの表示
  2. ユーザーがエディタでのコンテンツ編集の際に、実際の表示と同様のスタイルを提供
  3. カスタムフォントやカラーリングの適用
  4. ボタンや要素のスタイル調整
  5. 行間やフォントサイズの調整
  6. 特定のデザインやレイアウトをエディタ上で再現
  7. プラグインのスタイルをエディタに適用するための基盤
  8. 提供されるメディアの表示スタイルを調整

構文

add_editor_style( $file );

パラメータ

  • $file (string) – スタイルシートのファイル名。theme-name/editor-style.cssの形式で指定します。

戻り値

  • なし

関連する関数

使用可能なバージョン

  • WordPress 2.5以降

コアファイルのパス

  • wp-includes/theme.php

この関数のアクションでの使用可能性

アクション 使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme 〇
after_setup_theme 〇
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head 〇

サンプルコード

  1. 基本的な使用例

    add_editor_style( 'editor-style.css' );

    このコードは、テーマディレクトリ内の editor-style.css ファイルを追加し、ビジュアルエディタに適用します。

  2. 複数のスタイルシートを追加

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

    このコードは、2つのスタイルシートをビジュアルエディタに追加します。

  3. テーマのフォントをエディタに適用

    add_editor_style( 'fonts/editor-fonts.css' );

    このコードは、カスタムフォントスタイルを定義したスタイルシートをエディタに適用します。

  4. カスタムテーマスタイルの読み込み

    add_editor_style( 'css/custom-editor.css' );

    このコードは、テーマ独自のスタイルを適用したファイルをビジュアルエディタに追加します。

  5. 条件付きでスタイルシートを追加

    if ( is_admin() ) {
   add_editor_style( 'admin/editor-style.css' );
}

    このコードでは、管理画面でのみ特定のスタイルシートをエディタに追加しています。

引用元のページがある場合は、必要に応じてそれぞれのページのURLを示してください。

この関数について質問する


上の計算式の答えを入力してください