WORDPRESS

【2023年】reCAPTCHA v3保護マークをお問い合わせフォームのみに設定するやり方。「Invisible reCaptcha」使用【ワードプレスブログ完全初心者ガイド/第4章/No.12】

reCAPTCHA v3保護マークをお問い合わせフォームのみに設定するやり方。「Invisible reCaptcha」使用【ワードプレスブログ完全初心者ガイド/第4章/No.12】
 

専業ブロガー6年目のあずき猫です

 

WordPressで重宝するプラグインの1つ…

Invisible reCaptcha for WordPress

について、導入手順から「おすすめな設定方法」までブログ初心者さん向けに1から解説していきます

 



 

reCAPTCHA v3保護マークをお問い合わせフォームのみに設定するやり方。「Invisible reCaptcha」使用 top-01

 

「Invisible reCaptcha for WordPress」は、Googleが提供している代表的なスパム防止ツール…

reCAPTCHA v3

の「補助的な役割」をもつ、無料プラグインです

 

具体的には、「reCAPTCHA v3」側でまずサイト登録を済ませたうえで、WordPressプラグイン「Contact Form 7」の設定画面で…

  • サイトキー
  • シークレットキー

の2つを貼りつけると、本来はブログ内の「全ページ」に適用されてしまう…

reCAPTCHAのバッジ(保護マーク)

を、「指定ページのみ」の適用にカスタマイズすることができます

指定ページっていうのは、例えば「お問い合わせフォーム」とか「コメント欄」のことだよ!
 

ということで、今回のステップは3つです

  1. WordPressに「reCAPTCHA v3」のサイトキー&シークレットキーを貼りつけてある場合は、最初に外しておこう!
  2. 「Invisible reCaptcha for WordPress」の導入手順
  3. 「Invisible reCaptcha for WordPress」の設定方法
    ※「reCAPTCHA v3」を指定ページのみ(例:お問い合わせフォーム)に適用させ、そのほかのページから保護バッジを外すやり方です

さっそく見ていきましょー🐥

 

はじめに

ご紹介する一連の手順は、「reCAPTCHA v3」にて…

  1. サイト登録
  2. サイトキー&シークレットキーの取得

というステップをすでに済ませていることが前提となります

 

上記がまだお済みでない場合は、お先にこちらをどうぞ ↓

reCAPTCHA v3登録手順とContact Form 7への設定方法。スパム対策【ワードプレスブログ完全初心者ガイド/第4章/No.11】
【2023年】reCAPTCHA v3登録手順とContact Form 7への設定方法。スパム対策【ワードプレスブログ完全初心者ガイド/第4章/No.11】

続きを見る

 

【2023年】reCAPTCHA v3保護マークをお問い合わせフォームのみに設定するやり方。「Invisible reCaptcha」使用【ワードプレスブログ完全初心者ガイド/第4章/No.12】

ステップ1:WordPressに「reCAPTCHA v3」のサイトキー&シークレットキーを貼りつけてある場合は、最初に外しておこう【プラグイン「Contact Form 7」を例に解説】

WordPress ヘッダー c-01

まず事前の準備として、今回のプラグイン「Invisible reCaptcha for WordPress」を導入する前に…

「reCAPTCHA v3」のサイトキー&シークレットキー

をWordPress側に貼り付けてしまっている場合は、両キーを最初に外しておきましょう

 

ここでは例として、「reCAPTCHA v3」のWordPressへの導入手段として代表的な…

Contact Form 7

を例に、サイトキー&シークレットキーの「外し方」をご紹介していきます

そもそも貼ってない場合、この【ステップ1】は飛ばしてOK!
 

WordPress管理画面から…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-1-01

↑ お問い合わせ > インテグレーション をクリックしましょう

 

そのなかの…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-1-02

↑「インテグレーションのセットアップ」というボタンをクリックします

 

すでにこのなかに…

  • サイトキー
  • シークレットキー

という「reCAPTCHA v3」の両キーを貼りつけている場合は…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-1-03-a

↑ このように「2つのキー」が表示されるので、WordやExcelなどに一旦コピーして控えておきましょう

このサイトキーとシークレットキーは、このあと別のところで使うよ!
 

関連

 

サイトキー&シークレットキーを控えたら、その下の…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-1-03-b

↑「キーを削除」というボタンをクリックして、この両キーを「Contact Form 7」から外します

これで「reCAPTCHA v3」は一旦無効になって、全ページに表示されてた保護バッジも消えるよ!
 

ということで…

 

ここからプラグイン「Invisible reCaptcha for WordPress」を導入し、サイトキー&シークレットキーを「別の方法」で再度貼りつけていきます🐥

 

ステップ2:WordPressプラグイン「Invisible reCaptcha for WordPress」の導入手順【インストールと有効化】

WordPress ヘッダー c-02

注意

プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください(ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります)

【2023年】BackWPupのおすすめ設定方法。自動バックアッププラグイン【ワードプレスブログ完全初心者ガイド/第4章/No.2】

続きを見る

 

つづいて2つ目のステップは…

プラグイン「Invisible reCaptcha for WordPress」の導入手順

について

 

WordPress管理画面の左側一覧から…

WordPressプラグインのインストール手順 1-01

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう

 

つづいて、画面の右上にある…

WordPressプラグイン インストール 1-02

↑ こちらの検索フォームに Invisible reCaptcha for WordPress と入力し、その下の検索結果から…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-2-01

↑ このアイコンが目印のプラグイン「Invisible reCaptcha for WordPress」を探して、右上の「今すぐインストール」ボタンをクリックします

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ!
 

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

 

WordPressプラグイン インストール 1-03

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール&有効化」は完了です

