THORのスパム対策はrecAPTCHAで解決!お問い合わせ・コメントにも対応!

WordPressテーマ『THE THOR(ザ・トール)』を使っていて、スパムメールやスパムコメントに困ったことはないでしょうか?

僕はちょっと前まで1日に5,6通くらいのスパムが来ててめちゃくちゃイヤでした(^^;

 

THE THOR(ザ・トール)はテンプレートに「お問い合わせ機能」を持っていて、Contact Form 7という定番プラグインを使わずにお問い合わせページが作れます。

でもそれゆえに、Contact Form 7と連動するスパム対策プラグインが使えずスパムに苦しんでいたわけです。。

 

で、いろいろと調べてみたところ、THORのお問い合わせ機能を使いつつスパム対策する方法が見つかりました!

 

それがreCAPTCHA(リキャプチャ)というGoogleが無料で提供しているスパム対策ツールです。

reCAPTCHAはこんなやつです↓

みなさん一度くらいは見たことがあるんじゃないでしょうか。

「信号機」とか「お店」の画像をすべてクリックしてください、みたいなバージョンもあるのですが、あれもreCAPTCHAです。

 

そして最新バージョンの「V3」では、とうとうチェックボックスや画像がなくなりました。

 

なんと、AIがユーザーの動きを判断して人かBOTかを判断し、必要な場合だけチェックボックスを出してくれるようなんです。

最新版の表示はこんな感じで、人がアクセスする分には何も入力する必要がありません。

Googleってやっぱりすごいですねー。

 

ということで、今回はTHOR(ザ・トール)にreCAPTCHAを導入してみたいと思います。

思ったよりもかんたんにできたので、THORユーザーでスパムに困っている方はぜひ参考にして下さい(^^♪

THORのスパム対策をreCAPTCHAで設定

先に今回やることをサクッと紹介しておきます。

手順は以下の3ステップです。

①reCAPTCHAのキーを取得する。

②Advanced noCaptcha & invisible Captchaを導入する。

③reCAPTCHAのロゴを非表示にする。

GoogleでreCAPTCHA用のキーを取得し、WordpressにreCAPTCHA用のプラグイン「Advanced noCaptcha & invisible Captcha」をインストールします。

 

スパム対策自体はこれでOKなのですが、このままだとreCAPTCHAのロゴがブログに表示されたままになってしまうので、最後にロゴを隠して完成です。

 

では早速やっていきましょう!

reCAPTCHAのキーを取得

まずはreCAPTCHAのキーを取得します。

 

①こちらのページにアクセスしてください。

=> reCAPTCHAの公式ページ

 

②右上の「Admin console」をクリックします。

③Googleアカウントにログインします。

④必要事項を入力して送信ボタンをクリックします。

 

ラベル・・・なんでもOKです。ドメイン名がわかりやすいです。

reCAPTCHAタイプ・・・今回は「reCAPTCHA v3」を選択します。チェックボックス付きのタイプがいい場合にはv2でもOKです。

reCAPTCHA同意チェック・・・チェックを入れます。

アラートをオーナーに送信する・・・チェックを入れます。

 

⑤以下2つのキーが生成されました。メモ帳にコピーしておきましょう。(すぐに使います)

サイトキー・・・①

シークレットキー・・・②

以上でreCAPTCHAのキー取得は完了です!

Advanced noCaptcha & invisible Captchaをインストール

次にWordpressにプラグインを入れていきます。

今回使うのは「Advanced noCaptcha & invisible Captcha」というプラグインです。

インストールして有効化してください。

※似ているものがいくつかあるので間違えないように気を付けて下さい。

 

①Wordpressの 設定> Advanced noCaptcha & invisible Captcha で設定画面を開いて以下のように入力します。

Version・・・V3を選択します。

Site Key・・・①サイトキーを設定。

Secret Key・・・②シークレットキーを設定。

Enabled Forms・・・「Login Form」から「Comment Form」までをチェック。

ちなみに各チェックボックスの意味は以下のとおりです。

  • Login Form→ログインフォーム
  • Registration Form→(いろいろな)登録フォーム
  • Multisite User Signup Form→一般ユーザーの登録フォーム
  • Lost Password Form→パスワード紛失時の再設定フォーム
  • Comment Form→コメントフォーム

 

下半分の設定は以下のとおりです。

 

Error Message・・・変更なし。reCAPTCHAの入力に失敗したときのメッセージ。「もう一度やり直してください」みたいに変更してもOK。

Captcha Language・・・reCAPTCHAのメッセージです。「Japanese」を選択。

Failed login Captcha・・・失敗した場合に何回までキャプチャを表示するか。0だと何回でも。

v3 Script Load・・・「All Pages」を設定。本当はフォームの画面だけが良かったんだけど、それだとTHORのお問い合わせには出なかった。

Captcha Score・・・V3ではAIが人間かBOTかを判断している。チェックの強度を0~1で設定可能。ひとまずそのまま。

Logged in Hide・・・チェックあり。ログインした人に対してはキャプチャを表示しない。

 

この設定をおこなった時点で、ブログにキャプチャが出ていることを確認しましょう。

画面右下の方にこんな風に出ているはずです。

これが出ているページはreCAPTCHAで保護されている状態です。

すごくかんたんですよね(^^)

 

でも気になる点がひとつ。それはこのロゴの大きさ。

パソコンだと小さくてあまり気にならないのですが、スマホで見るとでっかくてジャマです。。

なので、最後にこれを非表示にする設定をしていきます。

(ちょっとややこしい設定もありますので、ロゴが気にならない方はこれで完了でも大丈夫です!)

reCAPTCHAのロゴをCSSで非表示にする

ロゴはCSSを使って1行コピペするだけで非表示にすることが可能です。

 

ただし。

勝手に消しちゃダメなんです。

消すためには条件が必要です。

 

recAPTCHAの利用規約にはこのようにあります。

I’d like to hide the reCAPTCHA v3 badge. What is allowed?
You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

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.

引用元:reCAPTCHA公式サイト

何を言っているかというと「reCAPTCHAを非表示にしたかったら、この文言をサイト内のユーザに見えるところに入れてね」という意味です。

 

その文言というのがこの1文↓

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

意味は「このサイトはGoogleのreCAPTCHAのサービスによって守られてるよ」という内容です。

 

まぁ・・・、無料で使わせてもらってますので仕方がないと我慢しましょう(^^;

 

ということで、非表示にするためにやることはこの2つ。

①reCAPTCHAのブランディング文言を追加する

②CSSでreCAPTCHAを非表示にする

さっそくやっていきます。

 

①reCAPTCHAのブランディング文言を追加する

まずは先ほどのブランディングの文言をブログ内に記載します。

 

reCAPTCHAで対策するのは、「お問い合わせフォーム」や「各記事のコメント」、そして認証系の画面(ログインとかパスワード変更など)。

つまり、ほとんど全部の画面で使ということです。

 

なので、僕の場合はフッターのコピーライトの下に小さく記載することにしました。

完成イメージはこんな感じです↓

 

この設定を入れるために、THORの「footer.php」というソースコードをちょっとだけ触ります。

 

このファイルを触るためには、FTPソフトを使うか、サーバーのFTP機能を使ってファイルにアクセスする必要があります。

僕はFTPソフトの王道、FFFTPという昔ながらのツールでやりました。

=>FFFTPの無料ダウンロード

 

サーバーへの接続方法は「サーバー名 FTP接続」で検索すればたくさん出てくると思います。

僕の場合はエックスサーバーなので「エックスサーバー FTP接続」ですね。

 

footer.phpを親テーマの格納場所からダウンロードして、そのまま子テーマの格納場所にアップロードします。

 

なんでこんなことをするかというと、親テーマのファイルを直接更新すると、テーマが更新されたタイミングで設定した内容が上書かれて消えてしまう可能性があるからです。

WordPressテーマが親テーマと子テーマに分かれている理由はこのためです。

 

FTPソフトでサーバーに接続したら、親テーマの場所に移動してfooter.phpをダウンロードしてください。

親テーマのファイルの場所:

ドメイン名/public_html/wp-content/themes/the-thor/footer.php

 

続いて、このファイルを何も手を加えずに子テーマの場所にアップロードします。

子テーマのファイルの場所:

ドメイン名/public_html/wp-content/themes/the-thor-child/footer.php

アップロードしたらWordpressでfooter.phpの一部を修正します。

 

「外観」>「テーマエディター」と進んでください。

画面右上に、「編集するテーマを選択」という選択項目があるはずです。

 

「THE THOR CHILD」となっていると思いますが、この少し下に先ほどアップした「footer.php」があるので、これをクリックして開きます。

 

169行目あたりに「<?php endif; ?>」という箇所があると思いますので、改行を入れて以下の1行を追加します。

<br/><font size=”1″>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.</font>

 

挿入するとこんな感じになるはずです。

 

挿入できたら「ファイルを更新」をクリックして更新します。

これでコピーライトの下にreCAPTCHAの文言が入ったかと思います。(Privacy Policyのところはリンクになっているはずです)

 

万が一失敗して画面レイアウトがおかしくなってしまった場合には、子テーマにアップロードしたfooter.phpをアップしなおせばもとに戻ります。

②CSSでreCAPTCHAを非表示にする

最後にreCAPTCHAのロゴを非表示します。

この手順はとってもかんたんです。

 

WordPressの左メニューから「外観」>「カスタマイズ」>「追加CSS」を開きます。

ここに以下の2行を追記してください。(1行目はなくても動きますが、わかりやすくするために一応書いています)

.grecaptcha-badge { visibility: hidden; }

追記したら「公開」ボタンで設定を更新してください。

これでスパム対策をしつつ、ロゴは画面に出ていないはずです。

スパム対策の状況はWebで確認できる

ちなみに、reCAPTCHAのスパム対策の状況はWebで閲覧することができます。

もう一度reCAPTCHAのページにアクセスして「Admin console」を開くとこんな情報が見れるはずです。

=> reCAPTCHAの公式ページ

左側のグラフを見ると、

青色(→問題ないアクセス)

紺色(→スパムっぽいアクセス)

の割合がわかりますね。

 

一方、右側のグラフはreCAPTCHAのスコアが表示されています。

この分布をみることで、どのくらいのスコアを設定すれば高確率でBOTを遮断できるのかがわかるということですね。

 

上のデータの場合、左のグラフにより人によるアクセスが大半を占めていることがわかり、右のグラフからそのほとんどが0.9であるため、仮にスコアを0.9で設定しても人間には影響がないということだと思います。間違ってたらすいません(^^;

 

スコアの設定はWordpressのプラグイン「Advanced noCaptcha & invisible Captcha」の「Captcha Score」で設定を変更できるので、いろいろとチューニングしてみて下さい。

 

reCAPTCHAではAIがアクセスデータを学習しながら精度を高めていきますので、導入当初は判別制度が低いと思いますが、徐々にスパムだけを判断できるようになっていくでしょう。

まとめ

この方法でスパム対策をしてから1週間ほどたちましたが、スパムメールがだいぶ減りました(^^

たまーに来ますけど、以前よりは全然マシですね。

 

ちなみに今回はTHORでの話でしたが、「お問い合わせ」の機能を持つWordpressテンプレートであれば使える可能性が高いです。

スパムに困っている方がいましたら、ぜひ一度試してみて下さいね☆

 

それでは今回はこの辺で!