WordPress初心者必見！Twenty Twenty-OneテーマでのインラインCSS削除方法完全ガイド｜DAD UNION

WordPressインストール時のデフォルトテーマ「Twenty Twenty-One」ですが、このテーマを若干CSS等を調整して利用しようとした際、インラインCSSが邪魔をして調整内容がページに反映されませんでした。

今回はWordPressの「Twenty Twenty-One」テーマで出力されるインラインCSSを削除する方法をご紹介します。

Contents

「Twenty Twenty-One」テーマとは？
CSSの変更が反映されない理由
インラインCSSを削除する方法
まとめ

「Twenty Twenty-One」テーマとは？

WordPressでブログやウェブサイトを作成する際、最初に出会うのが「Twenty Twenty-One」テーマです。このテーマはシンプルで使いやすく、多くのウェブサイトで採用されています。しかし、カスタマイズをしようとすると、時には思い通りにいかないことがあります。特に、CSSの変更が反映されないという問題に直面することがあります。

CSSの変更が反映されない理由

この問題の主な原因は、サイトのページにデフォルトで出力されるインラインCSSです。
以下のようなスタイルがページに埋め込まれているため、自分で記述したCSSが上書きされず、期待した通りのデザイン変更ができません。

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

　
なので、この記述を削除する必要があります。

インラインCSSを削除する方法

解決策は、このインラインCSSを削除することです。テーマのfunctions.phpファイルに以下のコードを追加することで、インラインCSSを削除できます。

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

　
このコードは、WordPressがスタイルシートを読み込む際の動作をカスタマイズします。重要なのは、’twenty-twenty-one-style’という識別子を正確に記述することです。これが間違っていると、インラインCSSは削除されません。