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

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以外の要素や独自のクラス名を含んだセレクターはエディターには反映されません。

反映される書き方は?

the_content()で出力されるものとbodyで構成されたセレクターはエディターに反映されます。
要素の直接指定(h2, h3, p, ul等)やブロック独自のクラス名(wp-block-image, wp-block-table等)

倉庫番
倉庫番

ブロックエディターになってからは前述の 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()


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