reCAPTCHAをContact Form7で使用していると、全てのページにロゴが表示されてしまいますので、それをなんとかする方法を書いてみたいと思います。
基本ルール
reCAPTCHA v3を実装すると、保護マークが全ページの右下に表示されるようになります。
これがデフォルトです。全てのページに表示されます。気にならない方はそのままにすれば良いと思います。
でも、お問い合わせフォームでしか、reCAPTCHAを使用していないというつもりなのに、全ページに表示されるのって、と思う方も多いと思います。
マークの代わりに文字を表示する
下記にロゴの代わりにテキスト表示の方法が書かれています。なので、テキストを表示すれば、ロゴを非表示にしてもいいという話になります。
https://developers.google.com/recaptcha/docs/faq
英語だとこちら
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.日本語だとこんな感じ？
このサイトはreCAPTCHAによって保護されており、Googleの<a href = "https://policies.google.com/privacy">プライバシーポリシー</a>と<a href = "https://policies.google.com/terms">利用規約</a>が適用されます。
こちらをfooterとかに記載すれば、ロゴの代わりになると思います。
まずは、上記のテキストを全ページに表示されるようにfooter.phpや、フッターあたりに表示されるウィジェットがあるなら、そちらに入れます。
その上で、CSSに下記を記載して、ロゴを消します。
.grecaptcha-badge { visibility: hidden; }これでロゴを消して、テキストに切り替えたという状態になると思います。
お問い合わせフォームのページのみにしたい場合
そもそもお問い合わせフォームのためにreCAPTCHAを使用しているんだ！他のページには、フッターにも表示させたくないと思う方も多いと思います。
前提のルールとしては、reCAPTCHAが保護している全てのページにロゴもしくはテキストを表示させる必要があります。
じゃあどうしたらですが、お問い合わせフォームだけにreCAPTCHAを読み込ませれば良いんじゃないかという話になります。
個人的にはそのほうが、他のページが軽くなったりすると思いますし、利用していない機能を全てのページに入れるのって、ちょっとどうかなというのもあります。
では方法ですが、function.phpに下記をいれます。
例えば、お問い合わせフォームの場合、URLがcontactだと、slagが「contact」です
/*----------------------------------------------------
recaptcha
----------------------------------------------------*/
add_action('wp_enqueue_scripts', function() {
// recaptchaを表示させたい固定ページのslugを指定します。複数OK
$page_list = [
'contact', // お問い合わせフォーム
];
if(is_page($page_list)) return;
wp_deregister_script('google-recaptcha');
}, 100);
複数の場合もあると思います。お問い合わせフォーム、資料請求、代理店募集とか。
そんな場合は、下記のように足してください。
/*----------------------------------------------------
recaptcha
----------------------------------------------------*/
add_action('wp_enqueue_scripts', function() {
// recaptchaを表示させたい固定ページのslugを指定します。複数OK
$page_list = [
'contact', // お問い合わせフォーム
'request', // 資料請求
'salesagency', // 代理店募集
];
if(is_page($page_list)) return;
wp_deregister_script('google-recaptcha');
}, 100);
ちなみにこちらをアップする前に、お問い合わせフォームにテキストを入れ忘れないようにしましょう。
これです。
このサイトはreCAPTCHAによって保護されており、Googleの<a href = "https://policies.google.com/privacy">プライバシーポリシー</a>と<a href = "https://policies.google.com/terms">利用規約</a>が適用されます。
こんな感じで、確認ボタンの下あたりでも良いと思います。
特定のページのみに、reCAPTCHAが読み込まれたかどうか確認する方法ですが、基本はhtmlソースを見れば確認できると思いますが、それよりも簡単なのは、CSSでロゴを消す前に、先にfunction.phpをアップすれば良いと思います。
function.phpの記載に間違いがなければ、該当するcontactフォームのページのみにロゴマークが出ていると思います。
それを確認した上で、CSSでロゴを非表示にすれば良いと思います。
注意点
新たにフォームのページを増やした場合は、忘れずに必ずfunction.phpにも読み込みを追加しましょう！
おそらく上記の処理が影響したのだと思っていますが、新たにフォームのページを増やした際に、Contact Form7がうまく送信されなくて、あれ？となった時がありました。reCAPTCHA忘れてたと思って、読み込みを追加したら問題なく送信できました。そのような場合もあると思うので、フォームを増やす際は、読み込みの追加も忘れないようにしましょう！
コメントをどうぞ