【WordPress】カスタマイズの追加CSSがブロックエディタに反映されないときの対処法

更新日：2024/10/18

WordPressのテーマカスタマイズにある追加CSSを利用すると、ユーザーが手軽にサイトの外観を変更できます。
ここに入力したCSSはブロックエディタにも反映されます。

しかし、時々反映されないことがあります。
そんなときの対処法をお伝えします。

原因はWebページとブロックエディタの構造の違い

ようするに、ブロックエディタ上に存在しないクラスやタグを追加CSSに記述しているのが原因です。

手っ取り早い対処法は、親要素を指定しないで目的のタグから始めることです。

例えば、次のようなcssを記述したあるとき、

.article h2{ color:red; }

次のようにタグのみに変更します。

h2{ color:red; }

これでブロックエディタにも反映されます。

実際には、記事とサイドバーのスタイルを変更するなど、ピンポイントでスタイルを適用するために親要素を指定することが多いです。
そのため単純に削除できないのが現状ですね。

コードで解決する

追加CSSを変更せずに、ブロックエディタにスタイルを反映するときは次のコードをfunction.phpや独自プラグインに記述してください。

add_filter( 'block_editor_settings_all' ,function($editor_settings, $block_editor_context){
        // 削除する文字列を配列で記述する
	$delete_strings=['.article'];
	
	$editor_settings['styles'][] = ['css'=> str_replace( $delete_strings , '' , wp_get_custom_css())];
	return $editor_settings;
},99,2);

上記のコードは、追加CSSを取得して特定の文字列を削除した後、ブロックエディタに反映しています。

複数の文字列を削除するときは、次のようにカンマで区切って記述します。

	$delete_strings=['.article','.main'];

補足

前項の方法で登録したCSSは、ブロックエディタが表示された時点ではJavaScriptの配列データとして存在します。
そしてJavaScriptが有効になった時点で、styleタグ内に展開されます。

その際、各スタイルの先頭に、'.editor-styles-wrapper'が追加されます。

'.editor-styles-wrapper'はブロックエディタの記事入力エリアのラッパークラスです。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。