『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その2

前回書いた『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1の続きです!

reCAPTCHAを問い合わせページ&左側に表示させる2

今回は本題です。サイト登録した『reCAPTCHA v3』を、問い合わせページのみ&左側に表示させる方法です。
環境は前回同様、Wordpressで「Contact Form 7」のプラグインを使用での話になります。

『reCAPTCHA v3』を問い合わせページのみに表示させる

では早速その方法を。

まずは、functions.phpに以下の記述をします。

add_action( 'wp_enqueue_scripts', function() {
	if(is_page('contact')) return;
    wp_deregister_script( 'google-recaptcha' );
}, 100, 0);

これで「Contact Form 7」によって追加されるreCAPTCHA関連のコードがすべて読み込まれなくなるはずです!ダメな場合は最後の4行目の数値「100」を「1000」とかにしてみてください。

この最後の4行目では優先順位を「100」に指定しているのですが、ここを指定しない場合はデフォルトで「10」となるため、機能しない場合があるんです。

これがその記述です。

add_action( 'wp_enqueue_scripts', function() {
	if(is_page('contact')) return;
    wp_deregister_script( 'google-recaptcha' );
});

実は今(2021/3)まではこの記述で問題なかったのですが、新規で作ったサイトにこの記述を追加しても、なぜか機能せず全てのページで『reCAPTCHA v3』のアイコンが表示されてしまってたんですよね。

そんなわけで新たに4行目に優先順にを追加することで、無事「contact」ページのみ、表示されるようになりました。

『reCAPTCHA』を使っているページには、必ずロゴを表示しなければいけないという決まりがありますので、display:none;等で消しちゃうと規約違反になる のでご注意くださいね。

問い合わせページが固定ページ「contact」以外の場合

今回は「contact」という固定ページでの話なので、2行目は(‘contact’)と書いてますが、違う名称で作っている場合は、ここを変更してください。
また、固定ページ以外の場合は、is_pageの部分を「is_single」にして、あとは適宜変更してください。

ちなみに今回はシェフさんの『Contact Form 7でreCAPTCHA v3のロゴを非表示にする方法』を参照にさせていただいたのですが、「お問い合わせフォームが複数のページにある場合」などの詳細も書かれていますので、詳細はシェフさんのページにて。(シェフさん、大変参考になりました。ありがとうございました!)

『reCAPTCHA v3』を左側に表示させる

あとはcssで左側に表示させればOKですので、以下の記述をcssに追加します。

.grecaptcha-badge{left:6px!important;width:70px!important;}
.grecaptcha-badge:hover{left:6px!important;width:256px!important;}

これで右下で邪魔だった『reCAPTCHA』のアイコンが、左側に移動して、マウスオーバーでも規約違反にならないように表示されるようになり、快適になりました!

reCAPTCHAを左側に表示させる

ちなみにただ左に持ってくるだけでは「プライバシー・利用規約」などの表示が消えてしまうので、今の所これが一番いいかな?というcssの記述にしたつもりですが、他にもっといい記述方法があるかもしれませんので、その場合は適宜変更してくださいね!

Google AdS



関連記事

複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


app_id確認方法2

OGP設定で必要な『アプリID(app_id)』の確認方法:アプリの作成方法も「FACEBOOK for Developers」にて


以前書いていたOGPの設定方法の情報が古くなっていたので、【2021版】として『【2021】FacebookやTwitt…

記事を読む▷


日付を自動更新する!!2 サムネイル

日付を自動更新で表示させる! 簡単コピペ その2!


以前『日付を自動更新で表示させる! 簡単コピペ!!』を書いたのですが、その時の方法はJaveScriptで『docume…

記事を読む▷


Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法


せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイル…

記事を読む▷


サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)


現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP