ワードプレスのブロックエディタ（グーテンベルク）のエディタ画面に本番ページと同じcssを読み込みたい！見た目を公開ページと一緒にしたい！というケースは多い…と思います。

ということでここではワードプレスのブロックエディタのエディタ画面にcssを読み込ませる方法を紹介したい。

 

めっちゃ簡単2ステップ

ブロックエディタのエディタ画面にこちらで用意したcssを読み込ますのはすごく簡単。

 

①エディタへのcss読み込みを有効化

add_theme_support( 'editor-styles' );

「add_theme_support( 'editor-styles' );」をfunctions.phpに一行追加。これでブロックエディタへのcss読み込み機能が有効になります。

 

②読み込ませるcssを指定

add_editor_style( '○○.css' );

これまた「add_editor_style( '○○.css' );」をfunctions.phpに一行追加。○○の部分は自分が用意したcssの名前にしてくださいね。

ちなみにこのcssをどこのフォルダに置くのかというと、テンプレートフォルダ直下にポイっと置いておけばOK。

たったこんだけでブロックエディタのエディタ画面に「○○.css」のデザインが読み込まれます。

 

注意点

たったこれだけなんですが、読みこませるcssに注意点がいくつかあります。

 

h2とかh3とかにする

表側というか公開ページで適用しているcssってh2とかh3とかにそのまま直にデザイン記述してないと思うんです。

「.post-content h2」みたいな範囲を狭めてデザインを設定しているハズ。

ただエディタ画面に読み込むcssについてはこの例でいうと「.post-content」は外して「h2」に対して設定しているcssにしてください。じゃないとデザインが有効になりません。

 

ボタンのデザインが消える

エディタ画面だけの問題ですが、エディタ画面のボタンが表示されなくなることがあります。

これはこっちに治し方をまとめたのであわせて参考にしてくださいね。

【ワードプレス】ブロックエディタのエディタ画面のボタンデザイン

 

まとめ

ワードプレスのブロックエディタ（グーテンベルク）のエディタ画面にcssを読み込ませる方法を紹介しました。

めちゃめちゃ簡単で「add_theme_support( 'editor-styles' );」と「add_editor_style( '○○.css' );」をfunctions.phpに追加するだけ！たった2行。シンプルでいいですね。

お試しくださいね。