Contact Form 7の読み込みをお問い合わせページのみに制限する方法

はじめに

Contact Form 7は、WordPressでのお問い合わせフォーム作成に便利なプラグインですが、全ページでJavaScriptとCSSを読み込むため、動作が重くなってしまいます。

この記事では、Contact Form 7のJavaScriptとCSSの読み込みをお問い合わせページのみに制限する方法を紹介します。

必要なページでのみJavaScriptとCSSを読み込むようにカスタマイズすることで、WordPressの高速化にも大きく貢献してくれます。

コンタクトフォームの読み込みを制限する

WordPressのfunction.phpに以下のコードを設置してください。
管理画面から、外観→テーマエディター→テーマファイルで編集できます。

//コンタクトフォーム読み込み制限 
function cf7_limitation() {
    add_filter( 'wpcf7_load_js', '__return_false' );
    add_filter( 'wpcf7_load_css', '__return_false' );
    if( is_page( 'contact' ) ){
        if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
            wpcf7_enqueue_scripts();
        }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
    }
}
add_action( 'template_redirect', 'cf7_limitation' );

全てのページでContact Form 7のJavaScriptとCSSの読み込みを無効にした上で、

Contact Form 7を設置したページのみ、
wpcf7_enqueue_scripts();の部分でJavascriptを
wpcf7_enqueue_styles();の部分でCSSを読み込むようにしています。

is_page( 'contact' )の部分は、Contact Form 7を設置したページのパーマリンクに合わせて変更してください。
上記コードは、https://hogehoge.com/contact/に設置した場合です。

参考ページ

必要な場合だけ JavaScript とスタイルシートをロードさせるには