WordPressでスパム対策が出来るreCAPTCHA(v3)とは？【導入方法も解説】

スパム対策にAkismet Anti-Spam使いたいけど商用利用だから無料で使えないんだよね

reCAPTCHAは無料でスパム対策出来るよ！

WordPressをインストールしたら最初から入っているAkismet Anti-Spamというプラグインを使えばスパム対策は出来るのですが、商用利用の場合は有料となります。

ただ無料でどうにかしたいという人が多いと思います。

そこで今回はGoogleの無料サービスであるreCAPTCHA（リキャプチャ）を使ったスパム対策方法を解説していきます。

ちなみにAkismet Anti-Spamはスパムコメントを自動でスパムフォルダに振り分けたり削除しますが、reCAPTCHAは書き込めないようにしてくれます。

という方はreCAPTCHAの方をおすすめします。

reCAPTCHAのバージョン

導入方法の解説に入る前にバージョンについてお話します。

すぐ設定したい方は読み飛ばしてOKです（今回設定するのはreCAPTCHA v3です）

reCAPTCHAにはバージョンがあり、

と4種類になります。

reCAPTCHA v1

これは歪んだ文字を入力タイプで現在は提供終了しています。

一度は見た事があるかと思いますが、このようなやつです。

この歪んだ文字はボットが読み取ることは難しいとされてきましたが、徐々に読み取れるようになってきたので現在は廃止されています（人間でも時々読めない文字ありますが）

reCAPTCHA v2

v2は私はロボットではありませんにチェックを入れるタイプになります。

これも見た事がある人が多いかと思います。

これはチェックを入れたらすぐ人間と判断されてダウンロード可能になると場合と、さらに人間かボットかをテストされる画面が表示されます。

それがこちらです。

他には横断歩道、タイル、信号機、自転車など色々な物が対象となります。

これも結構判断が難しい画像があって、何度かはじかれることがありますｗ

これは自分がよく使っているpixabayというフリー素材サイトで画像をダウンロードする時にも使われています。

reCAPTCHA v2 invisible

これは先ほどのreCAPTCHA v2からチェックボックスをなくした物になります。

チェックボックスがないのでボタンクリックでそのまま人間と判断されるか、怪しいと判断されれば先ほどの画像テストが行われます。

reCAPTCHA v3

そしてこれが今回設定していくreCAPTCHA v3になります。

これはテキスト入力、チェックボックス、画像テストなどなく自動化されているので、これまでのバージョンと比べて煩わしさがありません。

それではどうやって人間かどうか判断しているかというと、マウスやページスクロールの動きで判断しています。

reCAPTCHA(v3)の導入方法

それでは本題に入っていきます。

まずは以下のサイトにアクセスします。

reCAPTCHA

この画面が表示されるので、v3 Admin Consoleをクリック。

そしてこちらが画面が表示されます。

上から順に、

となります。

サイトキーとシークレットキーを取得

先ほどの登録画面で送信ボタンをクリックすると、こちらの画面が表示されサイトキーとシークレットキーを取得出来ます。

次のWordPress側の作業でこのキーを使うので、メモ帳などにキーをコピーしておくか上記画面を開いたままにしておきましょう。

WordPress側の設定

ここからはWordPress側の設定になります。

まずプラグインをインストールするので、プラグイン → 新規追加をクリック。

invisible recaptchaと検索すると似たようなプラグインも出てきますが、ここでは左上のInvisible reCaptcha for WordPressをインストールして有効化します。

Invisible reCaptchaの設定

プラグインをインストールして有効化までしたら、プラグインの設定をしていきます。

設定は管理画面の設定 → Invisible reCaptchaをクリック。

そしてこちらが設定画面になります。

上から順に、

となります。

バッジ位置（右下の場合）

ここで注意したいのがバッジ位置。

右下にしたときこのようになります。

特に問題ないように見えますが、当ブログの右下にもあるようなページトップボタンがあると重なってしまいます。

こうなるとカッコ悪いので、追加CSSで調整してみます。

まずはページを開いて画面左上にあるカスタマイズ、または管理画面からの場合は外観 → カスタマイズをクリックします。

そして追加CSSをクリック（ここにあるメニューはテーマによって異なります）

するとCSSを記入できるので、以下のコードを書いて公開ボタンをクリックすれば完了です。

コードはこちらです。

/* reCAPTCHAマークを上にずらす */
.grecaptcha-badge {
  bottom: 90px !important;
}

するとこのようになり、ページトップボタンと重ならなくなりました。

ただこのテーマの場合は画面幅を狭くするとページトップボタンが大きくなり、また少し重なってしまいました。。。

これを回避するには最初からreCAPTCHAマークをもっと上にするか、ページトップボタンが大きくなるブレイクポイントでreCAPTCHAマークをさらに上にするかのどちらかになります。

この辺はテーマによって異なると思うので、適宜調整しましょう（CSSが分からないと難しいと思いますが・・・）

バッジ位置（インラインの場合）

先ほどは右下に設定した状態で位置を上に調整しましたが、今度はインラインにしてみたらどうなるでしょうか。

このように入力欄の下あたりに表示されました。

この位置ならページトップボタンの邪魔になりませんね。

ただこの位置も微妙に気に入らないという方は先ほど同様、追加CSSでどうにかするしかありません。。。

例えば上記は左寄せですが、中央や右寄せにしたい場合はこちらのコードを追加CSSに書いて公開すればOKです。

/* 中央寄せの場合 */
.grecaptcha-badge {
  margin: auto;
}

/* 右寄せの場合 */
.grecaptcha-badge {
  margin-left: auto;
}

WordPress

次の設定はこちら。

上から順に、

となります。

チェック項目の1つ目と4つ目はドメインやキーを間違えるとログイン出来なくなるのでチェックは入れない方がいいかと思います（テストサーバーで経験済）

問い合わせフォーム

次にこちら。

ここでContact Form 7のお問い合わせフォームで適用させたい場合はContact Form 7の保護を有効化にチェックを入れて変更を保存をクリックすれば完了です。

Contact Form 7の設定を使う場合

最後にお問い合わせフォームのプラグイン、Contact Form 7の設定で適用させてみたいと思います。

実は先ほどのInvisible reCaptcha for WordPressというプラグインを使わなくても、Contact Form 7の設定で適用させることも可能です。

ただこの場合はお問い合わせフォームやコメント欄がある投稿ページ以外にも適用されてしまいます（全ページ）

コメント欄の無いページには表示させたくない場合は、先ほどまでの方法で設定しましょう。

まず管理画面のお問い合わせ → インテグレーションをクリックして、reCAPTCHAのインテグレーションのセットアップをクリック。

するとこちらが表示されます。

ここで先ほど取得したキーをそれぞれ入れ、変更を保存をクリックしてこちらの画面が表示されれば完了です。

キーを削除したい場合はもう一度インテグレーションのセットアップをクリックして削除可能です。

まとめ

今回で3連続スパム対策の記事を書いてきたので、まとめてみます。

以上になります。