reCAPTCHAの登録と設置♪でスパム対策方法を紹介

未分類

問い合わせページを作成したけど、変なメールがたくさん来るんだけど何とかならない?

reCAPTCHAって自分のページに設置できないの?

と悩む方むけに、reCAPTCHAの登録と設置方法を紹介します。

ブログで設置している「お問い合わせ」ページ。

さぁ、Googleさんの力をかりてスパム対策をしましょう(^^♪

この記事では、Googleの無料スパム対策ツールを使用してのスパム対策方法を紹介します♪

*** スパム対策に使用する機能とツール ***

  • 問い合わせのプラグイン「Contact Form 7」
  • Googleの無料スパム対策ツール(reCAPTCHA)

「Contact Form 7」でお問い合わせページを作成する

スパム対策の前に、cocoonでお問い合わせのページを作成してください。

終わっている方は、読み飛ばしてください。

>>>wordpress テーマCocoon(コクーン)♪お問い合わせページの作り方

Googleの無料ツール(reCAPTCHA)とは

「私はロボットではありません」というチェックボックス。

画像をダウンロードする時や、フォームに入力するときなどによく見かけますよね(;^_^A

「山をすべてクリックしてください。」

とか

「信号機をすべてクリックしてください。」

など。

私は何度もクリックさせられてムカつく時もあります(笑)。

あれがreCAPTCHAの機能によるものです♪

cocoonと「reCAPTCHA」の大まかな手順

 

  1. Googleの無料ツール(reCAPTCHA)のキーを取得
  2. wordpressにプラグインAdvanced noCaptcha & invisible Captchaを入れて設定。
  3. CSSをコピペして「reCAPTCHA」マークを非表示にする
  4. フッターに「reCAPTCHAを使用しています」の文を追加

Googleの無料ツール(reCAPTCHA)のキーを取得

Googleの無料ツールはとっても助かります。

スパム対策に使用するのは「reCAPTCHA」というツールです。

Googleアカウントにログインした後、ブログのデータを入力してキーをreCAPTCHAのキーを取得します。

>>>Google/reCAPTCHA公式サイト

「Admin console」をクリック

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

無料ツールreCAPTCHAを設置したいサイトの登録

新しいサイトを登録するページが表示されます。

ラベル

自分がわかる名前を付けてください。

私はドメイン名で登録しました。

reCAPTCHAタイプ

レプチャV2タイプをよく見かけますね。

レプチャV2タイプ

「私はロボットではない」チェックボックスと目に見えないreCAPTCHAバッジの課題と正当であるかどうかを確認します。

参照元:Google reCAPTCHA 

レプチャV3タイプ

スコアを使用して要求を検証し、サイトのコンテキストでアクションを実行する機能を提供します。

参照元:Google reCAPTCHA

どちらを選択してもOKです♪

私は、見えないところでスパムか判断してくれるなんてreCAPTCHA優秀~と喜んで「v3」を設置しました。

ドメイン

「+」を押しても何も起こりません(笑)

赤枠で囲ったドメイン入力場所をクリックして、ドメインを入力してください。

「https://」は入力しなくても大丈夫♪

複数サイトで使用したい時は、使用したいアドレスをすべて入力してください。

reCAPTCHA 利用条件に同意する

ここのチェックを外さないでください。

アラートをオーナーに送信する

設定エラーや不審なトラフィックの増加など、サイトで問題が検出された場合にアラートを受け取るためのチェックなので外さないでください。

最後に下にある「送信」ボタンをクリックしてください。

これで、GooglereCAPTCHA側の設定は終わりです。

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

上の「送信」をくりっくすると、キー取得の画面が表示されます。

イトキーとシークレットキー2つのキーを設定に使いますので、メモ帳にでもコピペしておいてください。

コピペが終わりましたら、下にある「アナリティクスに登録」をクリックしてください。

プラグインAdvanced noCaptcha & invisible Captchaを入れる

ここからはwordpress側の手順になります。

コンセントマーク「プラグイン」→「新規追加」を順にクリックして下さい。

新規追加画面で「Advanced noCaptcha & invisible Captcha」を検索してください。

「今すぐインストール」をクリック後「有効」をクリックしてください。

Advanced noCaptcha & invisible Captchaの設定

「 設定」→「 Advanced noCaptcha & invisible Captcha」を順にクリックしてください。

「 Advanced noCaptcha & invisible Captcha」の設定画面が表示されます。

無料ツールreCAPTCHAを設置したいサイトの登録で選択したバージョン、サイトキー、シークレットキーを使用してください。

Versionとは

①reCAPTCHAタイプを選択します。

無料ツールreCAPTCHAを設置したいサイトの登録で選択したバージョンを選択してください。

私はV3タイプを選択したので、①にV3を選択します。

Site Keyとは

メモ帳にコピペしたサイトキーを②にコピペしてください。

Secret Keyとは

メモ帳にコピペしたセキュリティキーを③にコピペしてください。

Enabled Formsとは

セキュリティをかけたいフォームを選択します。

1番上の「Login Form」にチェックはしないでください。

自分がログインできなくなったら困るので、外しておいた方が無難です。

私は「v2」にした時に、ログインできなくなり本当に困りました( ノД`)シクシク…

そんなことあり得ないと思っていたので驚きました。

④でチェックを入れた項目です。

Login Form ログインフォーム Lost Password Form パスワード紛失フォーム
Registration Form/ 登録フォーム Reset Password Form パスワードリセットフォーム
Multisite User Signup Form/ マルチサイトユーザー登録フォーム Comment Form コメントフォーム

Captcha Languageとは

使用する言語を選択します。

「japanese」を選択してください。

Logged in Hideとは

ログインした人に対しての設定をします。

非表示にしたい場合は⑥にチェックを入れてください。

私は非表示に設定してあります。

最後に「変更を保存」をクリックして下さい。

reCAPTCHAのマークを非表示にする

自身のサイトを見てみてください。

右下にreCAPTCHAのマークが表示されていると思います。

このロゴの非表示設定をしてしまいましょう♪

Cocoonに追加するCSSのコピペ文

「外観」→「カスタマイズ」→「追加css」の順にクリックしていってください。

/* 非表示にするコピペ文 */ 
.grecaptcha-badge { visibility: hidden; }

上の文をコピペして「追加CSS」に張り付けて「公開」をクリックしてください。

ブログにreCAPTCHAの文を表示させる

I’d like to hide the reCAPTCHA badge. What is allowed?
reCAPTCHAバッジを非表示にしたい。何が許可されていますか?

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
ユーザーフローに目に見える形でreCAPTCHAブランディングを含めている限り、バッジを非表示にすることができます。次のテキストを含めてください

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

非表示にしたいので、Googleさんの指示通り、この文をサイトにコピペします。

フッターにreCAPTCHAを使用しているの文を追加

どこに表示させようかまで指定しては無いので自由なのですが、例として私が表示している場所を紹介します。

タグが使えて、どのページにも表示されるという事でこのエリアを選びました。

「Cocoon設定」→「フッター」の順にクリックして「クレジット表記」で「独自表記」を選択して下の文を追加してください。

*** コピペ文 ***

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.

コピペした後に「変更をまとめて保存」をクリックしてください。

フッターにGoogleさんからの指定文が表示されます。

どんなの?と思った方は、下にスクロールしてこのサイトのフッターを見てください(^^♪

スパムコメントの状況はWEBで確認

スパムコメントの状況は、Webで閲覧することができます。

もう一度reCAPTCHAのページにアクセスして「Admin console」をクリックしてください。

=> reCAPTCHAの公式ページ

【Cocoon】お問い合わせのスパム対策!Google機能を使って解決(^^♪ まとめ

reCAPTCHAを設置した後、設置がうまくいっているかサイトのページを表示させて確認してください。

特に、問い合わせページ( ̄▽ ̄;)

reCAPTCHAのマークが表示されていることを確認してから非表示にすることをおすすめします。

Googleさんの無料ツールはとっても便利ですごい!!

コメント

タイトルとURLをコピーしました