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

wordpress5.0から採用された新エディター「Gutenberg」に、独自にエディター用スタイルが適用されない。ちょっと修正が必要なので、その修正のやり方を紹介。
Wordpress5.0で変わるところ
WordPress5.0で変わるところ
新規エディターに適用するEditor-Style.cssの記述を変更する

Initializing...

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

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

		add_editor_style( 'editor-style.css' );

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

Gutenberg対応の方法

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

Gutenberg対応図

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

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プラグインでも有効な修正です。こちらもあわせてお試しください。
以上

コメント

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