Google reCAPTCHA V3 をお問い合わせ以外で非表示にする方法【2021年修正版】

2019年03月23日 更新:2021年03月02日 WordPress / プラグイン

Google reCAPTCHA (v3) をお問い合わせページのみで読み込む方法

Googleが提供する「reCAPTCHA (v3)」を Contact Form 7 に設定すると、全ページに【reCAPTCHAで保護されています】のロゴ(バッジ)右下に表示されます。

その結果、「トップへ戻る」ボタンと「reCAPTCHA」のロゴが重なってしまう場合があります。しかも、全ページにJSファイルが読み込まれてしまうので、ページの表示速度が遅くなるという問題が発生します。

今回はその対策として、お問い合わせフォームが設置されているページにだけ「reCAPTCHA (v3)」を読み込ませる方法と、「トップへ戻る」ボタンがロゴが重ならないようにする対策を説明します。

まず最初に、お問い合わせフォームが設置されているページのみ「reCAPTCHA」を読み込ませます。お問い合わせページのスラッグが例えば「contact」の場合、functions.php に下記のように記載します。

// お問い合わせページを除き、「reCAPTCHA」を読み込ませない

function load_recaptcha_js() {
 if ( ! is_page( 'contact' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

これで必要なページだけにJSファイルが読み込まれるようになりました。フォームが設置されているお問い合わせページ以外は「reCAPTCHA」のロゴが消えたはずです。

【2021年追記】フックの優先度を「100」にします。初期値(10)のままだと機能しないのでご注意ください。

「トップへ戻る」ボタンを設置している場合、このボタンが右下に表示されることが多く、「reCAPTCHA」のロゴと重なってしまうことがよくあります。

この場合、一番スマートな解決方法は、お問い合わせページに「トップへ戻る」ボタンを読み込ませないことですが、ここではより簡単な「トップへ戻る」ボタンの要素にCSSで「display:none;」を指定して非表示にする方法をオススメします。

これとは逆に「reCAPTCHA」のロゴをCSSで非表示する方法は避けてください。「reCAPTCHA」の利用規約を見ると下記の記述があるため、Googleからペナルティを受けないように注意しましょう。

本サービスに伴って表示されるいかなる法的通知も、削除したり、隠したり、改ざんしてはなりません。

いかがでしたか?送信フォームを設置したページのみに「reCAPTCHA」を表示できたでしょうか?

ちなみに、WordPressのプラグインを使っても同じようなことができます。「Invisible reCaptcha for WordPress」というプラグインを使えば、ロゴの表示位置を右下から左下へ簡単に移動でき、「Contact Form 7」や「WooCommerce」にも対応しています。

ただし、プラグインの仕様は、Googleの利用規約に抵触しないか少し気になりますので、あくまで自己責任のうえご利用ください。