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

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

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

Pocket

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' );

念のためフォームを設置しているページが複数ある場合の書き方も追記します。スラッグが「contact」と「opinion」の場合の書き方です。

// お問い合わせ(contact)・ご意見(opinion)ページを除き、「reCAPTCHA」を読み込ませない

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

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

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

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

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

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

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

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

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

Pocket