WordPress セキュリティ お問い合わせフォーム

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

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

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

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

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

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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のスパムメール対策する方法

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-WordPress, セキュリティ, お問い合わせフォーム
-