WordPressのビジュアルエディターに読み込まれるCSSファイルの順番を任意に変更する方法

WordPressのビジュアルエディターで表示スタイルを変更しようと思ったら、一般的なのは以下の方法です。

WordPressのビジュアルエディターのスタイルをカスタマイズする方法いろいろ

Wordpressの記事を作成するとき、投稿画面のビジュアルエディターを用いている方も多いかと思います。ビジュアルエディター...

nelog.jp

2015-07-07 22:54

例えば以下のように、add_editor_style関数を何個か書いたり。

add_editor_style(); //テーマフォルダ内のeditor-style.cssが読み込まれる
add_editor_style( 'css/admin-editor.css' );
add_editor_style( 'genericons/genericons.css' );

以下のように、add_editor_style関数の引数に対して、配列内で複数スタイル指定なんてことも可能です。

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

ただこの、add_editor_style関数は、コード上で書いた順番そのままに、スタイル用のCSSファイルが読み込まれるわけではありません。

調べてみたところ、add_editor_style関数内で、いろいろな処理を行う中、順番が変わって表示されてしまうケースもあります。

CSSは、同じ「CSSセレクター優先度」であれば、後から読み込んだ方が適用されます。なので、ファイルの読み込み順も結構重要となるケースもあったりします。

そんな「CSS読み込み順が変更できない」というのも何かと不便だったので、「順番を指定できる何か良い方法はないものか？」とWordpressコードを調べてみたところ、良い手が見つかったので紹介です。

ビジュアルエディターに読み込むCSS順を変更する方法

今回は単純な例として以下の順番で読み込むという前提で説明します。

親テーマのstyle.css
親テーマのeditor-style.css
子テーマのstyle.css
子テーマのeditor-style.css

一般的な「WordpressテーマのCSSカスタマイズ」でも、親テーマのCSSより、子テーマのCSSが優先されます。

なので、「ビジュアルエディターのCSSカスタマイズ」も親テーマのCSSより、子テーマのCSSが優先されるようにしたいと思います。

ビジュアルエディターのCSSファイルの読み込み順を制御するには、add_editor_style関数は使用しないで、functions.php上で以下のように書くとうまくいくようです。

///////////////////////////////////////
// ビジュアルエディターでCSSを読み込む順番を指定する
///////////////////////////////////////
add_filter( 'editor_stylesheets', 'editor_stylesheets_custom_demo');
function editor_stylesheets_custom_demo($stylesheets) {
  //$stylesheets配列に対してフルパスでCSSファイルURLを指定する

  //$stylesheets配列の最後に読み込む順番でファイルパスを追加していく
  array_push($stylesheets,
    get_template_directory_uri().'/style.css',
    get_template_directory_uri().'/editor-style.css'
  );
  //子テーマがある場合、子テーマ内のスタイルも読み込む
  if (is_child_theme()) {
    array_push($stylesheets,
      get_stylesheet_directory_uri().'/style.css',
      get_stylesheet_directory_uri().'/editor-style.css'
    );
  }
  //読み込むCSSファイル配列は返り値として返す
  return $stylesheets;
}

上記コードでは、以下のようなことを行っています。

editor_stylesheetsをフック
$stylesheets配列を取得
$stylesheets配列最後尾にCSSファイルを順番通りに追加
$stylesheets配列を返り値として戻す

$stylesheets配列にスタイルシートを指定する場合は、CSSファイルのフルパスを入力する必要があるので注意が必要です。

もちろん、「add_editor_style関数を用いてCSSを追加後、editor_stylesheetsをフックを利用して$stylesheets配列の順番をソートを用いて入れ替える」という方法もあります。ただ、個人的には上で書いたコードの方が「何をやっているのかが見た目的にも分かりやすい」ということで採用しました。

editor_stylesheetsフックの場所

せっかく、Wordpressを調べたので、今後のため「editor_stylesheets」フックの記述があった場所もメモがてら掲載しておきます。

「editor_stylesheets」フック用の記載のある場所は、「wp-includes/theme.php」にあるget_editor_stylesheets()関数の最後の部分です。

/**
* Retrieve any registered editor stylesheets
*
* @since 4.0.0
*
* @global array $editor_styles Registered editor stylesheets
*
* @return array If registered, a list of editor stylesheet URLs.
*/
function get_editor_stylesheets() {
  $stylesheets = array();
  // load editor_style.css if the current theme supports it
  if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {
    $editor_styles = $GLOBALS['editor_styles'];

    $editor_styles = array_unique( array_filter( $editor_styles ) );
    $style_uri = get_stylesheet_directory_uri();
    $style_dir = get_stylesheet_directory();

    // Support externally referenced styles (like, say, fonts).
    foreach ( $editor_styles as $key => $file ) {
      if ( preg_match( '~^(https?:)?//~', $file ) ) {
        $stylesheets[] = esc_url_raw( $file );
        unset( $editor_styles[ $key ] );
      }
    }

    // Look in a parent theme first, that way child theme CSS overrides.
    if ( is_child_theme() ) {
      $template_uri = get_template_directory_uri();
      $template_dir = get_template_directory();

      foreach ( $editor_styles as $key => $file ) {
        if ( $file && file_exists( "$template_dir/$file" ) ) {
          $stylesheets[] = "$template_uri/$file";
        }
      }
    }

    foreach ( $editor_styles as $file ) {
      if ( $file && file_exists( "$style_dir/$file" ) ) {
        $stylesheets[] = "$style_uri/$file";
      }
    }
  }

  /**
   * Filters the array of stylesheets applied to the editor.
   *
   * @since 4.3.0
   *
   * @param array $stylesheets Array of stylesheets to be applied to the editor.
   */
  return apply_filters( 'editor_stylesheets', $stylesheets );
}