WordPress – 投稿画面の背景色がグレーになる
WordPress 6.4.0ぐらいのバージョンに切り替えた途端、投稿画面の背景色がグレーの状態になってしまった。色々試した結果functions.phpにadd_theme_support( 'editor-styles' );を設定し独自のeditor-style.cssを作成することで解決できました。
ブロックエディタ用のCSSを読み込ませる
まずfunctions.phpに下記のコードを追記します。
function my_theme_setup(){
add_theme_support('editor-styles');
// ブロックスタイルに適用させるCSSファイル名
add_editor_style();
// ブロックスタイルの適用
add_theme_support('wp-block-styles');
}
add_action('after_setup_theme', 'my_theme_setup');ブロックエディタのスタイルを独自のCSSで設定したい場合add_theme_support( 'editor-styles' );とadd_editor_style();が必要になります。フロントエンド側のcssファイルと同じスタイルを使用したい場合add_editor_style( 'style.css' );と設定すればテンプレートディレクトリの直下のstyle.cssファイルが読み込まれ投稿画面側のスタイルにも影響を受けます。
ただ、注意して欲しいのがstyle.cssの書き方次第では投稿画面全体のスタイルが上手く適用されない場合もあります（フォントが小さかったりなど）。WordPressのコーディングルールに沿った記述をしていればstyle.cssファイルで事足りるかと思います。
上記の関数を追記すれば、背景色グレーから切り替わりstyle.cssで設定しているbody{...}のbackground-color: ...;が適用されます。
ただ、問題なのがstyle.cssを使うと投稿画面側のスタイルに色々と影響を受けやすいので最小限のスタイルだけを適用させるために、エディター用のcssファイルを作成します。
フロント側とエディター側のcssファイルを分ける
add_editor_style();を設定することでテンプレートディレクトリの直下のeditor-style.cssを読み込む仕組みになっています。試しにファイルを作成し下記のコードを追加して投稿画面を確認してみてください。
*{
line-height: 1. 5;
}
body{
background-color: #fff;
font-size: medium;
}line-heightを設定している理由は行間の調整のためです。これがないとレイアウトが崩れるので追加しています。
またWordPressのブロックエディタを最大限使用したい場合add_theme_support('wp-block-styles');を追記しておきましょう。これがないとブロックエディタが崩れる原因にもなります。