【WordPress】global-styles-inline-css を削除する方法

WordPress 5.9以降、ブロックテーマや FSE（フルサイト編集）対応テーマを使用していると、HTMLの `` 内に `global-styles-inline-css` という巨大なインラインCSSが自動的に出力されるようになりました。これはテーマのグローバルスタイル（theme.json の設定など）を反映するためのものですが、不要な場合やCSSの最適化を行いたい場合には削除したいケースもあります。

この記事では、この `global-styles-inline-css` を無効化・削除する方法を解説します。

global-styles-inline-cssとは？

`global-styles-inline-css` は WordPress が自動的に挿入するインラインCSSで、ブロックエディターやテーマで定義されたスタイル（たとえばフォントや色設定など）を反映させるために使われています。

これは以下のようなHTMLとして出力されます。

<style id="global-styles-inline-css">
/* 非常に長いCSSが出力される */
</style>

スタイルを自分で管理している場合や、表示速度を意識するサイトでは、これを削除することでパフォーマンス改善につながる場合があります。

削除するためのコード

以下のコードを `functions.php` に追加することで、`global-styles-inline-css` を無効化できます。

// global-styles-inline-css を削除
remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
remove_action('wp_body_open', 'wp_global_styles_render_svg_filters');

さらに、以下のフィルターを使って完全に無効化できます。

// グローバルスタイルを無効化
add_filter('should_load_separate_core_block_assets', '__return_false');
add_filter('render_block', function ($block_content, $block) {
  remove_filter('render_block', 'wp_render_elements_support_styles', 10);
  return $block_content;
}, 9, 2);

注意点

このスタイルを削除すると、ブロックエディターで設定したスタイル（たとえばボタンの色やフォントサイズなど）が正しく反映されなくなる可能性があります。ブロックテーマを使用している場合は、CSSのカスタム設計を前提にした上級者向けの対処になります。

まとめ

WordPress で自動出力される `global-styles-inline-css` を削除するには、`functions.php` に特定のアクションフックやフィルターフックを使って無効化するのが効果的です。ただしテーマやプラグインの仕様によって影響があるため、動作確認は十分に行った上で導入してください。