Contact Form 7プラグインのCSS読み込みを停止する方法

2018/11/11(日) 2024/3/20(水) きむおば

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

WordPressでのブログ運営をしていて、お問い合わせフォーム設置に「Contact form 7」プラグインを利用している方も多いのではないでしょうか。

日本人の方が作成された世界中で使われているお問い合わせフォームプラグインですが、使用していて一つだけ気になっている点がありました。

それは、サイト内の全ページでプラグインが使うCSSファイルとJavaScriptファイルを読み込む点。

使わないファイルを読み込むなんて、ヘッダー汚れるしPageSpeedInsightsのスコアにも多少なりとも影響するし…

そんな時に使える小技「Contact Form 7プラグインのCSS読み込みを停止する方法」をご紹介します。

目次（読みたいところへジャンプ！）

コピペOK！Contact form 7のCSSファイルの読み込みを停止するコード

add_action( 'wp_enqueue_scripts', 'delete_plugin_css' );
function delete_plugin_css() {			
    wp_deregister_style( 'contact-form-7' );
}

上のコードをfunctions.phpにコピーアンドペーストで追加すると、サイト内でContact form 7プラグインが使っているCSSファイルを読み込まなくなります。

お問い合わせページのデザインも子テーマなどで自分でCSSのカスタマイズを追加しているなら、わざわざこのCSSファイルを読み込む意味がありませんよね。ムダなコードは1行でも減らしたい方は試してみてください。

お問い合わせページ以外はContact form 7のCSSファイルとJavaScriptファイルの読み込みを停止するコード

次のコードは、お問い合わせページでだけContact form 7プラグインが使用するCSSとJavaScriptファイルを読み込み、他のページは読み込まないようにするコードになります。

add_action( 'wp_enqueue_scripts', 'delete_plugin_css' );
function delete_plugin_css() {			
    if( ! is_page('contact') ){
	wp_deregister_style( 'contact-form-7' );
	wp_deregister_script( 'contact-form-7' );  	
	}    
}

このコードをfunctions.phpにコピペで追加すると、お問い合わせページ以外では、Contact form 7プラグインが使用するファイル（CSSとJavaScript）を読み込まなくなります。

コード内では、お問い合わせページのスラッグが「contact」という条件にしています。スラッグが異なる場合は、

if( ! is_page('contact') )

のcontact部分を変更してください。

使用していないファイル読み込みを停止するメリット

すごく細かいことなのですが、Contact Form 7他、プラグインの中には使わないページでも一律でプラグインが必要とするファイルを読み込ませるものが数多くあります。

使わないファイルを読み込むと、わずかながらサイトのページの読み込み速度に影響があります。

何より、ミニマリスト主婦としては、コードに使わないのが含まれているのも気持ち悪かったりします（笑。

ほんの少しでもサイトスピードを改善したい方は、試してみてくださいね。

※今回は、子テーマをどんどんカスタマイズしているある程度の知識がある方向けに記事を書きました。functions.phpファイルを間違えると、WordPressサイトが真っ白になったり503エラーになったりしますので、初心者の方はバックアップを取ること、テストサイトで試してみることなどから初めてくださいね。

Wordpress