WordPress 6.9以降、自動的に出力されるようになった xxx-inline-css といったスタイルの詳細や、出力しないようにする方法を紹介しています。

xxx-inline-cssが出力しないようにする

WordPressサイトにて global-styles-inline-css を出力しないようにしていた場合、v.6.9以上では これが個別に wp-block-heading-inline-css などの名前でインラインCSSとして出力されるようになっています。

そのページにあるブロックに対して、必要なブロックのCSSだけを読み込むように変更されているということですが、それでも大きい感じですし、使っていなかった以上は必要ありません。

これまでは、functions.php に以下のように記述してWordPressのCSSを出力しないように設定していましたが、これだけでは不十分となりました。

// global-styles-inline-cssを出力しない
add_action('wp_enqueue_scripts', 'remove_global_styles_inline');
function remove_global_styles_inline()
{
	wp_dequeue_style('wp-block-library');
	wp_dequeue_style('global-styles');
	wp_dequeue_style('classic-theme-styles');
}

解決策として、個別に読み込んでいるCSSを元の一括読み込みに戻した上で、今まで通り出力しないようにする、という方法があります。

should_load_separate_core_block_assets では、trueで個別読み込み、falseで一括読み込みとなりますので、以下のように記述することで解決することが可能です。

// core-blockのCSSを一括で読み込む
add_filter('should_load_separate_core_block_assets', '__return_false');

// global-styles-inline-cssを出力しない
add_action('wp_enqueue_scripts', 'remove_global_styles_inline');
function remove_global_styles_inline()
{
	wp_dequeue_style('wp-block-library');
	wp_dequeue_style('global-styles');
	wp_dequeue_style('classic-theme-styles');
}