【2021年】WordPressのreCAPTCHA v3保護マークを「お問い合わせフォームのみ表示」にするやり方【Invisible reCaptcha for WordPressを使用】

あずきです🐥

WordPressで極めて便利なプラグインの1つ…

について、その導入手順と設定方法をブログ初心者さん向けに1から解説していきます

まず！

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

を、「Contact Form 7」などから通常の手順でWordPressへ導入すると「ブログの全ページに表示」されてしまう…

について、「全ページ表示」ではなく「指定した箇所だけ表示」にできるプラグインです

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

ということで、今回は3つのステップで丁寧に解説していきます

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

2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、

・役に立ちました！
・わかりやすかったです！

みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF

— あずき@ブロガー (@azuki_rinrin) July 13, 2020

【2021年】WordPressのreCAPTCHA v3保護マークを「お問い合わせフォームのみ表示」にするやり方【Invisible reCaptcha for WordPressを使用】

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

まず大事な準備として、今回のプラグイン「Invisible reCaptcha for WordPress」を導入する前に、すでにWordPress側に貼り付けてある…

が仮にある場合は、両キーの貼り付けを最初に外しておきましょう

ここでは例として、「reCAPTCHA 3」をWordPressへ導入する方法として代表的な…

にサイトキー＆シークレットキーを貼ってある場合の、「キーの外し方」をご紹介していきます

サイトキーとシークレットキーをWordPress側にまだ貼ってない場合、このステップは飛ばしてOK！

WordPress管理画面から…

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

そのなかの…

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

すでにこのなかに…

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

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

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

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

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

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

ということで…

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

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

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

について

WordPress管理画面の左側にある一覧メニューから…

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

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

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

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

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

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

ここから肝心の設定方法に入っていくよ！

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

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

について

WordPress管理画面の左側メニューから…

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

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

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

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

↑ こちらの…

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

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

↑「Language」という項目については、通常「Automatically detect」のままでOKです

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

お次はその下の…

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

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

といったデメリットがあるので、自分は…

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

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

その下の「Badge Custom CSS」という項目は、通常そのままでOK！

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

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

↑ こちらの【Contact Forms】というタブをクリックします

「変更を保存」ボタンをクリックしないままタブを切りかえちゃうと、さっきの設定がリセットされるので気をつけよう！

【Contact Forms】タブでは…

↑ このように、「reCAPTCHA v3」を有効にする対象の「お問い合わせフォーム作成ツール」を選択します

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

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

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

これで、「Contact Form 7」で作成したお問い合わせフォーム内に…

がもう表示されるようになります

最後に！

左側のタブ一覧から…

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

【WordPress】タブを開くと…

↑ このように、4つの項目が並んでいます

上から順に…

という意味なので、お問い合わせフォームのほかにも「reCAPTCHA v3」を有効にしておきたい送信フォームがブログ内にあれば、ここで指定しておきましょう

参考までに、自分はすべて「チェックなし」のままだよ！

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

にチェックを入れておくと、スパムコメント対策になります

あとは、1つ目の…

にチェックを入れると…

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

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

ということで…

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

　第４章　プラグイン 編　　　　　　　　　

　第５章　サイトマップ 編　　　　　　　　

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

2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、

・役に立ちました！
・わかりやすかったです！

みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF

— あずき@ブロガー (@azuki_rinrin) July 13, 2020