はじめに
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/に設置した場合です。