コンテンツへスキップ

Contact Form7とreCAPTCHAを限定的に読み込む方法

コンタクトフォーム７＆レキャプチャ

メールフォーム設置には欠かせないプラグイン「Contact Form 7」、そしてスパム対策には欠かせないプラグイン「reCAPTCHA」。ワンセットでサイトに組み込んでいる方も多いはずです。しかし、こんな事実があることをご存じでしょうか？

Contact Form7のロード範囲

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

デフォルトの設定では、Contact Form 7 はその JavaScript と CSS スタイルシートをすべてのページにロードします。きっと、こんな無駄の多いやり方をやめて、コンタクトフォームを含むページにだけロードすればいいのに、と考えていることでしょう。その気持ちはよくわかりますが、技術的な困難があって、ページをロードする時点でそのページがコンタクトフォームを含んでいるかどうかを判断することがプラグインにとって難しいのです。

https://contactform7.com/ja/loading-javascript-and-stylesheet-only-when-it-is-necessary/

さすがです。ご提供元のサイトに、はっきりとそう謳われているのです。加えて、上記リンクから閲覧できるページには、一旦すべてのページへのJavaScript、CSSのロードをストップさせ、フォームを設置しているページにのみロードする二段構えの堅実な方法が丁寧に記載されています。

functions.phpを使ったやり方

一旦、総てのページへのロードをストップさせ、該当ページにのみロードするのであれば、functions.phpへの追記でも実現可能なはずです。今後のことも視野に入れ、私の場合はその方法で対処しました。

該当ファイル

  1. id:contact-form-7-css
    link:http://………./wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.7.1
  2. id:contact-form-7-js
    link:http://………./wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.7.1

該当ファイルのロード停止

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

限定ページのみロード

function cf7_enqueue_scripts_and_styles(){
 if ( is_page(array( 'toi-it-training','toi-careerconsulting','toi-etc','toi-product-support' ) ) ) {
     if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
         wpcf7_enqueue_scripts();
     }
     if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
         wpcf7_enqueue_styles();
     }
 }
}
add_action( 'wp_enqueue_scripts', 'cf7_enqueue_scripts_and_styles');

上述の方法で、contact form7を読み込んでいる4つのページのみ、JavaScriptとCSSが読み込まれるようになりました。

reCAPTCHAの
ロード範囲

レキャプチャ

スパム対策として活用する方も多い「reCAPTCHA」。導入した方であればご存じのとおり、全ページ右下にロゴが表示されてしまいます。この場合も、CSS、JavaScript共に、フォーム設置ページにのみロードさせます。

functions.phpを使ったやり方

ネット上には、表示を消すためCSSで対処する方法がアップされていたりしますが、問題はJavaScriptです。また、表記を消すこと自体も???です。それで、私の場合はfunctions.phpにて以下の方法で対処しました。

該当ページのslug

  1. ‘toi-etc’
  2. ‘toi-it-training’
  3. ‘toi-careerconsulting’
  4. ‘toi-product-support’
add_action('wp_enqueue_scripts', function() {
	
	$page_list = [
	'toi-etc', 
	'toi-it-training',
	'toi-careerconsulting', 
	'toi-product-support', 
	];
	if(is_page($page_list)) return;
	wp_deregister_script('google-recaptcha');
}, 100);

以上の追記によって、フォームを設置している4つのページにのみreCAPTCHAがロードされるようになりました。因みにadd_actionの第3引数’100’という数字ですが、読み込み・除去の処理優先度を上げ下げするものです。（数字が大きくなればその分優先度は下がります。）

施策後の状況

総てのページ読み込まれていたCSS・JavaScriptが、必要とするページにのみ読み込まれるようになるのは、スピードアップにも効果大です。function.phpは今回も快適なサイトのご提供に一役買ってくれました。

お願い：この投稿は備忘録として作成されたもので、コード等の記述は当サイトのためのものですので、コピー等はお控えいただいた方が賢明です。ご参考の折は、諸先輩方のサイト情報と比較考量の上、自己責任にてご活用ください。

to page top