ページ背景画像とGoogle reCAPTCHA v3のバッジ表示干渉?問題 < 不具合報告

不具合報告では、その現象が確認できるURLを添えて、ご報告ください。
(+できれば画像も添付していただければ助かります。)

トピックを立てる前にチェックしてね!
  1. 初めてご利用の方は、 「フォーラムガイドライン」・「よくある質問」・「SWELLでの非推奨プラグイン」に一度は目を通しておいてください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. WordPressでの不具合が全てテーマによる不具合だとは限りません
    本当にテーマによる問題かどうか、プラグインを見直して解決しないかどうかも先に検証しておいていただけると、非常に助かります。
  4. まずはGoogleで検索してみて、自力で解決できる問題かどうかを調べてみてください。
    ここで質問しようとしている内容をそのまま検索すれば答えが見つかるかもしれません。
ページ背景画像とGoogle reCA...
 
通知
すべてクリア

[解決済] ページ背景画像とGoogle reCAPTCHA v3のバッジ表示干渉?問題

cos
 cos
(@cos)
Active Member

お世話になります。

Contact Form7を利用してContactページを作成。

またGoogle reCAPTCHA v3のバッジをContactページのみに表示させようとしたのですが、、、

(子テーマのfunctions.phpに書き込みをして)1つのサイトは狙い通りにできたのですが、

もう一つのサイトは表示させることができませんでした。

2つのサイトとも使用中のプラグインも同じ、設定もほぼ同じの条件だったのですが検証してみたところ、

ページ背景画像を入れた場合のみ、reCAPTCHA v3バッジが表示されなくなるようです。

ご参考までに比較用のテストページです↓

テスト1  背景画像あり(reCAPTCHA表示されない)

テスト2  背景画像なし(reCAPTCHA表示あり)

↑のテストページで利用しているプラグインは下記のとおりです。

  • All In One WP Security
  • Contact Form 7
  • Protect Uploads
  • WP Multibyte Patch

お手数をおかけしますがよろしくお願いいたします。

引用
Topic starter 投稿済 : 25/06/2021 5:31 pm
しらこ
(@96ssbike)
Prominent Member

テスト1・2ともに<head>~</head>内に

<link rel='stylesheet' id='child_style-css'  href='https://あなたのドメイン/wp-content/themes/swell_child/style.css?ver=2.3.9.1' media='all' />

というタグを見かけないのですが、SWELL CHILD(子テーマ)は有効になっていますか?

This post was modified 4か月前 2回 by しらこ
返信引用
投稿済 : 25/06/2021 6:37 pm
しらこ
(@96ssbike)
Prominent Member

また、具体的にはどのようなコードを入れられていますか?こちらではfunctions.phpに記述したコードは閲覧できないため、参考にしたURLなどを共有していただけますか?

返信引用
投稿済 : 25/06/2021 6:52 pm
cos
 cos
(@cos)
Active Member

@96ssbike

あ、説明不足で大変申し訳ありません。

↑のテストページは親テーマでの状態です。

徹底的に素の状態、シンプルな状態でも発生しているのかどうか検証するためにこのような形にしました。

親テーマ、子テーマともにページ背景画像を入れた場合に、reCAPTCHA v3バッジが表示消えてしまう同じ症状でした。

reCAPTCHA v3のバッジをContactページだけに表示させる子テーマのfunctions.phpのコードは

こちらを参考にさせていただきました。

https://mirai-creators.com/6033/

テストページとは別のサイトでページ背景画像を入れなかったサイトには、参考にさせて頂いたコードで狙い通りにできています。

返信引用
Topic starter 投稿済 : 25/06/2021 8:06 pm
了(開発者) 件のいいね!
cos
 cos
(@cos)
Active Member

見づらくなってしまい大変恐縮ですが、

たとえばカスタマイズ画面でも、ページ背景画像を 「画像ループを無効にする」に

チェックするとreCAPTCHA v3のバッジが見えるようになります。

返信引用
Topic starter 投稿済 : 25/06/2021 8:21 pm
しらこ
(@96ssbike)
Prominent Member

まず、線引きをしますが、そもそも

  • 子テーマと仰っているのに子テーマが有効になっていない=こちらでは親テーマに書き込んでいるかどうかが判別つかないので判断材料になりにくい(ただでさえ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 4か月前 2回 by しらこ
返信引用
投稿済 : 25/06/2021 8:37 pm
cos 件のいいね!
cos
 cos
(@cos)
Active Member

しらこ様

ご助言、対処法、誠にありがとうございました。

私はプログラマーではなく素人なので、このフォーラムに書き込む際は必要事項等気をつけないと!
と思っていたのですが全然足りませんでしたね…。
ましてやもっとシンプルに状況説明できたたはずなのに、より複雑に説明してしまい大変失礼いたしました(汗)。

早速、別の本来のサイトの方を教えてくださった方法と
functions.phpに書き込む方法(トップページの読み込み速度向上も兼ねて)
を併用してやってみようと思います。

返信引用
Topic starter 投稿済 : 25/06/2021 10:38 pm
しらこ
(@96ssbike)
Prominent Member

この件、確認しました。

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 4か月前 5回 by しらこ
返信引用
投稿済 : 26/06/2021 8:29 pm
cos 件のいいね!
しらこ
(@96ssbike)
Prominent Member

↑補足。上記は背景画像が繰り返される場合で、繰り返されない場合などについては、発行される#body_wrapに記述されるCSSが変更になるかと思います。(念の為正しい表現をしたいので)

返信引用
投稿済 : 26/06/2021 9:49 pm
了(開発者)
(@ryo)
メンバー Admin

@cos

テストページの用意までしていただいてありありがとうございます。

しらこさんがすでにおしゃってくれている通りですが、CSSのz-indexの問題ですね。

適用するCSSは

.grecaptcha-badge {
    z-index: 2;
}

の方が良いかと思います。

返信引用
投稿済 : 30/06/2021 11:56 am
cosしらこ 件のいいね!
しらこ
(@96ssbike)
Prominent Member

そうですね💦テーマ側をいじるより、.grecaptcha-badgeをいじったほうが良いですね🙏

返信引用
投稿済 : 30/06/2021 1:15 pm
cos
 cos
(@cos)
Active Member

>しらこ様、了様

原因究明、解決策ありがとうございました。

Z-indexの問題だったんですね。大変勉強になりました。

返信引用
Topic starter 投稿済 : 01/07/2021 3:01 pm
しらこ 件のいいね!
共有: