editor-style.cssが適用されない！ Gutenbergに対応させる方法

editor-style.cssが適用されない！　Gutenbergに対応させる方法

作成日：2019-5-26

wordpress5.0から採用された新エディター｢Gutenberg｣に、独自にエディター用スタイルが適用されない。ちょっと修正が必要なので、その修正のやり方を紹介。

WordPress5.0で変わるところ

新規エディターに適用するEditor-Style.cssの記述を変更する

独自のエディター用スタイルの適用

wordpressのビジュアルエディターに切り替えた場合に見た目を本番環境に合わせるために、“editor-style.css”を作成しfunction.phpに下記のコードを追加するだけで、ビジュアルエディターに独自のcssが適用出来ます。

		add_editor_style( 'editor-style.css' );

が、しかしWordpress5.0で新規に採用されたGutenbergエディターでは、反映されなくなってしまった！

Gutenberg対応の方法

新規委エディターGutenberg（グーテンベルグ）でも、基本的には上記で対応しますが、2点だけ修正が必要です。

上記のコーデングを以下のように記述して修正します。

if ( ! function_exists( 'gutenberg_setup' ) ) :
    function gutenberg_setup() {
add_theme_support( 'editor-styles' );　//新規追加行
	add_editor_style( 'editor-style.css' ); 　//独自cssファイル（従来どおり）
    }
endif;
add_action( 'after_setup_theme', 'gutenberg_setup' );

まとめ

上記の修正は、wordpress5.0以前でも特に悪さは引き起こさないようです。まだWordpress5.0にアップデートしない方も先取りして修正してもかまわないです。また、wordpress5.0以降で旧エディターを強制的に使われている方も、ClassicEditorプラグインでも有効な修正です。こちらもあわせてお試しください。以上