LoginSignup
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-19

はじめに

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

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

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

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

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

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 とスタイルシートをロードさせるには

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3