今度は肝心の設定方法について見ていこう!
 

ステップ3:「Invisible reCaptcha for WordPress」の設定方法【reCAPTCHA v3を「お問い合わせフォーム」などのみ有効にし、残りのページからバッジ表示を消すやり方】

WordPress ヘッダー c-03

最後の3つ目のステップは…

「Invisible reCaptcha for WordPress」の設定方法

について

 

WordPress管理画面の左側一覧から…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-1-01

↑ 設定 > Invisible reCaptcha をクリックしましょう

 

「Invisible reCaptcha」の設定画面を開いたら、左側に表示されているタブ一覧については…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-2-01

↑ こちらの【設定】タブのままで、一旦OKです

 

まずは上側に表示されている…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-2-02

↑ こちらの…

  • サイト鍵(サイトキー)
  • 秘密鍵(シークレットキー)

という2つのフォーム内に、「reCAPTCHA v3」のサイトキー・シークレットキーをそれぞれ貼りつけましょう

 

関連

「reCAPTCHA v3」サイトキーとシークレットキーの取得方法や、わからなくなってしまった場合の対処法はこちらをどうぞ ↓

reCAPTCHA v3登録手順とContact Form 7への設定方法。スパム対策【ワードプレスブログ完全初心者ガイド/第4章/No.11】
【2023年】reCAPTCHA v3登録手順とContact Form 7への設定方法。スパム対策【ワードプレスブログ完全初心者ガイド/第4章/No.11】

続きを見る

 

両キーを貼りつけたら、その下の…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-2-03

↑「言語」という項目については、通常「自動検出」のままでOKです

「言語を自動判別する」っていう意味だよ!
 

お次はその下の…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-2-04-a

↑「バッジ位置」という項目ですが、ここで「reCAPTCHA v3」のバッジ(保護マーク)を表示させる「位置」を指定できます

 

デフォルトでは「右下」になっていますが、このままだと「保護マーク」の表示が…

  • 画面スクロールに「追尾」する仕様となり、ユーザーにとって邪魔になりやすい!
  • Webサイトで一般的な「トップに戻るボタン」と、位置が「重複」しやすい!

といったデメリットがあるので、当ブログでは…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-2-04-b

↑ こちらの「インライン」に切り替えています

 

「インライン」に設定することで、バッジの表示が「隅っこ」ではなく「入力フォームの近く」に変更される形です

その下の「バッジのカスタム CSS」という項目は、通常そのままでOK!
 

ということで、ここまで設定できたら「変更を保存」ボタンをクリックしましょう🐣

 

つづいて、左側のタブ一覧から…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-3-01

↑ こちらの【お問い合わせフォーム】というタブをクリックします

「変更を保存」をクリックせずにタブを切りかえると、さっきまでの設定が消えちゃうから気をつけよう!
 

【お問い合わせフォーム】タブでは、「reCAPTCHA v3」を有効にする対象の「お問い合わせフォーム作成ツール」を選択します

 

今回の例のように、プラグイン「Contact Form 7」を使っている場合は…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-3-02

↑「Contact Form 7の保護を有効化」という項目にチェックを入れて、また「変更を保存」ボタンをクリックするだけでOKです

繰り返しだけど、保存しないままタブを切りかえると、設定が保存されないから注意だよ!
 

これで…

「reCAPTCHA v3」のバッジ(保護マーク)

が、「Contact Form 7」で作成したお問い合わせフォーム内にのみ適用・表示されるようになります

 

最後に、左側のタブ一覧から…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-4-01

↑ こちらの【WordPress】というタブをクリックしましょう

 

【WordPress】タブを開くと…

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方 1-3-4-02

↑ このように4つの項目が並んでいるので、もしもお問い合わせフォーム以外にも「reCAPTCHA v3」を有効にしておきたい送信フォームがブログ内にあれば、ここで指定しておきましょう

参考までに、自分は4つとも「チェックなし」のままにしてるよ!
 

例えば「コメント欄」をブログに置いている場合であれば、3つ目の…

  • コメントフォームの保護を有効化

にチェックを入れておくと「スパムコメント対策」になりますが、当ブログでは「コメント欄」をそもそも置いていないため「チェックなし」のままです

 

あとは、1つ目の…

  • ログインフォームの保護を有効化

にチェックを入れると…

WordPress管理画面へのログイン時

にも「reCAPTCHA v3」保護バッジが適用されるようになりますが、万が一ログインできなくなったりしたら怖いので、こちらも自分はチェックを入れていません

4つ目の「パスワードを忘れた場合の…」という項目も一緒!
 
 

ということで…

 

ここまでできたら、最後にまた「変更を保存」ボタンを忘れずにクリックして、今回の設定については一通り完了となります🐥

ここまでお疲れさま!
 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

「全8章」の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

当サイトでは、このサイト経由で商品やサービスを購入・契約していただくことで当サイトに紹介料が入る【アフィリエイトリンク】を使用しております

これは私(あずき猫)にとってのサイト運営というものが「1つの事業」であり、必要経費はもちろんのこと、それ以上に「膨大な時間やエネルギー」を費やしているためですが、ただ惜しむらくは当該システムを使用していることによる読者様にとってのメリットは特段ないという点です

せめてもの思いとして、こうして得られた紹介料を糧に「読者様のお役に立てる記事作り」「価値のあるコンテンツ制作」に一層努めていく所存ですので、何卒ご理解のほどお願い申し上げます

当サイトでは可能な限り正確な情報を掲載するよう努めておりますが、必ずしもその正確性を保証するものではありません

読者様におかれましては、当サイトをあくまでも主観的な情報の1つとして捉えていただき、「客観的、俯瞰的な視点」をもって活用していただければ幸いです

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS