Wordpressの記事編集エディタにフロントと同じCSSを適用する方法

投稿日：2021/10/07 ｜最終更新：2021/10/10
Wordpress
Gutenberg, クラシックエディタ

Wordpressの記事編集画面を記事詳細画面（フロント側）と同じ見た目に変更する方法は下記の通りです。

function.phpの記載方法

記事編集画面のエディタ（クラシックエディタまたはGutenberg）にフロントで利用しているCSSを追加する方法は下記の通りです。
CSSは配列に入れることで複数指定できます。

/**
 * エディターにCSS追加
 */
function my_theme_setup() {
    // Gutenberg でエディター用のCSSの適用する.
    add_theme_support( 'editor-styles' );
    // 読み込むスタイルシートを配列で指定する.
    $css = array( 'css/common/common.css', 'css/common/editor.css' );
    add_editor_style( $css );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

クラシックエディタでもGutenbergでも、上記のようにすれば独自のCSSを適用することができます。
CSSファイルの指定は、テーマディレクトリ以下のパスを記載してください。

スタイルシートの記述方法

add_editor_style()で読み込んだCSSは、下記のようなルールで読み込まれます。

Wordpress 4.9.8以前で必要だった.mce-content-bodyやGutenbergのエディターに含まれる.editor-styles-wrapperといったセレクタは必要ない。
bodyが自動的に.mce-content-bodyや.editor-styles-wrapperに置換され、body以下の各セレクタの最上位に自動的に.mce-content-bodyや.editor-styles-wrapperが付与される。
外部CSSではなく、上記の変換が行われた上でインラインで読みこまれる。

つまり、下記のようなCSSを読み込む場合、

body{
    font-size: 62.5%;
}
h1, h2, h3, h4, h5, h6{
    color: #000;
}
.font-bold{
    font-weight: bold;
}

クラシックエディタの時は下記のようになり、

.mce-content-body{
    font-size: 62.5%;
}
.mce-content-body h1, .mce-content-body h2, .mce-content-body h3, .mce-content-body h4, .mce-content-body h5, .mce-content-body h6{
    color: #000;
}
.mce-content-body .font-bold{
    font-weight: bold;
}

Gutenbergの場合は下記のとおりになります。

.editor-styles-wrapper{
    font-size: 62.5%;
}
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6{
    color: #000;
}
.editor-styles-wrapper .font-bold{
    font-weight: bold;
}

まとめ

Gutenbergでもクラシックエディタでも同じCSSを読み込むことができるようになったことで、フロントと管理画面の差異を減らすことが大分楽になりました。
Gutenbergにもクラシックエディタにも、デフォルトのスタイルがあたっていたりするので、CSSを読み込むことでリセットをかけることも可能だと思います。

フロントと管理画面の差異を減らすことで管理の手軽さをクライアントから要求されることが増えてきたので、うまく活用していきたいです。