問い合わせページを作成したけど、変なメールがたくさん来るんだけど何とかならない?
reCAPTCHAって自分のページに設置できないの?
と悩む方むけに、reCAPTCHAの登録と設置方法を紹介します。
ブログで設置している「お問い合わせ」ページ。
さぁ、Googleさんの力をかりてスパム対策をしましょう(^^♪
この記事では、Googleの無料スパム対策ツールを使用してのスパム対策方法を紹介します♪
*** スパム対策に使用する機能とツール ***
- 問い合わせのプラグイン「Contact Form 7」
- Googleの無料スパム対策ツール(reCAPTCHA)
「Contact Form 7」でお問い合わせページを作成する
スパム対策の前に、cocoonでお問い合わせのページを作成してください。
終わっている方は、読み飛ばしてください。
>>>wordpress テーマCocoon(コクーン)♪お問い合わせページの作り方
Googleの無料ツール(reCAPTCHA)とは
「私はロボットではありません」というチェックボックス。
画像をダウンロードする時や、フォームに入力するときなどによく見かけますよね(;^_^A
「山をすべてクリックしてください。」
とか
「信号機をすべてクリックしてください。」
など。
私は何度もクリックさせられてムカつく時もあります(笑)。
あれがreCAPTCHAの機能によるものです♪
cocoonと「reCAPTCHA」の大まかな手順
- Googleの無料ツール(reCAPTCHA)のキーを取得
- wordpressにプラグインAdvanced noCaptcha & invisible Captchaを入れて設定。
- CSSをコピペして「reCAPTCHA」マークを非表示にする
- フッターに「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」をクリックしてください。
【Cocoon】お問い合わせのスパム対策!Google機能を使って解決(^^♪ まとめ
reCAPTCHAを設置した後、設置がうまくいっているかサイトのページを表示させて確認してください。
特に、問い合わせページ( ̄▽ ̄;)
reCAPTCHAのマークが表示されていることを確認してから非表示にすることをおすすめします。
Googleさんの無料ツールはとっても便利ですごい!!
コメント