セキュリティ WordPress

WordPressのスパム対策『reCAPTCHA(v3)』とは?【Contact Form 7の設定方法も解説】

2021年8月15日

※ 当サイトではアフィリエイト広告を利用しています

スパム対策に『Akismet Anti-Spam』を使いたいけど商用利用だから無料で使えないんだよね・・・
『reCAPTCHA』は無料でスパム対策出来るよ!

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

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

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

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

  • コメント欄は残したい
  • 商用利用している

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

『reCAPTCHA』の利用にはGoogleアカウントが必要

reCAPTCHAはGoogleのサービスなので、Googleのアカウントが必要になります。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

WordPressのスパム対策『reCAPTCHA』はバージョンが4種類ある

『reCAPTCHA』の導入方法の解説に入る前に、バージョンについて解説します。

すぐ設定したい方は読み飛ばしてOKです(今回設定するのは『reCAPTCHA(v3)』です)

『reCAPTCHA』にはバージョンが4種類あります。

  1. reCAPTCHA v1
  2. reCAPTCHA v2
  3. reCAPTCHA v2 invisible
  4. reCAPTCHA v3

1つずつ解説していきます。

 

reCAPTCHA v1

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

一度は見た事があるかとも知れませんが、このようなやつです。

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

 

reCAPTCHA v2

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

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

reCAPTCHA v2のチェック画面

reCAPTCHA v2のチェック画面

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

それがこちらです。

reCAPTCHA v2のチェック画面(画像選択)

reCAPTCHA v2のチェック画面(画像選択)

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

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

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

 

reCAPTCHA v2 invisible

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

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

 

reCAPTCHA v3

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

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

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



reCAPTCHA(v3)の導入方法

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

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

reCAPTCHA

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

reCAPTCHA:『v3 Admin Console』クリック

reCAPTCHA:『v3 Admin Console』クリック

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

reCAPTCHA:『v3 Admin Console』入力欄

reCAPTCHA:『v3 Admin Console』入力欄

上から順に以下のようになります。

  • ラベル:任意の名前(サイトが分かる名前がおすすめ。ドメインでも可。)
  • reCAPTCHAタイプ:v2かv3を選びます(今回はv3)
  • ドメイン:導入するサイトのドメインを入力
  • reCAPTCHA 利用条件に同意する:チェックする
  • アラートをオーナーに送信する:チェックすると警告メールを送ってくれる
  • 送信ボタン:上記全て入力&チェック出来たらクリック

 

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

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

reCAPTCHA:『サイトキー』と『シークレットキー』

reCAPTCHA:『サイトキー』と『シークレットキー』

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



reCAPTCHA(v3):WordPress側の設定

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

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

WordPress:プラグイン → 新規追加

WordPress:プラグイン → 新規追加

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

『Invisible reCaptcha for WordPress』をインストールして有効化

『Invisible reCaptcha for WordPress』をインストールして有効化

 

Invisible reCaptchaの設定

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

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

WordPress管理画面:設定 → Invisible reCaptcha

WordPress管理画面:設定 → Invisible reCaptcha

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

Invisible reCaptcha設定画面

Invisible reCaptcha設定画面

上から順に以下のようになります。

  • サイト鍵(Your Site key):サイトキーをコピペ
  • 秘密鍵(Your Secret Key):シークレットキーをコピペ
  • 言語(Language):Japaneseまたは自動検出を選択
  • バッジ位置(Badge Position):reCAPTCHAマークの位置(右下、左下、インラインから選択)
  • バッジのカスタムCSS:バッジ位置がインラインの時、CSSでスタイル変更可能
  • 変更を保存:上記全て入力が出来たらクリック

 

Invisible reCaptchaの設定(WordPress)

次の設定はこちら。

Invisible reCaptcha設定画面(WordPress)

Invisible reCaptcha設定画面(WordPress)

上から順に、

  • ログインフォームの保護を有効化
  • 登録フォームの保護を有効化
  • コメントフォームの保護を有効化:スパムコメント対策するならチェック
  • パスワード再発行フォームの保護を有効化
  • 変更を保存:上記チェックが出来たらクリック

となります。

チェック項目の1つ目と4つ目はドメインやキーを間違えるとログイン出来なくなるのでご注意下さい。

 

