WordPressのTwenty Twenty-Oneテーマで出力されるインラインCSSを削除する方法｜DAD UNION

WordPressインストール時のデフォルトテーマ「Twenty Twenty-One」ですが、このテーマを若干CSS等を調整して利用しようとした際にCSSが効かなかったりしました。今回はWordPressのTwenty Twenty-Oneテーマで出力されるインラインCSSを削除する方法をご紹介します。

CSSの変更が効かない原因

サイトのページににデフォルトで出力されるstyle

<style id='twenty-twenty-one-style-inline-css'>
body,input～
</style>

　
が効いてることが原因でした。なのでこれを削除する必要があります。

functions.phpにインラインcssを削除

デフォルトでテーマtwentytwentyoneフォルダ内のfunctions.phpファイルに以下を追記するとインラインが削除されました。

/*htmlページに追加されるinline cssを非表示*/
add_action( 'wp_enqueue_scripts', function() {
    $styles = wp_styles();
    $styles->add_data( 'twenty-twenty-one-style', 'after', array() );
}, 20 );

　
上記の「twenty-twenty-one-style」の記述が違うと削除されないので間違えない様に気を付けてください。

※流用される場合は自己責任でお願いします。