reCAPTCHA v3のバッジをフォームのあるページだけに表示させる方法:プラグインInvisible reCAPTCHAを使おう

2020年7月4日WordPress関連,WordPressプラグイン編

reCAPTCHA v3のバッジをフォームのあるページだけに表示させる方法:プラグインInvisible reCAPTCHAを使おう
カイエダ

おもてなしブログ®︎専門家カイエダです。
こちらの記事で、以前フォーム経由で送られてくるスパムメール対策として「reCAPTCHA v3」の設定の仕方を紹介しました。

カイエダ

難点があって、Contact Form 7で reCAPTCHA v3 を設定すると、全ページにバッジが表示されてしまうんですよね。

フォームページのみの表示としたい場合は、functions.phpを編集すればよいのですが、少しハードルが高いです。
 
そこで今回は、プラグイン「Invisible reCAPTCHA」を使って、フォームのあるページだけにreCAPTCHA v3のバッジを表示させる方法をお伝えします。

プラグイン Invisible reCAPTCHA for WordPress を使って、必要な場所にだけバッジを表示させる設定方法

すでに Contact Form 7 のインテグレーションで、v3の設定を行っている場合

設定が重複してしまうため、事前にContact Form 7の設定ページで、サイトキーとシークレットキーを削除しておきましょう。
のちほど、ここに記載されていたサイトキーとシークレットキーは使いますので、テキストエディタ等に控えておいてください。

サイトキー、シークレットキーを入力
赤枠内に入力していたサイトキーとシークレットキーを消す

まだGoogle reCAPTCHA でキーを取得していない場合

カイエダ

こちらのページにある取得方法に沿って取得してみてください。

つづいて、プラグイン Invisible reCAPTCHA for WordPress の設定の手順に移ります。

プラグイン Invisible reCAPTCHA for WordPress の設定

1、インストールして有効化

ダッシュボードの【プラグイン】>【新規追加】で、キーワードに【Invisible reCAPTCHA for WordPress】と入力しインストール後、有効化してください。

Invisible reCAPTCHA for WordPressを検索
Invisible reCAPTCHA for WordPressを検索
Invisible reCAPTCHA for WordPressインストール後、有効化する
Invisible reCAPTCHA for WordPress
インストール後、有効化する

2、設定に移動

設定から、Invisible reCAPTCHAをクリック。

【設定】>【Invisible reCAPTCHA】へ
【設定】>【Invisible reCAPTCHA】へ

3、基本設定でサイトキー、シークレットキーを入力

Settingsタブが出てきます。
「Settings」の画面で設定する項目は以下です。
基本設定でサイトキー、シークレットキーを入力
  • Your Site Key
    サイトキーを貼り付けます(画像ではグレーに塗りつぶしているところ)。
  • Your Secret Key
    シークレットキーを貼り付けます(画像ではグレーに塗りつぶしているところ)。
  • Language
    reCAPTCHAの表示言語の設定です。
    「Automatically detect(自動判別)」もしくは「Japanese」を選択します。
  • Badge Position:reCAPTCHAのバッジをどこに表示させるかの設定です。
    • 「Bottom Right(ページ右下)」
    • 「Bottom Left(ページ左下)」
    • 「Inline(フォームに埋め込み)」

    より選択。
    私はBottom Left(ページ左下)が好みですが、Inline(フォームに埋め込み)も邪魔にならなくてオススメです。

設定後「変更を保存」ボタンをクリックします。
つづいて、タブ一番下にある「Contact Forms」をクリックして設定画面を切り替えてます。

4、Contact Formsで設定

Contact Formsで設定

ここでは「Enable Protection for Contact Form 7( Contact Form 7の保護を有効にする)」にのみチェックをして「変更を保存」ボタンをクリックします。

「Contact Form 7」以外のプラグイン「Gravity Forms」に対しても設定ができるようですが今回はこちらはチェックしません。

なお、プラグインInvisible reCAPTCHA for WordPressでは、画面を切り替えることで以下の設定もできますが、Contact Forms 7の設定のみで問題ありません。

  • WordPress
  • WooCommerce
  • UltraCommunity
  • BuddyPress

5、フォームページとその他のページも確認

コンタクトフォーム確認
バッジの配置がBottom Left(ページ左下)の場合
バッチの配置がInline(フォームに埋め込み)の場合
バッジの配置がInline(フォームに埋め込み)の場合

フォームページで表示を確認してみます。「Bottom Left」「Inline」を選択すると、邪魔にならない位置に表示できます。
フォームが入っていないページではreCAPTCHA v3のバッジが表示されていませんでした。

まとめとして

カイエダ

このように、プラグイン Invisible reCAPTCHA for WordPress を使うと、reCAPTCHA v3 のキーの設定と表示箇所の設定が簡単に行えます。

私のブログのように、ページにいたるところに登録フォームがある場合は、reCAPTCHA v3を常に表示させておいたほうがよいのですが、問い合わせのページでのみフォームを使っている場合などは、全部のページでreCAPTCHA v3を表示する必要はないですもんね。

便利なプラグインですので、表示が気になる・・・!という方はぜひ試してみてください。


おもてなしブログ®︎最新情報はメルマガから▼