バッジ位置(右下の場合)

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

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

reCaptcha:バッジの位置が右下の場合(ログイン画面)

reCaptcha:バッジの位置が右下の場合(ログイン画面)

reCaptcha:バッジの位置が右下の場合(記事ページ)

reCaptcha:バッジの位置が右下の場合(記事ページ)

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

reCaptchaのバッジがページトップボタンと重なる

reCaptchaのバッジがページトップボタンと重なる

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

まずは管理画面から『外観 → カスタマイズ』をクリックします。

WordPress管理画面:外観 → カスタマイズ

WordPress管理画面:外観 → カスタマイズ

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

追加CSSをクリック

追加CSSをクリック

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

追加CSS入力前

追加CSS入力前

追加CSS入力後

追加CSS入力後

コードはこちらです。

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

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

reCaptchaのバッジがページトップボタンと重ならない

reCaptchaのバッジがページトップボタンと重ならない

位置の調整などはテーマによって異なると思うので、適宜調整しましょう(CSSが分からないと難しいと思いますが・・・)

 

バッジ位置(インラインの場合)

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

reCaptcha:バッジの位置がインラインの場合(記事ページ)

reCaptcha:バッジの位置がインラインの場合(記事ページ)

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

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

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

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

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

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

この辺もCSSが書ける人は必要に応じて調整してみて下さい。

 

Contact Form 7の保護を有効化

『Contact Form 7』で適用させたい場合は『Invisible reCaptcha設定』の『問い合わせフォーム』で『Contact Form 7の保護を有効化』にチェックを入れて『変更を保存』をクリックすればOKです。

Invisible reCaptcha設定:Contact Form 7の保護を有効化

Invisible reCaptcha設定:Contact Form 7の保護を有効化



Contact Form 7の設定で『reCAPTCHA』を適用させる方法

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

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

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

つまり全ページに『reCAPTCHA』が適用されるので、コメント欄の無いページには表示させたくない場合は先ほどまでの方法で設定しましょう。

それでは全ページに『reCAPTCHA』を適用する方法を解説します。

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

Contact Form 7:reCAPTCHAの『インテグレーションのセットアップ』をクリック

Contact Form 7:reCAPTCHAの『インテグレーションのセットアップ』をクリック

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

Contact Form 7:reCAPTCHAの『サイトキー』と『シークレットキー』を入力

Contact Form 7:reCAPTCHAの『サイトキー』と『シークレットキー』を入力

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

Contact Form 7:reCAPTCHAの設定完了

Contact Form 7:reCAPTCHAの設定完了

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

Contact Form 7:reCAPTCHAのキーを削除

Contact Form 7:reCAPTCHAのキーを削除

まとめ

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

Akismet Anti-Spam

  • WordPressをインストールすると最初から入ってるプラグイン
  • コメント欄を無効にするなら不要なプラグイン
  • 基本は無料だが商用利用は有料(アフィリエイトサイトも有料)
  • スパムコメントを振り分ける(自動削除も可能)
  • Contact Form 7のスパムメール対策も可能

reCAPTCHA v3

  • 無料(商用利用も無料)
  • GoogleのサービスなのでGoogleアカウントが必要
  • スパムコメントやメールを振り分けるのではなく、書かせない
  • Contact Form 7で設定する場合は全ページに適用される
  • お問い合わせフォームやコメント欄のみ適用させたい場合は、プラグインを使う

以上になります。

あわせて読みたい
【Contact Form 7】海外からの迷惑なスパムメール対策方法【プラグイン不要】
【Contact Form 7】海外からの迷惑なスパムメール対策方法【プラグイン不要】

続きを見る

あわせて読みたい
必要か不要か?無料でも使える『Akismet Anti-Spam』の設定方法【WordPressプラグイン スパム対策】
必要か不要か?無料でも使える『Akismet Anti-Spam』の設定方法【WordPressプラグイン スパム対策】

続きを見る

あわせて読みたい
【WordPress】Akismet Anti-Spamを使ってContact Form 7のスパムメール対策する方法
【WordPress】Akismet Anti-Spamを使ってContact Form 7のスパムメール対策する方法

続きを見る

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-セキュリティ, WordPress
-