WordPressサイトでreCAPTCHA v3のバッジロゴが表示されない？！

WEB

2020.05.19 UPDATE

Category：WEB

WordPressサイトでreCAPTCHA v3のバッジロゴが表示されない？！

先日お客様のサイトに鬼のようなスパムメールが来るようになったため、Google reCAPTCHAを導入することにしたのですが、設定を完了したはずなのに「reCAPTCHAのロゴが出てこない！！」という事象にハマってしまいました。

色々なサイトを巡って解決策を模索したのですが、解決に至るまで時間がかかってしまったため、備忘録的な意味も込めて記事に残しておきます。

Google reCAPTCHAとは？

Google reCAPTCHAとはGoogleが提供するシステムで、「コンピュータと人間を区別するための完全自動化された公開チューリングテスト（Completely Automated Public Turing test to tell Computers and Humans Apart）」の頭字語なのだそうです。

簡単に言えばウェブサイトにアクセスしてくるボットなどに対して、ロボットか人間かを判断するシステムのことで、何かに登録したりログインしたりする時「私はロボットではありません」にチェックしたり、信号機や車の画像をチェックするあれです。

実は上記の画像を選択するようなものは「Google reCAPTCHA v2」で、2018年にユーザーが操作することなくウェブサイトへの不正なトラフィックを検出できる最新のAPIとしてGoogleから「Google reCAPTCHA v3」がリリースされました。要は自動で怪しいアクセスはブロックしてくれるということです。

実際鬼のようなスパムに悩まされていたお客様のサイトも、「Google reCAPTCHA v3」を導入したところピタッとスパムが止まりました。

利用環境

今回はスパムに悩まされているお客様のためいつも通り「Google reCAPTCHA v3」を導入しようとしたら、ロゴが表示されないという事象が発生しました。

利用していたCMSはWordPressで、reCAPTCHAを導入するために試したプラグインはcontact form 7と、Invisible reCAPTCHA for WordPressです。

上記2つのプラグインの違いをざっくり説明すると、「contact form 7」は全てのページにreCAPTCHAのロゴが表示され、「Invisible reCAPTCHA for WordPress」では表示できるページをある程度限定することができます。今回はLP型で1ページしかないので私は「contact form 7」を採用しました！

【参考サイト】

「contact form 7」と「Invisible reCAPTCHA for WordPress」の導入は下記サイトを参考にさせて頂きました。

・reCAPTCHA v3+WordPressの設定方法、フォームへの設置手順
・Google reCAPTCHA v3の導入とContact Form7への設定方法完全ガイド 2020年版

エラー解消のためにチェックしたこと

①サイトキーとシークレットキーの確認

当然ですがサイトキーかシークレットキーが間違っているとうまく設定ができないため、一応Google reCAPTCHAの管理画面から再度コピペをし直しました。しかしエラーは解消されませんでした。そもそも問題が発生している場合はディベロッパーツールのコンソール画面にエラーがでるのですが、そちらも見受けられず・・・なぜ！

②表示箇所における他要素と重なり

まれにz-index等の条件によってはGoogle reCAPTCHAの表示部分と他要素が被ってしまい、ロゴがしたに潜り込んでしまい表示されないとうケースがあるようです。可能性は低いと思いましたが、結構前に作ったサイトのなので念のため確認しました。しかしHTMLソースを確認したところロゴ自体のコードが出力されていませんでした。

結果：「wp_footer();」の書き忘れ

問題なくロゴが表示されているサイトと構成を比較していたところ、「あれ、wp_footer書いてないぞ？」と気付き、入力したところ・・・無事表示されました！！！

普段は必ず記述しているんですが、何かの拍子に削除してしまったようです。制作者としてお恥ずかし限りです・・・。あまりwp_footerを書き忘れるというケースはないかもしれませんが、もし同様なケースでお困りであれば試してみてください！