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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress管理画面から…

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

そのなかの…

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

すでにこのなかに…

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

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

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

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

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

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

ということで…

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

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

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

について

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

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

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

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

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

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

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

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

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

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

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

について

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

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

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

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

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

↑ こちらの…

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

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

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

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

お次はその下の…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これで…

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

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

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

【WordPress】タブを開くと…

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

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

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

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

あとは、１つ目の…

にチェックを入れると…

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

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

ということで…

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

ここまでお疲れさま！

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