【WordPress】ビジュアルエディタ用CSSを投稿・固定ページ・テンプレート別に設定

ビジュアルエディタでも、実際の表示と同じCSSを適用させたいな〜ってときに、add_editor_styleつかうよね。もうめっちゃつかうよね。これね。

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

ちなみにこれは、テーマファイルのcssというディレクトリの中のeditor-style.cssを読み込ませているってことだね。

固定ページ・投稿でビジュアルエディタ用CSSを分ける

それはそうと、お仕事でやってっと、固定ページと投稿に別のスタイルを適用してる場合がそりゃまあ多いわけよ。そういうときに、ビジュアルエディタの方でもCSSを振り分ける方法をメモしておくね。

ちなみに、カスタム投稿用のCSSもこの流れで設定できるよ。

function include_editor_css(){
    $screen = get_current_screen();
    $posttype = $screen->post_type;
    if( $posttype == 'page' ){
        //固定ページ用
        add_editor_style('css/editor-style-page.css');
    } elseif( $posttype == 'post' ) {
        //投稿用
        add_editor_style('css/editor-style-post.css');
    }
}
add_filter('admin_head', 'include_editor_css');

固定ページのテンプレート別でビジュアルエディタ用CSSを分ける

それはそうと（2回目）、固定ページのテンプレートごとに別のスタイルを適用してる場合がそりゃまあたまにあるわけよ。そういうときの設定もメモしておくね。

function include_editor_css(){
    $post_id = 0;
    if ( isset( $_GET['post'] ) ) {
        $post_id = $_GET['post'];
    }
    $page_template = get_post_meta( $post_id, '_wp_page_template', true );
    if ( $page_template == 'page-hogehoge.php' ) {
        add_editor_style('css/editor-style-hoge.css');
    } else {
        add_editor_style('css/editor-style.css');
    }
}
add_filter('admin_head', 'include_editor_css');

page-hogehoge.phpっていうファイル名のテーマを設定してる場合は、editor-style-hoge.cssを適用させますっていう設定だね。

あわせ技

ご察しの通りかと思うけど、固定ページと投稿ページとカスタム投稿でCSSを分けつつ、固定ページのテーマでもCSSを分けているというめんどくさい構成の場合はこんな感じ。

function include_editor_css(){
    $screen = get_current_screen();
    $posttype = $screen->post_type;
    if( $posttype == 'page' ){
        //固定ページ用
        $post_id = 0;
        if ( isset( $_GET['post'] ) ) {
            $post_id = $_GET['post'];
        }
        $page_template = get_post_meta( $post_id, '_wp_page_template', true );
        if ( $page_template == 'page-hogehoge.php' ) {
            //固定ページでpage-hogehoge.phpのテンプレート使ってる場合
            add_editor_style('css/editor-style-pagehoge.css');
        } else {
            //その他の固定ページ
            add_editor_style('css/editor-style-page.css');
        }
    } elseif( $posttype == 'post' ) {
        //投稿用
        add_editor_style('css/wp-editor-post.css');
    } elseif( $posttype == 'piyo' ) {
        //カスタム投稿用
        add_editor_style('css/wp-editor-piyo.css');
    }
}
add_filter('admin_head', 'include_editor_css');

打ち間違いしてたらごめんね。動かなけりゃ適宜直してください。（投げやり！）