ブロックエディターと公開記事の表示を揃えるための3つのポイント【WordPress】

WordPressの記事編集の際、エディター上に表示されているものと実際に公開される記事の表示が異なっていると完成形のイメージも掴みにくく、何度もプレビューで確認することになってしまいがちです──。

今回はエディターでの編集が少しでも快適になるよう、フロントエンド(公開後の記事やページ)とエディター上の表示を揃えるための最低限のポイントを確認してみます。

※ 全く同じ表示にすることを推奨するものではありません。必要な箇所だけ参考にしてみてください。

使用したバージョン WordPress 6.0

PR

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があると読み込めない場合がある

add_editor_style()で読み込んだCSSファイル内で@importが使われている場合、うまく動かない場合があります。詳しくは関連記事を参考にしてください。

反映される書き方は?

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' )を有効にするとブロックエディターにあらかじめ用意されているスタイルがフロントエンドに反映されるようになります。

23.04.03追記:効果が少し変更された?

add_theme_support( 'wp-block-styles' )の効果が少し変更されているようです。

旧:エディターに適用されているブロックのデフォルトスタイルをフロントエンドにも適用する

新:ブロックのデフォルトスタイルをエディターとフロントエンド両方に適用する

つまり現在はエディターとフロントの差異を無くす目的でadd_theme_support( 'wp-block-styles' )を有効にする必要はなく、単純にWordPressに備わっているデフォルトスタイルを使いたい場合に有効にすれば良いようです。

補足

テンプレートに反映されない一部のブロック設定について

クラシックテーマでは「ギャラリー・プルクオート・テーブル」ブロックにおける配置位置の指定など、一部のスタイルがフロントエンドに自動的に反映されないものがあります。

新しい仕様のブロックテーマでは解決されているようですが、クラシックテーマでこれらの設定をフロントエンドに反映させる方法については次の記事でまとめています。

エディター専用CSSを用意するのもあり

エディター専用のCSSファイルをひとつ用意しておくと何かと便利です。
エディター側でのみルートのフォントサイズを小さくしたり編集エリアの余白を多めにとったりと、エディターの使いやすさに貢献できるかもしれません。
この場合もadd_editor_style()で読み込みます。


参考リンク
WordPress.org – テーマサポート
WordPress Codex – add_editor_style()


PR

タイトルとURLをコピーしました