お問い合わせフォームを簡単に設置することができるContact Form 7。非常に便利なプラグインですね。
Contact Form 7をインストールすると、すべてのページでContact Form 7用のJavaScriptとCSSが読み込まれるようになります。プラグインの挙動としては致し方ない部分ではあるのですが、フォームを設置していないページでは必要ない読み込みが発生してしまいます。それによってページの表示速度にも影響しますね。
そこで今回は、必要なページでのみContact Form 7のJavaScriptとCSSを読み込むようにする方法をご紹介したいと思います。
Contact Form 7のJavaScriptとCSSを必要なページでのみ読み込む方法
適用しているテーマのfunctions.phpに以下を追加します。
//Contact Form 7のJavaScriptとCSSの読み込みを停止
function wpcf7_js_css_disable() {
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
}
add_action( 'after_setup_theme', 'wpcf7_js_css_disable' );
//特定の固定ページでのみJavaScriptとCSSを読み込む
function wpcf7_js_css_enable() {
if( is_page('contact') ) { //ページの指定
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
add_action( 'wp_enqueue_scripts', 'wpcf7_js_css_enable' );「is_page( ‘contact’ )」の部分で、JavaScriptとCSSを読み込むページを指定しているので、自サイトに合わせてスラッグを変更してください。
Google reCAPTCHAも含めて必要なページでのみ読み込みたい場合
Contact Form 7のJavaScriptとCSSに加えて、Google reCAPTCHAも必要なページでのみ読み込むようにする方法が、Nishiki Proのサポトピアで紹介されていました。
// 特定のページ以外 Contact Form 7 の reCAPTCHA と CSS/JSを読み込まない
if( ! function_exists( 'nishiki_pro_custom_contact_form_7' ) ){
function nishiki_pro_custom_contact_form_7() {
// reCAPTCHA や Contact Form 7 を読み込むページのスラッグを入れる
$exclude_page = array(
'contact',
'about',
);
// 特定のページ以外で読み込まないよう条件分岐する
if ( ! is_page( $exclude_page ) ) {
wp_deregister_style( 'contact-form-7' ); // CSS を読み込まない
wp_deregister_script( 'contact-form-7' ); // JS を読み込まない
wp_deregister_script( 'google-recaptcha' ); // Google reCAPTCHA を読み込まない
}
}
// フックする
add_action( 'wp_enqueue_scripts', 'nishiki_pro_custom_contact_form_7', 100 );
}こちらの方がコードもスッキリしていてわかりやすいですね。
「nishiki_pro_custom_contact_form_7」という関数名は任意の名前に変更してOKです。
あとがき
Contact Form 7のデフォルトの機能に追加してくれたらうれしいんですけどね(^^)
少しでも負荷を抑えてサイトの読み込み速度を向上させたい場合は、ぜひお試しください。