【WordPress】親テーマなど使わないスタイルシートを無効化(削除)する方法

【WordPress】親テーマなど使わないスタイルシートを無効化(削除)する方法 WordPress

こんにちは、mickです。

WordPressで既存のテーマを子テーマ化して自分でカスタマイズすること、親テーマとなった既存のテーマで使っている機能が不要になることがあります。

でも、親テーマを直接変更するわけにはいかない…

なぜなら、親テーマのアップデートがきたらまた同じ変更をしないといけなくなるから。
それに、不具合を起こすと原因を探すのが難しくなります。

そこで、子テーマのfunctions.phpを変更するだけ親テーマなどで使わないスタイルを無効化(削除)する方法を紹介します。
この方法は、プラグインで使われている不要なスタイルシートも無効化できます。

wp_dequeue_style関数を使う

wp_dequeue_styleを使うと、スタイルシートを使うためにwp_enqueue_style()でエンキューされたCSSファイルを削除することができます。

これを使うとfunctions.phpに記述する内容は次のように書くことができます。

function denqueue_parent_scripts() {
    $remove_styles = array( 'スタイルシートのID1', 'スタイルシートのID2' );

    foreach( $remove_styles as $target ) {
        if( wp_style_is($target) ) { // スタイルシートが登録済みかチェック
            wp_dequeue_style($target); // スタイルシートを削除する
        }
    }
}
// 最後の方で動いてほしいので、プライオリティをさげた11にしてある
add_action( 'wp_enqueue_scripts', 'denqueue_parent_scripts', 11 );

functions.phpを直接記述するより、プラグインを使うと安全に編集ができるのでオススメです。

スタイルシートのIDの探し方

Webのソースコードをみたとき、スタイルシートの読み込み時に記述がある「id」の「xxx-css」の「xxx」の部分が該当します。

<link rel='stylesheet' id='xxx-css'  href='https://example.com/wp-content/themes/novellite/css/animate.css?ver=5.6.2' type='text/css' media='all' />

まとめ。

親テーマなど使わないスタイルシートを無効化(削除)する方法を紹介しました。

不要なスタイルシートの読み込みは、Webサイトの高速化の妨げになります。
PageSpeed Insightsのスコアも下がってしまいます。

不要なスタイルシートの無効化、オススメです。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/03/05