【図解】Google reCAPTHA v3の設定とInvisible reCaptcha及び問い合わせフォームの設定

【図解】Google reCAPTHA v3の設定とInvisible reCaptchaを使った問い合わせフォームの設定
  • URLをコピーしました!

Google reCAPTHA(リキャプチャ)は、サイトのセキュリティを強化してくれるGoogleのシステムです。

Google reCAPTHAを設定することで、サイトが乗っ取られたり攻撃されたりすることを防ぐことができます。

また、問い合わせフォームにもreCAPTHAを設定することで、攻撃botによるスパムメールなどをブロックすることができます。

そこで今回は、最新バージョンであるGoogle reCAPTHA v3の設定方法と、プラグインInvisible reCaptchaを使った問い合わせフォーム(Contact Form 7及びWPForms)への導入方法について、図を使って解説していきます。

目次

Google reCAPTHA設定の基本的な流れ

まずはじめに、Google reCAPTHAを設定する基本的な流れについて、説明します。

Google側とWordPress(あなたのサイト)側での設定が必要ですが、どちらもとても簡単にできますので安心してください。

Google側で設定すること
  1. Google reCAPTHA(https://www.google.com/recaptcha/)を開き、「v3 Admin Console」をクリックして新規作成をする
  2. 各項目を入力していき、「送信」をクリックして完了
WordPress側で設定すること
  1. プラグインのInvisible reCapthaをインストール&有効化する
  2. 設定>Invisible reCapthaからサイトキー及びシークレットキーをコピペする
  3. 問い合わせフォーム(Contact Form 7又はWPForms)へもGoogle reCAPTHAの設定をして完了

Google側で設定すること

それではまず、Google側で設定することについて、図を使って説明してきます。

1.Google reCAPTHAの新規作成を行う

Google reCAPTHA(https://www.google.com/recaptcha/)を開いたら、右上にある「v3 Admin Console」をクリックした後、「+」ボタンを押し、新規作成を行います。

新規作成
Google reCAPTHAの新規作成

2.各項目を入力して送信ボタンを押す

  • ラベル
    管理する際のわかりやすい名前を入力
  • reCAPTHAタイプ
    reCAPTHA v3を選択
  • ドメイン
    あなたのサイトのドメイン(https://の後のURL)を入力
  • reCAPTHA利用条件に同意するにチェックする
  • アラートをオーナーに送信するにチェックする
Google reCAPTHAの各項目を入力
Google reCAPTHAの各項目を入力

3.サイトキーとシークレットキーが表示される

サイトキーとシークレットキーが表示されるので、プラグインInvisible reCaptchaを設定する際に、それぞれコピペしながら設定していきます。

サイトキー及びシークレットキー

WordPress側で設定すること

続いて、WordPress側で設定する内容について、説明していきます。

なお、Google reCAPTHAのサイトに表示されている各キーをコピペしながら使うため、Google reCAPTHAのサイトはまだ閉じないようにご注意ください。

Invisible reCaptchaの設定

①Invisible reCaptchaをインストールして有効化する

reCAPTHAプラグインの導入

プラグインのインストールと有効化の方法については、『プラグインとは?ブログにあると便利なプラグインの導入方法』に記載していますので、そちらも合わせて御覧ください。

②設定>Invisible reCaptchaを選択する

reCAPTHAプラグインを選択する

③設定の各項目を入力して「変更する」を選択する

  • サイトキー(サイト鍵)
    Google reCAPTHAのサイトキーをコピペする
  • シークレットキー(秘密鍵)
    Google reCAPTHAのシークレットキーをコピペする
  • 言語
    Japanese(日本語)を選択する
  • バッジ位置
    サイトのどの部分にGoogle reCAPTHAのアイコンを表示させるか選択する
    (「インライン」にするとアイコンが隠れる。ただし、Comfort7を設定していると、インラインを選択していても、アイコンが右下に表示される場合がある。
各項目を入力する

④WordPressの各項目は全てチェックする

WooCommerceを使用してECサイトを作るなど、他のシステムを利用する場合も、必要に応じてチェックしてください。

すべてチェックする

⑤問い合わせフォームの該当箇所をチェックする

Contact Form 7を使用する場合は、Contact Form 7の保護を有効化にチェックを入れてください。

(Contact Form7を設定すると、バッチ(アイコン)の位置をインラインに設定していても、右下に表示される場合がある。)

問い合わせフォームにチェック
reCAPTHAのロゴが邪魔な場合

reCAPTHAのロゴを右下又は左下に表示させた場合で、上へ戻るボタン等とかぶって邪魔になる場合があります。

その際には、外観>カスタマイズ>追加CSSに、次のコードを入力すると多少解消されます。

(記号及び英数字は全て半角ですので、ご注意ください。)

/* reCAPTCHAマークをずらして表示 */
.grecaptcha-badge {
bottom: 85px !important ;
}

Invisible reCaptchaを使わずに問い合わせフォームを保護する方法

実は、プラグインのInvisible reCaptchaを使わなくても、Google reCAPTHAを設定した時点で、サイト全体は保護されます。

Invisible reCaptchaは、項目ごとの細かな設定や管理を行うためのプラグインで、必須というわけではありません。

そのため、nvisible reCaptchaを使わずに、問い合わせフォームを保護する場合について、問い合わせフォームの設置によく使われているContact Form 7とWPFormsの2つのプラグインのセキュリティの設定方法について説明します。

問い合わせフォームについて

問い合わせフォームのプラグインは、Contact Form 7かWPFormsのどちらか1つで十分です。

(もちろん、用途に合わせて2つを使い分けて使用しても良いですけど。)

Contact Form 7のGoogle reCAPTHAの設定方法

①お問い合わせ>インテグレーションのセットアップを選択する

コンタクトフォーム7の設定方法
インテグレーションのセットアップ

②サイトキー及びシークレットキーをコピペして「変更を保存」を選択する

サイトキー及びシークレットキーをコピペ

WPFormsのGoogle reCAPTHAの設定方法

①WPForms>設定を選択する

wpformの設定

②CAPTHAタブからreCAPTHAを選択する

reCAPTHAを選択する

③各項目を設定して「設定を保存」を選択する

各項目を入力する

まとめ

Google reCAPTHAの設定、意外と簡単にできましたよね。

たったこれだけで、サイト全体を保護できるので、サイト所有者にとっては、Google reCAPTHA v3の設定は必須です。

Google reCAPTHA v3を設定した段階で、サイト全体は保護されますが、Google reCAPTHAのロゴの表示位置や問い合わせフォームの細かい設定などを行う場合には、Invisible reCaptchaのプラグインを用いて設定しておきましょう。

また、問い合わせフォームを使用する場合、Invisible reCaptchaを使わない場合でも、Google reCAPTHAの設定はしておいた方がベターです。

その際は、各問い合わせフォームのプラグインの設定欄へ、Google reCAPTHAのサイトキーとシークレットキーをコピペして設定してください。

【図解】Google reCAPTHA v3の設定とInvisible reCaptcha及び問い合わせフォームの設定 まとめ

Google側で設定すること

  1. Google reCAPTHA(https://www.google.com/recaptcha/)を開き、「v3 Admin Console」をクリックして新規作成をする
  2. 各項目を入力していき、「送信」をクリックして完了

WordPress側で設定すること

  1. プラグインのInvisible reCaptchaをインストール&有効化する
  2. 設定>Invisible reCaptchaからサイトキー及びシークレットキーをコピペする
  3. 問い合わせフォーム(Contact Form 7又はWPForms)へもGoogle reCAPTHAの設定をして完了
目次