Google reCAPTCHA V3バッジとトップボタンが重なる事象への対応方法

WordPress
スポンサーリンク

Contact FormなどでGoogle reCAPTCHA V3を設定すると、ブラウザ画面の右下に保護されていることを証明するバッジが表示されるようになります。
これは自動的に全ページで読み込まれてしまうので、そうなるとトップへ戻るのボタンと重なってしまうようになってしまうのですね。

ちょっと困る。

なので、対処方法を調べてみました。

お問い合わせページでのみ、Google reCAPTCHA V3を表示する

必要なのはお問い合わせページなので、そこだけ表示させるようにfunctions.phpに記述を加える方法を紹介してくださっている記事をみつけました。

この方法だと、トップへ戻るボタンと重なるのはお問い合わせページのみに限定することが出来ます。

functions.phpの編集にはくれぐれもご注意ください。

お問い合わせページでのみ、トップに戻るボタンを非表示にする

お問い合わせページではどうしても重なってしまうので、そこだけトップに戻るボタンを非表示にしてしまうことも出来ます。

お問い合わせページの固定ページIDをメモしておく。

まずは、お問い合わせページの固定ページIDをメモしておきます。
固定ページIDは、固定ページを編集などする際にアドレスバーに表示されていますので、そちらからメモしてください。

post=xx といった形式で表示されている「xx」の部分になります。ブログによって桁数は異なりますので、必ずしも2桁とは限りません。

CSSを追加する

以下のように、先ほどメモした固定ページのボタンのみを非表示にすることが出来ます。

.page-id-xx .go-to-top-button { display: none; }

クラス名についてはご使用のテーマによって異なる可能性もありますので、確認してみてください。
page-id-xxの「xx」を、先ほどメモした固定ページのIDに変更してください。

Cocoonだったら、これで大丈夫です。

サイドバーにトップに戻るボタンを追加する

むしろもう、画面右下にボタンを表示させず、サイドバーにトップに戻るボタンを設置する方法もあります。サイドバーでスクロール追従するようにすれば、さほど利便性は悪くないのではないかと思います。

スクロール追従型のサイドバーウィジェットを作成したい場合、プラグインなどを使用する方法もあります。

Cocoonを使用している場合は、スクロール追従型のサイドバーエリアがあらかじめ用意されていますので、そちらに追加すると良いかと思います。

詳しいやり方は、いずれ記事を書きたいです。

まとめ

Google reCAPTCHA V3バッジとトップボタンが重なる事象への対応方法をまとめてみました。

Google reCAPTCHA V3を導入すると、びっくりするぐらいSPAMメールの届く頻度が減ります。実際に導入していないWordPressサイトのコンタクトフォームからは日に20通近いメールが届いていますが(更新もしていないサイトです)、導入している当サイトには全く届きません。

尚、トップボタンと重なるからといって、Google reCAPTCHA V3バッジの方をCSSなどで非表示にするのはダメらしいです。消すならトップボタンの方を消すようにしましょう。

タイトルとURLをコピーしました