『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その2
前回書いた『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1の続きです!
今回は本題です。サイト登録した『reCAPTCHA v3』を、問い合わせページのみ&左側に表示させる方法です。
環境は前回同様、Wordpressで「Contact Form 7」のプラグインを使用での話になります。
目次
『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:一覧
『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」ページのみ、表示されるようになりました。
問い合わせページが固定ページ「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』のアイコンが、左側に移動して、マウスオーバーでも規約違反にならないように表示されるようになり、快適になりました!
ちなみにただ左に持ってくるだけでは「プライバシー・利用規約」などの表示が消えてしまうので、今の所これが一番いいかな?というcssの記述にしたつもりですが、他にもっといい記述方法があるかもしれませんので、その場合は適宜変更してくださいね!
Google AdS
関連記事
-
opacityの書き方 クロスブラウザ
今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…
-
ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す
今まで何度もWordPressのテンプレートをカスタマイズし、問題なくページネーションは機能していたのですが、なぜか今回…
-
サーバー移転の手順 その3:移転後のトラブル
前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…
-
WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法
よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …
-
WordPress:プラグイン”RSSImport”を使って気になるサイト等の最新情報を表示させる方法
前回はRSSのボタンを自分のサイトに表示させる方法を書いたのですが、今回は自分のサイト以外(勿論自分のものもOK!)の気…