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

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

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

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

1
add_editor_style('editor-style.css' );

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

Gutenberg対応の方法

新規委エディターGutenberg(グーテンベルグ)では、editor-style.cssをadd_editor_style関数で追加するとともに、add_theme_support( ‘editor-styles’ )を同時に指定する必要があります。

Gutenberg対応図
Gutenberg対応図

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

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

コメント

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