Contact Form 7 設置ページにだけJSやCSSを読み込ませる方法（reCAPTCHA V3 対応）

Contact Form 7 を利用するとフォームを設置していないページにもJavaScriptやCSSが読み込まれます。特にreCAPTCHAを設定すると不要なページにまでreCAPTCHAのタグが表示され見た目的にも邪魔になります。

それを解消する方法をご紹介します。

1 設置ページを自動的に判別したい場合
2 設置ページを指定する場合
3 おまけ2：投稿タイプが決まっている場合

設置ページを自動的に判別したい場合

コンテンツ内にショートコードがあるかどうか自動的に判別します。どのページにフォームを設置したか気にする必要はありません。

コード

functions.phpに以下のコードを貼り付けます。

function my_wpcf7_enqueue_scripts() {
	global $post;

	if ( is_singular() && has_shortcode( $post->post_content, 'contact-form-7' ) ) {
		return;
	}

	wp_dequeue_style( 'contact-form-7' );
	wp_deregister_script( 'contact-form-7' );
	wp_deregister_script( 'google-recaptcha' );

}
add_action( 'wp_enqueue_scripts', 'my_wpcf7_enqueue_scripts', 100 );

解説

このコードは次のような流れになっています。

記事ページににContact Form 7 のショートコードがあるかどうか調べる
存在する場合は処理を抜ける。存在しない場合はwp_deregister_script()でjsやcssを読み込まなくする

has_shortcode()は投稿内に指定したショートコードが存在するか調べる関数です。ショートコードが有効な場合にのみ動作します。詳細は下記ページを参照してください。

また、条件分岐にis_singular()を入れていますが、これがないとアーカイブページの中にフォームを設置したページがある場合、スクリプトが読み込まれてしまいます。それを避けるために個別ページのみ対象とするようにしています。カスタム投稿タイプにも対応できます。

is_singular()の対象となる投稿タイプ

日本語版Codexを見るとis_singular()はpost・page・attachmentのときだけtrueを返すように書いてありますが、実際にはカスタム投稿タイプも含めたあらゆる投稿タイプの個別ページが対象です。

is_singular() | Function | WordPress Developer Resources

このページでは “Determines whether the query is for an existing single post of any post type (post, attachment, page, custom post types).” と書いてあります。

add_action()の3番目の引数はデフォルト（10）だと効きません。この記事を書いた時点（2022年1月20日）では100にすると大丈夫ですが今後仕様が変わるとこの数字も変更する必要が出てくるかもしれません。

気になる点

この方法は設置したページを意識することなく使えるので管理が楽ですが、一つ気になる点があります。それはhas_shortcode（）は処理が重そうとういことです。

この関数内ではpreg_match_all()を使って投稿内の全てのショートコードを抜き出し、そのあとforeachで指定したショートコードと一致するかどうかを調べています。長文の記事やショートコードが沢山ある記事では負荷が高くなりそうです。

負荷が高くなるといっても体感できるほど影響が出ることはないと思います。しかしほとんどのサイトはフォームを設置するページは1ページだけでしょうから、設置しない大多数のページで不要な処理をするのは何となく気持ちが悪いです。

そう考えると記事IDやスラッグを指定して個別で処理をする方がベターな気もします。

設置ページを指定する場合

ということで、設置したページを個別に指定するようにしたものがこちら。

設置するページが１つだけの場合

function my_wpcf7_enqueue_scripts() {
	global $post;

	$has_cf7_post = 156; // フォームを設置したページのIDを指定。この例ではid=156の投稿に設置したという設定

	if ( is_singular() && $post->ID == $has_cf7_post ) {
		return;
	}

	wp_dequeue_style( 'contact-form-7' );
	wp_deregister_script( 'contact-form-7' );
	wp_deregister_script( 'google-recaptcha' );

}
add_action( 'wp_enqueue_scripts', 'my_wpcf7_enqueue_scripts', 100 );

複数ページに対応する場合

設置したページのIDを配列として用意することで複数のページに対応しています。

