Contact Form 7でGoogle reCAPTCHA v3を導入する方法

Contact Form 7でGoogle reCAPTCHA v3を導入する方法
この記事は約5分で読めます。
当サイトはアフィリエイト広告を利用しています。

Contact Form 7でフォームを設置したけど、スパムが送られて来るにゃ。腹立つにゃ!

フォームのスパム対策にはGoogle reCAPTCHA 認証だにゃ。完全にスパムを防ぐわけではないけど、無料で利用できるし、セキュリティ的にも絶対導入した方がいいにゃ。

フォームからスパムメール・迷惑メールが送られてくることがよくあります。放置しておくのは危険なので、スパム対策のためにGoogleのreCAPTCHA認証を導入しましょう。reCAPTCHA認証はスパム対策に広く利用されているツールです。

reCAPTCHA認証にはいくつかバージョンがあり、v2ではロボットではないことを確認するため、ユーザーにチェックボックスのチェックを入れさせたり、画像認証をさせていました。

今回導入するv3はAIがユーザーの行動に基づいてスコア算出して人間かどうかを判断するので、チェックや画像認証などの手間が不要になりました。

Google reCAPTCHA v3の導入手順

本記事はフォームの作成にContact Form 7を使用している前提となっています。Contact Form 7でのフォーム作成手順は下記の記事を参考にして下さい。

Google reCAPTCHA にサイトを登録する

GoogleのreCAPTCHA認証を利用するにはGoogleアカウントが必要になります。Googleアカウントにログインした状態で次の手順に進んでください。

Google reCAPTCHAにアクセスして、 「v3 Admin Console」をクリックします。

下記を参考にラベル・reCAPTCHAタイプ・ドメインを入力し、「送信」をクリックします。

ラベル
管理しやすいよう、サイト名などの任意の名称を入力しておきます。
reCAPTCHAタイプ
デフォルトのまま、スコアベース(v3)にチェックを入れておきます。
ドメイン
reCAPTCHA認証を設定するドメインを入力します。

送信したらサイトキーとシークレットキーが表示されます。

キーはこの後使用するので、ページは閉じずにおいておいてください。

Contact Form 7でインテグレーションをセットアップ

WordPressの管理画面から「お問い合わせ」→「インテグレーション」と進みます。「reCAPTCHA」項目の「インテグレーションのセットアップ」をクリックしてください。

先ほど発行されたサイトキーとシークレットキーをコピペして「変更を保存」をクリックします。

「reCAPTCHAはこのサイト上で有効化されています」となっていたら完了です。

Google reCAPTCHAを導入するとサイト右下に画像のようなバッジが表示されるようになります。表示されているか確認しておきましょう。

特定のページ以外はreCAPTCHAを読み込みたくない場合

Google reCAPTCHAを導入すると全てのページでreCAPTCHAのスクリプトを読み込むようになるので、サイトの表示速度が遅くなってしまうデメリットがあります。

表示速度を改善するため、お問い合わせページでのみreCAPTCHAを読み込ませたい場合はfunctions.phpにコードを追加する必要があります。

コードは親テーマではなく子テーマのfunctions.phpに追加してください。親テーマに記述するとテーマの更新があった際に消えてしまいます。また、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 );

contactの部分はご自身のサイトのお問い合わせページのスラッグ名を入力してください。

複数のページで読み込ませたい場合は下記のコードを使用してください。

//指定したページ以外reCAPTCHAを読み込まない
function load_recaptcha_js() { 
if ( ! is_page( array('スラッグ01','スラッグ02','スラッグ03') ) ) { 
wp_deregister_script( 'google-recaptcha' ); 
} 
} 
add_action( 'wp_enqueue_scripts','load_recaptcha_js',100 );

スラッグをカンマで区切って複数指定しています。スラッグ01、スラッグ02、スラッグ03にreCAPTCHAを読み込みたいページのスラッグを入れてください。

指定したページにのみreCAPTCHAバッジが表示されていれば完了です。

reCAPTCHAバッジを非表示にしたい場合

reCAPTCHAバッジはCSSで非表示にもできます。非表示にしたい時は下記を追加して下さい。

/*Google reCAPTCHAのバッジを非表示にする*/
.grecaptcha-badge{ visibility: hidden; }

バッジを非表示にした場合は、reCAPTCHA認証を使っていることを明示するための文言をサイトのどこかに入れる必要があります。下記の文言をコピペして、問い合わせフォームの下かフッターあたりに追加してください。

This site is protected by reCAPTCHA and the Google 
<a href="https://policies.google.com/privacy">Privacy Policy</a> and 
<a href="https://policies.google.com/terms">Terms of Service</a> apply.

日本語で表示したい場合はこちら。

このサイトはreCAPTCHAによって保護されており、Googleの
<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と
<a href="https://policies.google.com/terms">利用規約</a>が適用されます。

まとめ

スパムを放置しておくとサイト評価が下がる可能性もあるため、無料で簡単に導入できるGoogle reCAPTCHAを利用してスパム対策を取っておきましょう!

タイトルとURLをコピーしました