ブログを運営していて厄介なのが、スパムメールなのではないでしょうか?
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ9(丸)-150x150.png)
ちゃんとプラグインで対策してるのに、なんで?!
と、そのメールの多さにウンザリしてしまいますよね。
そこで本記事では、WordPress用プラグインであるContact Form 7を利用して、reCAPTCHAを導入する方法をご紹介していきます。
海外から英語で送られてくるスパムメールにも有効ですよ!
reCAPTCHAとは?
![reCAPTCHAとは](https://ym-life.com/wp-content/uploads/2021/08/cea27f69f8aca819f00575c8f9bc56df.jpg)
![reCAPTCHAとは](https://ym-life.com/wp-content/uploads/2021/08/cea27f69f8aca819f00575c8f9bc56df.jpg)
reCAPTCHAは、スパムメールなど外部の不正攻撃からウェブサイトを守るGoogleのサービスです。
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
無料で使用することができますよ。
reCAPTCHAにはいくつかバージョンがありますが、今回はreCAPTCHAv3というユーザーの目につかないバックグラウンドでスパム判定をし、サイトを保護する仕組みを利用します。
「私はロボットではありません」といったチェックを入れる必要がないため、ユーザビリティを損ねることもありません。
reCAPTCHAを導入する手順
reCAPTCHAの導入は、2つの手順に分かれます。
- reCAPTCHAに登録し、キーを取得する
- プラグインに設定する
2つ合わせて5分程度で完了するので、サクッと設定していきましょう!
reCAPTCHAに登録する
まずは、reCAPTCHAサービスページにアクセスして、プラグインに連携するためのキー(Key)を取得していきましょう!
GoogleのreCAPTCHAサービスページにアクセスして連携用のキー(Key)を取得する必要があります。
![reCAPTCHAの導入手順](https://ym-life.com/wp-content/uploads/2021/08/f34827f390179fa92c29c544ff55b75c.jpg)
![reCAPTCHAの導入手順](https://ym-life.com/wp-content/uploads/2021/08/f34827f390179fa92c29c544ff55b75c.jpg)
Googleアカウントにログインします。
![reCAPTCHAの導入手順2](https://ym-life.com/wp-content/uploads/2021/08/08d4a73f22c067a87007d858b2013be0.jpg)
![reCAPTCHAの導入手順2](https://ym-life.com/wp-content/uploads/2021/08/08d4a73f22c067a87007d858b2013be0.jpg)
以下の①~④の項目をそれぞれ入力していきましょう。
![reCAPTCHAの導入手順3](https://ym-life.com/wp-content/uploads/2021/08/f9d965c7635ec0c34c3661c4a60da63d.jpg)
![reCAPTCHAの導入手順3](https://ym-life.com/wp-content/uploads/2021/08/f9d965c7635ec0c34c3661c4a60da63d.jpg)
- ラベル:何でもOK
- reCAPTCHAタイプ:「reCAPTCHA3」を選択
- ドメイン:スパム対策したいブログURLを入力
- 同意事項にチェック
ここまで入力できたら、「送信」をクリックします。
③のドメインは、「https://」を除いた形で入力します。
このブログを設定する場合:ym-life.com
※「ym-life.com/」と最後にスラッシュがあるとエラーが表示されてしまうので注意。
無事登録されたら、サイトキーとシークレットキーが表示されます。
※このページは後で使いますので、閉じずに開いたままにしておいてください。
![reCAPTCHAの導入手順4](https://ym-life.com/wp-content/uploads/2021/08/83182ae9cadf395a5de6d127d3516d2d.jpg)
![reCAPTCHAの導入手順4](https://ym-life.com/wp-content/uploads/2021/08/83182ae9cadf395a5de6d127d3516d2d.jpg)
プラグインに設定する
次に、WordPressでの設定です。
『お問い合わせ』⇒『インテグレーション』をクリック。
![reCAPTCHAの導入手順5](https://ym-life.com/wp-content/uploads/2021/08/deca319c00998c4d32153703cb9761ec.jpg)
![reCAPTCHAの導入手順5](https://ym-life.com/wp-content/uploads/2021/08/deca319c00998c4d32153703cb9761ec.jpg)
reCAPTCHAの『インテグレーションのセットアップ』をクリックします。
![reCAPTCHAの導入手順6](https://ym-life.com/wp-content/uploads/2021/08/4496c767b05c81e934d6ec23abcaf1b8.jpg)
![reCAPTCHAの導入手順6](https://ym-life.com/wp-content/uploads/2021/08/4496c767b05c81e934d6ec23abcaf1b8.jpg)
先ほどのサイトキーとシークレットキーをこちらに入力していきます。(※コピペ推奨)
![reCAPTCHAの導入手順7](https://ym-life.com/wp-content/uploads/2021/08/095a22b6bd51513a1e7de7a1cde3926b.jpg)
![reCAPTCHAの導入手順7](https://ym-life.com/wp-content/uploads/2021/08/095a22b6bd51513a1e7de7a1cde3926b.jpg)
入力できたら、『変更を保存』しておきましょう!
![reCAPTCHAの導入手順8](https://ym-life.com/wp-content/uploads/2021/08/a39c54d569419e8fdd25af80c46fcd5a.jpg)
![reCAPTCHAの導入手順8](https://ym-life.com/wp-content/uploads/2021/08/a39c54d569419e8fdd25af80c46fcd5a.jpg)
reCAPTCHAはこのサイト上で有効化されています。
このように表示されたら、設定完了です!
ブログを確認し、画面右下にこんなマークが表示されていればOK。
![reCAPTCHAのプライバシー画像](https://ym-life.com/wp-content/uploads/2021/08/49f50d3e23f5a9f0ec44cc5f95415009-1.jpg)
![reCAPTCHAのプライバシー画像](https://ym-life.com/wp-content/uploads/2021/08/49f50d3e23f5a9f0ec44cc5f95415009-1.jpg)
保護マークを非表示にする方法(任意)
※ここからは、任意の操作になります。
フッターメニューを設定されている場合など、保護マークがブログ運営の邪魔になる場合のみ非表示の設定をしていきましょう!
こちらの手順も2段階です。
- htmlのコードをcontact form7に貼り付ける。
- CSSにコードを記述する。
htmlのコードをcontact form7に貼り付ける
まずは、GoogleのQ&Aサイトにアクセスします。
※別ページで開くことを推奨
「I’d like to hide the reCAPTCHA badge. What is allowed?」の箇所までスクロールし、htmlコードをコピーします。
![reCAPTCHAのログ非表示手順](https://ym-life.com/wp-content/uploads/2021/08/1d782422ab38a186651eccbef2689c15.jpg)
![reCAPTCHAのログ非表示手順](https://ym-life.com/wp-content/uploads/2021/08/1d782422ab38a186651eccbef2689c15.jpg)
※この画面はまだ使うので、閉じないでください。
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.
コンタクトフォーム7に、このコードを記述していきます。
管理画面『お問い合わせ』⇒『コンタクトフォーム』を開き、最後の行にコードを貼り付け。
![reCAPTCHAのログ非表示手順2](https://ym-life.com/wp-content/uploads/2021/08/45fd83d1e86a791209b5e9553e31aae9.jpg)
![reCAPTCHAのログ非表示手順2](https://ym-life.com/wp-content/uploads/2021/08/45fd83d1e86a791209b5e9553e31aae9.jpg)
貼り付けたら、「保存」を押しておきましょう。
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
この段階ではまだロゴは非表示になっていません。下記で非表示にする方法を解説していきます。
CSSにコードを記述する
次に、先ほどアクセスしたGoogleの公式ページを再度開き、ロゴを非表示にするコードをコピーします。
![reCAPTCHAのログ非表示手順3](https://ym-life.com/wp-content/uploads/2021/08/5fe55ada9815ff14c6bdc3b0321a97e8.jpg)
![reCAPTCHAのログ非表示手順3](https://ym-life.com/wp-content/uploads/2021/08/5fe55ada9815ff14c6bdc3b0321a97e8.jpg)
.grecaptcha-badge { visibility: hidden; }
こちらを、WordPressのダッシュボード画面からCSSに記述していきます。
JINやSWELLの場合は、『外観』⇒『カスタマイズ』から追加CSSを記述することができます。
![reCAPTCHAのログ非表示手順4](https://ym-life.com/wp-content/uploads/2021/08/42433c2ba1aa0143913573a1dbeb9776.jpg)
![reCAPTCHAのログ非表示手順4](https://ym-life.com/wp-content/uploads/2021/08/42433c2ba1aa0143913573a1dbeb9776.jpg)
先ほどコピーしたコードを貼り付けていきます。
![reCAPTCHAのログ非表示手順5](https://ym-life.com/wp-content/uploads/2021/08/e1f8830a5203c5ac88221d5689374ca7.jpg)
![reCAPTCHAのログ非表示手順5](https://ym-life.com/wp-content/uploads/2021/08/e1f8830a5203c5ac88221d5689374ca7.jpg)
貼り付けたら、忘れずに「公開」ボタンを押しておきましょう!
最後に、ロゴが非表示になっているか確認してください。
また、お問い合わせページに以下の文言が追加されているかも併せてチェックしておきましょう。
![reCAPTCHAのログ非表示手順6](https://ym-life.com/wp-content/uploads/2021/08/2461fdca7d0924d2b2bd112e89e01a98.jpg)
![reCAPTCHAのログ非表示手順6](https://ym-life.com/wp-content/uploads/2021/08/2461fdca7d0924d2b2bd112e89e01a98.jpg)
こちらが確認できたら、非表示の処理は完了です!
あとがき
今回は、スパムメール対策についてでした。
reCAPTCHAで海外から届く鬱陶しい英文メールを排除し、快適にブログを運営していきましょう!
コメント