フォーラムをリニューアルしました！
今後は、新フォーラムをご利用ください。
ページ背景画像とGoogle reCAPTCHA v3のバッジ表示干渉？問題 < 不具合報告
通知
すべてクリア
Topic starter
お世話になります。
Contact Form7を利用してContactページを作成。
またGoogle reCAPTCHA v3のバッジをContactページのみに表示させようとしたのですが、、、
（子テーマのfunctions.phpに書き込みをして）１つのサイトは狙い通りにできたのですが、
もう一つのサイトは表示させることができませんでした。
２つのサイトとも使用中のプラグインも同じ、設定もほぼ同じの条件だったのですが検証してみたところ、
ページ背景画像を入れた場合のみ、reCAPTCHA v3バッジが表示されなくなるようです。
ご参考までに比較用のテストページです↓
↑のテストページで利用しているプラグインは下記のとおりです。
- All In One WP Security
- Contact Form 7
- Protect Uploads
- WP Multibyte Patch
お手数をおかけしますがよろしくお願いいたします。
投稿済 : 25/06/2021 8:31 am
また、具体的にはどのようなコードを入れられていますか？こちらではfunctions.phpに記述したコードは閲覧できないため、参考にしたURLなどを共有していただけますか？
にゃーん .
投稿済 : 25/06/2021 9:52 am
Topic starter
あ、説明不足で大変申し訳ありません。
↑のテストページは親テーマでの状態です。
徹底的に素の状態、シンプルな状態でも発生しているのかどうか検証するためにこのような形にしました。
親テーマ、子テーマともにページ背景画像を入れた場合に、reCAPTCHA v3バッジが表示消えてしまう同じ症状でした。
reCAPTCHA v3のバッジをContactページだけに表示させる子テーマのfunctions.phpのコードは
こちらを参考にさせていただきました。
https://mirai-creators.com/6033/
テストページとは別のサイトでページ背景画像を入れなかったサイトには、参考にさせて頂いたコードで狙い通りにできています。
投稿済 : 25/06/2021 11:06 am
了(開発者) reacted
Topic starter
見づらくなってしまい大変恐縮ですが、
たとえばカスタマイズ画面でも、ページ背景画像を 「画像ループを無効にする」に
チェックするとreCAPTCHA v3のバッジが見えるようになります。
投稿済 : 25/06/2021 11:21 am
まず、線引きをしますが、そもそも
- 子テーマと仰っているのに子テーマが有効になっていない＝こちらでは親テーマに書き込んでいるかどうかが判別つかないので判断材料になりにくい（ただでさえfunctions.phpに記述したコードは見えない）→子テーマが有効になっていないことにそもそも原因がある部分も疑う
- CSSやJSであれば問題なく閲覧できるが、functions.phpに何を書いているかがわからないと判断のしようがない（共有していただいても、場合によってはカスタマイズはサポート外の判断を下すこともある）
ので、必ず情報は過不足のないようにご共有ください。
そして、参考にしたURLを共有してくださいとお伝えしたのは、著作権的な事情からコードをここにコピペすることを防ぐためです。（オリジナルのコードであれば、出せるのであれば書いていただいてもOK。ただし、出せない場合はサポート自体が物理的に不可能な場合があります）
後ほど、HTMLを読むなどして確認しますが、そこに更に私が書いた記事（手前味噌）で恐縮ですが、reCAPTCHA v3のバッジが表示されるページも、Google公式通りにペナルティを受けない方法で非表示にする方法を併用して、そもそも物理的にこの問題自体を解消するのはいかがでしょうか。
https://tecchan.jp/entry/200630-recaptcha/#index_id2
これに関するGoogle公式の情報は以下のページの"I'd like to hide the reCAPTCHA badge. What is allowed?"です。
https://developers.google.com/recaptcha/docs/faq
※もちろん、調査してどのように「表示されない」状態になっているかは確認してみますが。
This post was modified 3年前 2回 by しらこ
にゃーん .
投稿済 : 25/06/2021 11:37 am
cos reacted
Topic starter
しらこ様
ご助言、対処法、誠にありがとうございました。
私はプログラマーではなく素人なので、このフォーラムに書き込む際は必要事項等気をつけないと！
と思っていたのですが全然足りませんでしたね…。
ましてやもっとシンプルに状況説明できたたはずなのに、より複雑に説明してしまい大変失礼いたしました(汗)。
早速、別の本来のサイトの方を教えてくださった方法と
functions.phpに書き込む方法（トップページの読み込み速度向上も兼ねて）
を併用してやってみようと思います。
投稿済 : 25/06/2021 1:38 pm
この件、確認しました。
Google reCAPTCHAバッジ自体は存在しており、この現象は「背景画像を有効にして、かつGoogle reCAPTCHAのバッジの位置に背景画像が重なり合っているとき」にのみ発生します。背景画像が存在しても、重なり合っていないときには発生しません。したがって、単純に重なり順の問題でした。
背景画像は、
#body_wrap {
background url(画像のURL) repeat left top;
}
で指定されて（読み込まれて）いるのですが、この背景画像のz-indexが1に指定されているため発生しており、直接の解決法としてはz-indexを
#body_wrap {
z-index: 0;
}
もしくは
.grecaptcha-badge {
z-index: 2;
}
と指定することで解決されます（数字が大きいほうが、重なり順として上部に来ます）。
This post was modified 3年前 5回 by しらこ
にゃーん .
投稿済 : 26/06/2021 11:29 am
cos reacted
↑補足。上記は背景画像が繰り返される場合で、繰り返されない場合などについては、発行される#body_wrapに記述されるCSSが変更になるかと思います。（念の為正しい表現をしたいので）
にゃーん .
投稿済 : 26/06/2021 12:49 pm
Topic starter
>しらこ様、了様
原因究明、解決策ありがとうございました。
Z-indexの問題だったんですね。大変勉強になりました。
投稿済 : 01/07/2021 6:01 am
しらこ reacted