【2025年版】『reCAPTCHA v3』をWordPressのサイト&Contact Form7で表示させる方法
今までをWordPress(ワードプレス)で作ったサイトの「問い合わせページ」をContact Form7で作成し、『reCAPTCHA v3』をそこに設定し、左側に表示させる方法の記事をいくつか書いてきました。ですので新たにサイトを作成した時は、それらの記事を元に『reCAPTCHA』を設定&表示させてたのですが、先ほど(2025年1月)新たなサイトに『reCAPTCHA v3』を設定しようとしたら、『Google Cloud Platform』の項目が増えていて、今までの記事の方法では先に進めなかったんですよね。。
と言うわけで今回は【2025年版】として、「『reCAPTCHA v3』をWebサイトで表示させる方法」を書きたいと思います。
目次
『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:一覧
『reCAPTCHA v3』にサイトを登録をする
『Google Cloud Platform』の項目以外は大きく変わってないので、それ以外のことについては、今までの記事『『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1』等に記載しているので、ここではこの『Google Cloud Platform』の項目も含めた設定&登録する方法を改めて。
サイトの登録をする
まず、『reCAPTCHA v3』を使用するには、使用するサイトを登録して「API キー(reCAPTCHA の API を使用するためのキー)」を取得する必要があるので、
https://www.google.com/recaptcha/admin/ からサイトの登録をします。API キーの管理などもこちらから行うことができます。
(これは「Googleのユーザーアカウント」に登録している必要がありますが、Googleのユーザーアカウントには登録されている前提で進めます。)
上記のように必要情報を入力&選択して 送信(登録:Register)します。
問題なく登録されると以下のようなページに推移し、サイトキーとシークレットキー(APIキー)が表示されるので、コピー or このページは開いたままにしておきます。
APIキーは、設定の画面からも確認することもできますので『画面消しちゃった。。』といった場合でも、焦らなくても大丈夫です。
ちなみにこの『Google Cloud Platform』のプロジェクトは、今までは気にしなくて良かったのですが、reCAPTCHAのセキュリティを強化するため色々アップデートされているようで、現在の仕様として『登録したサイトごとに作る必要がある』ようになったようです。
ですので、今まで作成したものはそのまま問題なく使えるようですが(2025年1月時点)、今後は『reCAPTCHA-for-サイト名』のように、わかりやすくすると良いかもしれませんね。
WordPressに『reCAPTCHAのAPIキー』を登録する
以下は以前と同様です。
サイドメニューの「お問い合わせ」の「インテグレーション」の「インテグレーションのセットアップ」に、先ほど入手したサイトキーとシークレットキー(APIキー)をコピペし、登録します。
これで、reCAPTCHAがサイトに表示され、Contact form7でエラーも出なくなります。
ですが、このままでは
- 全ページの右下に『reCAPTCHA』アイコンが表示される。
- ページトップに戻るのボタンなどとかぶると、邪魔で邪魔で仕方ない。。
などの気になる点は残ったままになりますので、その対策もしたい方は、以下をチェックして対策してくださいね!
Google AdS
関連記事
-
Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法
Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…
-
Youtube動画がWordPressで思い通りに表示されない原因と解決方法!レスポンシブ・URLをそのまま表示・横並び配置等
WordPress(ワードプレス)の投稿にYoutubeの動画を表示させたい時、URLをそのまま貼るだけで自動でこんな感…
-
<head>タグの記述例=順番等もきちんと考えた雛形(テンプレート)
一度サイトを作ってしまうと、あまり見直すことのないheadタグ内の記述。新たなLPを作ったりする時でも、以前作ったものの…
-
共通パーツ(header,footer等)をPHPで読み込んで編集を楽にする方法
headerやfooterに限らず、同じパーツを使っている場合は、共通パーツを読み込ませて管理した方が断然楽ちんです。で…
-
WindowsのSafariで【background】が効かない時の原因と対処方法
最近cssではショートハンドを使って記述するのが当たり前になってきたので(ショートハンドの詳細はこちら)、今回トラブルと…