WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方【プラグイン「Invisible reCaptcha for WordPress」を使用／2022年】

専業ブロガー５年目のあずきです🐥

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

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

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

を、プラグイン「Contact Form 7」などから本来の手順でWordPressへ導入すると、ブログ内の ”全ページに表示” されてしまう…

について、全ページ表示から ”指定ページのみ表示” にカスタマイズできるプラグインです

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

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

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

WordPress「reCAPTCHA v3」保護マークをお問い合わせフォームのみ表示に設定するやり方【プラグイン「Invisible reCaptcha for WordPress」を使用／2022年】

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

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

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

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

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

サイトキーとシークレットキーを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」保護マークが表示されるようになりますが、万が一ログインできなくなったりしたら怖いので、こちらも自分はチェックを入れていません

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

ということで…

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

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

※2021年発表Infotop Affidemy