reCAPTCHA v3を、WordPressのお問い合わせに導入する方法
って疑問を、３ステップで解説します。
WordPress にはもともと、「Akismet Anti-Spam (アンチスパム)」というプラグインが、お問い合わせフォームを保護してくれています。
しかし今回紹介する「reCAPTCHA v3」を導入することで、さらに強力に保護することができるようになるんです。
というわけで今回は、reCAPTCHA v3をWordPressのお問い合わせフォームに導入する方法を、３ステップで解説します。
目次
reCAPTCHA v3 を、WordPressに導入する方法【３ステップ】
それでは、WordPress の お問い合わせフォームに、reCAPTCHA v3 を導入する方法を解説します。
「Contact Form 7」でお問い合わせページを設置していることを、前提としています。
それでは、さっそくはじめていきましょう。
【ステップ１】reCAPTCHAでアカウント登録する
ステップ１では、reCAPTCHAでアカウント登録するところからはじめます。
まずは Google の、reCAPTCHA: Easy on Humans, Hard on Bots（https://www.google.com/recaptcha/intro/v3.html） にアクセスしてください。
画面右上の Admin console をクリックしてください。
画像：reCAPTCHA操作画面のキャプチャあらかじめ Google アカウントを取得していれば、reCAPTCHA v3 で「新しいサイトを登録する」画面にきりかわります。
- ラベル：分かりやすい名前をつける
- reCAPTCHA タイプ：reCAPTCHA v3にチェックをいれる
- ドメイン：https:// をぬいたあなたのサイト URL
- オーナー：何もいじる必要なし
- reCAPTCHA 利用条件に同意する：チェックをいれる
- アラートをオーナーに送信する：チェックをいれる
わたしは、こんな感じの設定にしました。それでは、送信 をクリックしてください。
画像：reCAPTCHA操作画面のキャプチャ
「登録されました。」の画面がでてきました。
ちなみに「２つのキー」は、メモ帳などにコピーして、貼り付けておいてください。ステップ３で、「サイトキー」「シークレットキー」が必要になります。
ここまでできたら、ステップ１は終了です。
【ステップ２】WordPressプラグインをインストールする
画像：WordPressプラグインを追加画面のキャプチャ
ステップ２では、Wordpress プラグイン「Invisible reCaptcha for WordPress」をインストールします。
reCAPTCHA を WordPress に導入する方法は、プラグインがいちばん簡単だと思います。下記のリンクボタンもしくは、WordPress のダッシュボード画面のプラグインから、「Invisible reCaptcha for WordPress」をインストールしてください。
ここまでで、ステップ２は終了です。
【ステップ３】お問い合わせフォームにreCAPTCHA v3 を設置する
さいごのステップ３では、お問い合わせフォームに reCAPTCHA v3 を設置していきます。
WordPress のダッシュボードで、設定 の Invisible reCaptcha をクリックしてください。
画像：「Invisible reCaptcha for WordPress」操作画面のキャプチャ
Settings をクリックして、下記のように設定します↓
- Your Site Key：サイトキーを入力
- Your Secret Key；「シークレットキーを入力」
- Language：いじる必要なし
- Badge Position：Inline
- Badge Custom CSS：いじる必要なし
ここで先ほどメモした２つの「キー」が、必要になります。
設定がおわったら、変更を保存をクリックしてください。
つづけて、WordPress のサイドバー お問い合わせ をクリックして、Contact Forms 7 を開いてください。
お問い合わせの インテグレーション をクリックします。
インテグレーションのセットアップ をクリック。
セットアップ画面で、「サイトキー」「シークレットキー」を入力して、設定を保存してください。
という話感じで、お疲れ様でした！
ここまでの作業であなたの WordPress に「reCAPTCHA v3」が導入されているはずです。
こんな感じで、お問い合わせフォームに追加されていれば OK です。
これで、reCAPTCHA v3 を、WordPress のお問い合わせフォームに導入する方法の解説はおわりです。
チェックが入っていると、送信できない現象が...
なぜか Enable Protection for Contact Form 7 にチェックが入っていると、送信できない現象が発生しました。
チェックを外せば、送信できるようになりました。
Contact Form 7 場で、セットアップしているので「reCAPTCHA」は実行されているはずです。
原因については、今後も検証していきます。
reCAPTCHAバッジが、スマホで常に表示されてしまう
こんな感じでreCAPTCHA を導入すると、常にスマホに reCAPTCHA バッジが表示されるようになってしまいます。保護されていることが一目でわかるので安心感がありますね。
ただデザインによってはスマホのトップへ戻るボタンなどとかぶり、ユーザー体験を損なう可能性があります。このバッジを非表示にする方法が、公式にありますので紹介します↓
reCAPTCHA バッジを非表示にする方法
reCAPTCHA バッジを非表示にするコード
.grecaptcha-badge { visibility: hidden; }を非表示にするには、上記コードを CSS に追加してください。
このコードは、よくある質問| reCAPTCHA | Google Developers にのっている公式の方法になります。
ただし、バッジを非表示にするためには条件があるんです↓
非表示にするための条件
バッジを非表示にするために必要なコード
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 のバッジを非表示にするためのコードを、お問い合わせフォームのユーザーが見える場所に書くようにしてください。
こちらも、「よくある質問| reCAPTCHA | Google Developers」に掲載されていますので、ご確認ください。
ちなみに、当ブログでの導入場所について、参考例を掲載させていただきます↓
非表示の参考例
当ブログの問い合わせページの 送信 ボタンの下に、バッジを非表示にするためのコードをつけてみました。送信まえにみえるところなので、ここがベストかもしれません。
Contact Form 7の場合は、フォームの編集画面にて [submit "送信"] の下にバッジを非表示するために必要なコードを貼り付けました。
クラス名や、文言の CSS などは、つづけて紹介させていただく「参考にさせていただいた記事」を、ごらんください↓
参考にさせていただいた記事
参考記事１：【Google公認】reCAPTCHA v3のバッジ（ロゴ）をコピペで簡単に非表示
参考記事１では、バッジを消す方法について参照させていただきました。くわしいCSS表記などは、参考記事をごらんください。
参考記事２：スパム対策のreCAPTCHA v3をWordPressに導入するならプラグインが簡単で便利
参考記事２では、reCAPTCHA v3 の導入方法について、参考にさせていただきました。適用させるフォームの選択設定で、問い合わせのみ reCAPTCHA v3 対応する場合とは違っていたため、今回記事を書かせていただきました。
reCAPTCHA v3 を導入するにあたって、とても助かりましたので、ぜひこちらの記事もあわせてご覧いただけましたら幸いです。
まとめ
reCAPTCHA V3 を、WordPress のお問い合わせフォームに導入する方法を、解説しました。
bot(ボット)による入力フォームのスパム防止対策として、効果がたかそうなので私もいれてみました。
いやぁ〜実際にいれてみると、思っていた以上に動作がサクサク動きますし、簡単に導入できたのでおどろいております。笑
さてさて。この記事が、reCAPTCHA V3 導入が、ちょっと分かりづらいかも？なんて思っているかたを、救えたらうれしいです。
また reCAPTCHA も常にバージョンアップしているため、掲載している内容が記事掲載時のもので古くなっている可能性もあります。導入の際には、ヘルプなど各自で確認するようにしてください。
そのほか、ブログツールに関する記事は、こちらもあわせてごらんください↓
