WordPressの記事編集の際、エディター上に表示されているものと実際に公開される記事の表示が異なっていると完成形のイメージも掴みにくく、何度もプレビューで確認することになってしまいがちです──。
今回はエディターでの編集が少しでも快適になるよう、フロントエンド(公開後の記事やページ)とエディター上の表示を揃えるための最低限のポイントを確認してみます。
※ 全く同じ表示にすることを推奨するものではありません。必要な箇所だけ参考にしてみてください。
使用したバージョン WordPress 6.0
01. エディタースタイルの準備
add_theme_support( ‘editor-styles’ )
まずはfunctions.phpの設定でadd_theme_support( 'editor-styles' )
を有効にします。
これによりエディターのスタイルを変更できるようになり、この後の設定が可能になります。
function my_setup_theme() { add_theme_support( 'editor-styles' ); } add_action( 'after_setup_theme', 'my_setup_theme' );
02. エディターにフロントエンド用CSSを読み込む
add_editor_style()
フロントエンド(正確にはthe_content()
が書き出す部分)に適用されるCSSファイルをブロックエディターに読み込みます。
該当するCSSファイルが複数ある場合は全て読み込みます。
// エディターにCSS読み込み function wpdocs_theme_add_editor_styles() { add_editor_style( 'style.css' ); } add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
// エディターにCSS読み込み(複数) function wpdocs_theme_add_editor_styles() { add_editor_style( array( 'style.css', 'css/example.css' ) ); } add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
この時点でフロントエンドのCSSがエディターに適用されるようになりますが、いくつか次のような注意点があるので気をつけてください。
注意:一部の要素セレクターはクラス名セレクターに変換される
html
及びbody
の要素セレクターはクラス名セレクター.editor-styles-wrapper
に変換されます。editor-styles-wrapper
はエディターの入力エリアを囲む要素で、これにより入力エリア内にのみCSSが適用される仕組みになっています。
セレクターbody ul { }
の場合は.editor-styles-wrapper ul { }
のように変換されます。
html(ルート要素)にフォントサイズを指定しており子要素でrem指定している場合、エディターではremの基準となる値が変わってしまうためフォントサイズがフロントエンドと合わなくなります。
注意:the_content() よりも上の階層から指定したセレクターは反映されない
the_content()
より上の階層にあるbody
以外の要素や独自のクラス名を含んだセレクターはエディターには反映されません。
注意:@importが使えない場合がある
読み込んだCSSファイル内では@importが動かない場合があります。これについては確かな文献を見つけられていません──。
複数のCSSファイルはそれぞれ読み込むほうが確実です。
反映される書き方は?
the_content()
で出力されるものとbody
で構成されたセレクターはエディターに反映されます。
要素の直接指定(h2
, h3
, p
, ul
等)やブロック独自のクラス名(wp-block-image
, wp-block-table
等)
@importに関しては他の方法を使うほうが良さそうです。

ブロックエディターになってからは前述の add_theme_support( ‘editor-styles’ ) の記述が無いと add_editor_style() が有効にならないので注意してください。
add_editor_style() が効かない場合はここが原因かもしれません。
03. エディター標準のスタイルをフロントエンドに反映させる
add_theme_support( ‘wp-block-styles’ )
ブロックエディターで配置するいくつかのブロックにはデフォルトのスタイルが適用されています。
引用ブロックの左ボーダーや区切り線の幅などがこれに当たりますが、これらをフロントエンドに反映するためにはfunctions.phpでadd_theme_support( 'wp-block-styles' )
を有効にする必要があります。
前述のadd_theme_support( 'editor-styles' )
と合わせて有効にすればOKです。
function my_setup_theme() { add_theme_support( 'editor-styles' ); add_theme_support( 'wp-block-styles' ); } add_action( 'after_setup_theme', 'my_setup_theme' );
add_theme_support( 'wp-block-styles' )
を有効にするとブロックエディターにあらかじめ用意されているスタイルがフロントエンドに反映されるようになります。
補足
一部のスタイルは補う必要あり
クラシックテーマでは「プルクオート・テーブル」ブロックにおける配置位置の指定など、一部のスタイルがフロントエンドに自動的に反映されないものがあるようです。
新しい仕様のブロックテーマでは解決されているようですが、クラシックテーマで制作する場合は次のように補っています。
.wp-block-pullquote.alignleft { float: left; } .wp-block-pullquote.alignright { float: right; } .wp-block-table.alignleft { float: left; } .wp-block-table.alignright { float: right; } .wp-block-table.aligncenter { margin-left: auto; margin-right: auto; }

このあたりはWordPressのアップデートで変わってくると思うので必要に応じて補うくらいでいいと思います。
画像ブロックは少し前まで配置位置の指定がフロントエンドにも反映されていたのですが、22.07.08現在効かなくなっていました───。画像ブロックのHTML構造が変更されたときに再び未対応になってしまったのかも。
エディター専用CSSを用意するのもあり
エディター専用のCSSファイルをひとつ用意しておくと何かと便利です。
エディター側でのみルートのフォントサイズを小さくしたり編集エリアの余白を多めにとったりと、エディターの使いやすさに貢献できるかもしれません。
この場合もadd_editor_style()
で読み込みます。
参考リンク
WordPress.org – テーマサポート
WordPress Codex – add_editor_style()