Question
Google reCAPTCHA について
- い いろはに
-
Google reCAPTCHA V3を導入しましたが
問い合わせフォーム以外のページにもreCAPTCHAが表示されてしまいました。
reCAPTCHAをContact form 7だけに表示するようにする為に
プラグイン「Invisible reCaptcha」を導入しようと思いますが
JIN:Rでの動作がおかしくなるリスクはありますか？
この方のブログを参考に導入を考えています。
『https://nowaki.work/recaptcha』
また他にオススメのreCAPTCHAをContact form 7だけに表示する方法はありますか？
- WP 6.7.1
- JIN:R 1.4.0
- Conoha Wing
- Edge
- Windows11
-
こんにちは！
2025/06/27 09:57画像とURLありがとうございます！
Invisible reCaptcha はアップデートがしばらく止まっているはずなので、JIN:Rに限らず、あまり推奨できないですね...
こちらの公式ドキュメントに非表示にする方法が書かれています↓
（非表示にするだけでなく、追加でテキストを書く必要がありますのでご注意ください）
https://developers.google.com/recaptcha/docs/faq?hl=ja#id-like-to-hide-the-recaptcha-badge.-what-is-allowed
ただ、これだと全てのページで非表示になるので、公式で案内されているCSSの下に、特定のページで表示させるコードを書く必要がありますね。
（CSSは管理画面「外観」>「カスタマイズ」にある「追加CSS」に記入）
/* まず全ページで非表示 */
.grecaptcha-badge {
visibility: hidden;
}
/* 特定のページ（例：IDがxx）で表示 */
body.page-id-xx .grecaptcha-badge {
visibility: visible !important;
}
ご参考になれば幸いです！
ご確認よろしくお願いいたします...！
初心者で申し訳ございません。
追加CSSについて挿入する箇所は既存のCSSが記載されている最後に挿入しましたが、エラーが出てしまいました。どこに挿入すればよろしいでしょうか？
また、問い合わせフォームのIDは147なので追加するCSSは下記の通りでよろしいでしょうか？
/* まず全ページで非表示 */
.grecaptcha-badge {
visibility: hidden;
}
/* 「お問い合わせ」ページ（ID: 147）で表示 */
body.page-id-xx .grecaptcha-badge {
visibility: visible !important;
}
2025/06/27 20:42画像ありがとうございます！
2025/06/29 21:30ひとまず、管理画面「外観」>「カスタマイズ」にある「追加CSS」の先頭に記入してみていただけますか....？
.grecaptcha-badge {
visibility: hidden;
}
body.page-id-147 .grecaptcha-badge {
visibility: visible !important;
}
よろしくお願いいたします！
返信ありがとうございます。
実施してみましたが、マークアップはCSS内では使えないと出てしまいました。
chat GPTで改善出来ないか質問したところ、非表示にすることは禁止に該当すると
なっていました、しない方がいいでしょうか？
2025/07/01 21:56