function my_wpcf7_enqueue_scripts() {
	global $post;

	$has_cf7_posts = [156, 257, 259]; // フォームを設置したページのIDを配列にする

	if ( is_singular() && false !== array_search( $post->ID, $has_cf7_posts ) ) {
		return;
	}

	wp_dequeue_style( 'contact-form-7' );
	wp_deregister_script( 'contact-form-7' );
	wp_deregister_script( 'google-recaptcha' );

}
add_action( 'wp_enqueue_scripts', 'my_wpcf7_enqueue_scripts', 100 );

解説

このプログラムは次のような流れになっています。

現在の投稿のIDをフォームを設置したページのIDを比較
一致する場合は処理を抜ける。一致する場合はwp_deregister_script()を使ってjsやcssを読み込まない

1記事だけの場合は単純に比較、複数ページの場合はarray_search()を使って配列の中に該当するIDがあるか調べています。

array_search()は一致するものがないとfalseを返し、一致するものがあるとそのインデックスを返します。そのため、一番最初の要素が一致した場合は0が返ってきます。ですのでif( ! array_search( $post->ID, $has_cf7_posts ) ){....のような書き方をしてしまうと正常に動かないので注意してください。型も含め厳密に判定する必要があります。

おまけ：スラッグで指定したい場合

「ID調べるの面倒くさい、スラッグの方がいいよ〜」という場合があるかどうかわかりませんが、その場合はif文を次のように書き換えればOKです。


	$has_cf7_posts = 'hogehoge'; // フォームを設置したページのスラッグ

	if ( is_singular() && $post->post_name == $has_cf7_post ) {
			return;
	}

複数の場合はこんな感じ。


	$has_cf7_posts = ['hogehoge', 'contact']; // フォームを設置したページのスラッグの配列

	if ( is_singular() && false !== array_search( $post->post_name, $has_cf7_posts ) ) {
			return;
	}

おまけ2：投稿タイプが決まっている場合

ここまでのコードは汎用性を意識して条件分岐にsingular()を使いましたが、例えば「固定ページにしか設置しない」と決めているならif( is_page( id or slug ) )で条件分岐するのが一番シンプルです。


function my_wpcf7_enqueue_scripts() {

	if ( is_page( 125 ) ) {
	// スラッグをつ書いた場合は引数にスラッグを指定
	// if ( is_page( 'slug' ) ) {
		return;
	}

	wp_dequeue_style( 'contact-form-7' );
	wp_deregister_script( 'contact-form-7' );
	wp_deregister_script( 'google-recaptcha' );

}
add_action( 'wp_enqueue_scripts', 'my_wpcf7_enqueue_scripts', 100 );

複数ある場合は配列で指定します。


function my_wpcf7_enqueue_scripts() {

	if ( is_page( [125, 213, 111] ) ) {
	// スラッグをつ書いた場合は引数にスラッグを指定
	// if ( is_page( ['slug', 'slug2' ] ) ) {
		return;
	}

	wp_dequeue_style( 'contact-form-7' );
	wp_deregister_script( 'contact-form-7' );
	wp_deregister_script( 'google-recaptcha' );

}
add_action( 'wp_enqueue_scripts', 'my_wpcf7_enqueue_scripts', 100 );

投稿に設置する場合はis_single()を使いましょう。

幾つものパターンを挙げましたが、クライアントが自由に編集できるサイトや汎用テーマを作る場合以外は、一番最後の設置したページを指定がいいんじゃないかと思います。

参考サイト

【WordPress】WordPressやプラグインの更新後にrecaptchaの表示制限などをしているプログラムが効かなくなった際の対処方法 | Kansuke program note

Contact Form 7でreCAPTCHA v3のロゴを非表示にする方法 | Fantastech（ファンタステック）

Google reCAPTCHA V3 を任意ページのみに表示する方法 | みらいクリエイターズ

ContactForm7のキャプチャをお問い合わせページだけに表示 | ワードプレスドクター

has_shortcode() | Function | WordPress Developer Resources