WordPress設定

reCAPTCHA 導入方法とContact Form 7への設定方法読み終わるまで 1

reCAPTCHA 導入方法とContact Form 7への設定方法 アイキャッチ

ボット/スパム対策用 reCAPTCHAの導入方法と、ワードプレス(WordPress)のコンタクトフォームプラグイン Contact Form 7に設定する方法を解説します。

この記事を見ることで得られるメリット
  • reCAPTCHAの使い方と詳細な設定方法がわかる
  • Contact Form 7にreCAPTCHAを設定する方法がわかる

reCAPTCHAで実現できること

reCAPTCHAはGoogleが提供する、ボット(自動プログラム)と人間とを区別するキャプチャを利用した無料のサービスで、スパム攻撃からブログやWebサイトを保護します。

現在の最新バージョン v3は画像認証ではなく、バックグラウンドで動作して人間とボットの判定をしています。

reCAPTCHAの導入方法

reCAPTCHAをWordPressのコンタクトフォームプラグイン Contact Form 7に設定する手順は下記のとおりです。

  1. Googleアカウントを使ってreCAPTCHAのキーを取得
  2. ①で取得したキーをContact Form 7に実装

以上の2ステップで完了します。

Googleアカウントは必須です。
reCAPTCHAはGoogleアカウントに紐づくため、所持していない場合はGoogleアカウントを作成する必要があります。

Contact Form 7の設定はこちらの記事を参考にしてください↓

Contact Form 7の設定方法と使い方 アイキャッチ
Contact Form 7の設定方法と使い方ワードプレス(WordPress)のプラグインContact Form 7の設定方法と使い方を詳しく解説します。 Contac...

Googleアカウントを使ってreCAPTCHAのキーを取得

先ずは下記のGoogleのreCAPTCHA登録画面にアクセスします。
https://www.google.com/recaptcha/admin/create

GoogleのreCAPTCHA登録画面GoogleのreCAPTCHA登録画面

下記の手順で登録します。

  1. ラベルには任意の文字を入力します。通常はドメイン名を入力します
  2. ドメイン名を入力します
  3. 利用規約の同意に✔を入れます
  4. 送信ボタンを押します
Google reCAPTCHAのサイトキーとシークレットキーGoogle reCAPTCHAのサイトキーとシークレットキー

↑この画面に表示されているサイトキーとシークレットキーをWordPressのContact Form 7に登録・実装します。

取得したキーをContact Form 7に実装

WordPressのダッシュボード(管理画面)WordPressのダッシュボード(管理画面)

↑WordPressのダッシュボード(管理画面)にある、お問い合わせインテグレーションを選択します。

WordPressのお問い合わせのreCAPTCHAのインテグレーションWordPressのお問い合わせのreCAPTCHAのインテグレーション

↑reCAPTCHAのインテグレーションのセットアップを押します。

WordPressの外部APIとのインテグレーションのreCAPTCHA キー入力画面WordPressの外部APIとのインテグレーションのreCAPTCHA キー入力画面

↑Google reCAPTCHA登録時に取得したキーをコピーして貼り付けます。

  1. サイトキーを貼り付けます
  2. シークレットキーを貼り付けます
  3. 変更を保存を押します
WordPressのContact Form 7でreCAPTCHAが有効化WordPressのContact Form 7でreCAPTCHAが有効化

↑reCAPTCHAの実装が完了すると、「reCAPTCHA はこのサイト上で有効化されています。」と表示されます。

以上で、WordPressのContact Form 7へのreCAPTCHAの実装と有効化は完了です。

問い合わせ画面でreCAPTCHAを確認

お問い合わせ画面に表示されたreCAPTCHAの保護マークお問い合わせ画面に表示されたreCAPTCHAの保護マーク

↑お問い合わせ画面の右端にreCAPTCHAのマークが表示されており、スパム攻撃から保護されていることが確認できます。

reCAPTCHAの保護マークを非表示にする方法

スマホの小さい画面にreCAPTCHAの保護マークが表示されると操作性と視認性が低下することがあります。
そういった時はWordPressの外観のカスタマイズの追加CSSに下記のCSSコードを入れることでreCAPTCHAの保護マークを非表示にすることができます。

.grecaptcha-badge { visibility: hidden; }
WordPressのダッシュボード画面の外観→カスタマイズ→追加CSS 画面WordPressのダッシュボード画面の外観→カスタマイズ→追加CSS 画面

WordPressのダッシュボード→外観→カスタマイズ→追加CSSの空欄にコードを入力し、公開します。

  1. ダッシュボード画面の外観→カスタマイズ→追加CSSの欄に前述のコードを入力
  2. 公開を押す

以上でreCAPTCHAの保護マークを非表示にすることができます。

reCAPTCHAの保護マークを非表示にした場合はGoogleの利用規約を表示する必要がある

reCAPTCHAの保護マークを非表示にした場合は、reCAPTCHAを利用していることとGoogleの利用規約を利用者に提示する必要があります。

WordPressのダッシュボード画面の”お問い合わせ”の”コンタクトフォーム”を編集して下記の文言を追加し、保存します。

このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。

WordPressのダッシュボード画面の"お問い合わせ"の"コンタクトフォーム"を編集して文言を追加WordPressのダッシュボード画面の”お問い合わせ”の”コンタクトフォーム”を編集して文言を追加

実際にreCAPTCHAを使った感想とメリットデメリット

実際にreCAPTCHAを使ってみた感じたメリットとデメリットです。

reCAPTCHAのメリット

お問い合わせフォームを利用したスパムメッセージを高い精度で防ぐことができ、ページスピードなどにも悪影響を及ぼさいことが大きなメリットです。

GoogleのreCAPTCHAの管理画面から不審なリクエストの総数などを確認できるので、効果を実感しやすいです。

reCAPTCHAのデメリット

デメリットはありません。reCAPTCHAの導入はメリットしかありません。

まとめ

reCAPTCHAはGoogleが提供している無料のスパム防止用のサービスなので、安心して利用できます。

最新バージョンのv3はバックグラウンドで動作しており、利用者の負担にならないので、reCAPTCHAを導入しないのはデメリットしかありません。

唯一の懸念点である、ページスピードの影響ですが、お問い合わせ画面にだけ、reCAPTCHAを有効にしているので、ページスピード低下の範囲を限定することができているので、SEOへの影響を必要最低限にすることが可能です。

reCAPTCHA導入後は、スパムをゴミ箱に入れる作業から完全に解放されるほど、非常に効果的です。

設定に掛かる時間は5分程と、費用対効果は抜群なので、おすすめです。

お問い合わせページ(フォーム)作成プラグイン「Contact Form 7」の設定方法はこちらの記事です↓
Contact Form 7の設定方法と使い方