ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
ウェブサイトを運営していると、スパムやボットによる迷惑な攻撃を受けることがあります。これを防ぐために多くの人が使っているのがGoogle reCAPTCHAです。
WordPressを使っているなら、reCAPTCHAを簡単にサイトに追加することができます。
この記事では、WordPressにGoogle reCAPTCHAを導入する方法を分かりやすく説明します。また、ロゴマークを非表示にする方法もご紹介します。
サイトの安全性を高めながら、見た目もスッキリさせましょう。
Google reCAPTCHAとは？
Google reCAPTCHA（リキャプチャ）は、ウェブサイトをスパムや悪意のある自動化されたアクセスから保護するためのセキュリティサービスです。
reCAPTCHAは、ユーザーが人間であることを証明するためのテストを提供し、スパムなどの不正行為を防ぎます。
- スパムや不正アクセスを防ぎ、ウェブサイトを保護する
- サイトが安全であることを示し、信頼性を向上させる
バージョンによる違い
Google reCAPTCHAは、バージョンによって違いがあります。
- reCAPTCHA v2……「私はロボットではありません（I’m not a robot）」というチェックボックスをクリックさせることで人間とボットを区別します。さらに、ユーザーに対して画像選択やパズルを解くよう求める場合もあります。
- reCAPTCHA v3……ユーザーに対して明示的な行動を求めず、ユーザーの行動をスコアリングして判断します。
こだわりがなければ、reCAPTCHA v3 （最新版）を使用するのがおすすめです。
Google reCAPTCHAの設置方法
Google reCAPTCHAのサイトにアクセスします。
- Googleアカウントを所持していない場合はアカウントから作成します。
- Googleアカウントを所持している場合、「reCAPTCHA を使ってみる」のページで→【開始】をクリックします。
右上にある「+（作成）」ボタンをクリックします。
以下の項目を入力・チェックして【送信】をクリックします。
- ラベルに「サイト名」
- reCAPTCHAタイプを選択（最新版がおすすめ）
- ドメインに「サイトドメイン」を入力
続いて右上の「設定」ボタンをクリックします。
reCAPTCHAのキーが表示されるので、使用するプラグインなどに貼りつけます。
Contact Form 7にサイトキーとシークレットキーを貼りつける
Contact Form 7にサイトキーとシークレットキーを貼りつける場所を紹介します。
contact form 7については「【WordPress】お問い合わせフォームをcontact form 7で作る方法」でまとめています。
【お問い合わせ】→【インテグレーション】を選択します。
reCAPTCHAの【インテグレーションのセットアップ】をクリックします。
「お問い合わせ」が左のメニューにないよ～
「お問い合わせ」はContact Form 7のプラグインを有効化したら出てくるよ！
サイトキーとシークレットキーを入力する部分があるので入力します。
「reCAPTCHAはこのサイト上で有効化されています」と表示が出たらOKです。
Google reCAPTCHAのロゴマーク（バッジ）を消す方法
これでGoogle reCAPTCHAは有効化されました。
そのかわり、Google reCAPTCHAのロゴマーク（バッジ）が全ページに表示されるようになります。
なんか気になるな～。
消す方法はないの？
Google reCAPTCHAのロゴマーク（バッジ）を消す方法は、公式サイトの「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.
文章を追加しただけなので、ロゴマーク（バッジ）はまだ消えていません。
続いて、ロゴマーク（バッジ）を非表示にするCSSを追加します。
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。
CSSを追加して【公開】をクリックします。
/*Google reCAPTCHAのロゴマークを非表示*/
.grecaptcha-badge { visibility: hidden; }
ロゴマークが非表示になったよ！
