MENU

reCAPTCHA v3の導入！ロゴ表示位置の調整と、お問い合わせページのみ表示

当サイトは広告リンクを含みます。
recaptcha-v3

こんにちは。

「reCAPTCHA」が新バージョンの「reCAPTCHA v3」へとアップデートされ、Contact Form 7を利用している当ブログでも導入してみたので流れをまとめました。

あとは表示関連で気に入らなかった部分を修正したのでざっと紹介します。

 

そもそも「reCAPTCHA」とはグーグルが提供するbot対策ツールであり、お問い合わせやコメント欄などのbotを防ぐために利用するものです。「私はロボットではありません」という項目にチェックを入れるアレです。
もくじ

追記（2021.3.1）

現在は下記の記事を参考にさせていただいて完全に非表示へと切り替えました。

豊後高田イーシス - ホームページ...
【Google公認】reCAPTCHA v3のバッジ（ロゴ）をコピペで簡単に非表示 – IISYS WordPressのContact Form 7に対応しているreCAPTCHAがv3になってから、バッジ（ロゴ）が邪魔な場所に表示されてしまうようになりました。 これはContact Form 7の問題では...

 

reCAPTCHA v3の導入方法

  • Googleアカウント
  • reCAPTCHAを設置したいサイトURL

reCAPTCHAを利用するには上記の2つが必要になります。

 

reCAPTCHA v3

まずはreCAPTCHAのサイトへアクセス。

右上の「My reCAPTCHA」からログインします。初めて利用する場合はグーグルアカウントでログインできると思います。

 

reCAPTCHA
reCAPTCHA reCAPTCHA is a security service that protects your websites from fraud and abuse.

 

 

reCAPTCHA v3

入力画面にて必要事項を入力していきます。

 

Labelでは分かりやすい名前を設定します。私の場合はお問い合わせページ用に設置したいので「お問い合わせページ」という名前にしました。

 

Choose the type of reCAPTCHAではバージョンを選択します。最新バージョンを利用したいので「reCAPTCHA v3」にチェックを入れます。v2は旧バージョンで例の「私はロボットではありません」のタイプです。

 

DomainsではreCAPTCHAを設置したいサイトURLのドメイン部分を入力します。当ブログの場合は「datsuhiki.com」と入力します。

 

入力したら次へ進みます。

 

reCAPTCHA v3

次ページで表示される「サイトキー・シークレットキー」を忘れないようにメモしておきます。この2種のコードをサイトにコピペすることになります。

 

reCAPTCHA v3

WordPressメニューから「お問い合わせ > インテグレーション」を開きます。

reCAPTCHA用の設定項目があるので、そこへ先程のサイトキー・シークレットキーをコピペ。完了したら設定を保存します。

 

reCAPTCHA v3

これでサイトにreCAPTCHA v3が設定されました。

 

reCAPTCHA v3

さっきreCAPTCHAのサイトにアクセスした際に気が付いたかと思うけど、画面右下辺りに見慣れないreCAPTCHAロゴが表示されていましたね？

自分のサイトでも同じようにロゴが表示されていれば正常に設置できました。

 

これが新バージョンの「reCAPTCHA v3」で、サイト内の全ページでreCAPTCHAが常駐することになります。旧バージョンのようなチェック項目や画像認証といった面倒な作業はありません。

 

ロゴ表示位置の調整

reCAPTCHA v3を設置してみてまず感じたのが「右下にずっと表示されているロゴの位置が気に入らない」という点。

 

reCAPTCHA v3

当ブログではCocoonというテーマを使用しています。

スマホ画面だと画面下に表示させているメニューバーとreCAPTCHAのロゴが見事に干渉しています。見栄えが悪く気になってしまう。

PC表示でも「上に戻る」のボタンと干渉してしまいます。

 

なのでロゴ表示の位置を少し上に移動させました。

 

/* reCAPTCHA v3　表示位置 */
.grecaptcha-badge{
    margin-bottom: 60px;
}

style.cssに上記コードを記述しました。

 

reCAPTCHA v3

画面下のメニューバーとの干渉はなくなりました。

 

お問い合わせページのみに適用

当ブログでreCAPTCHAが必要なのはお問い合わせページだけです。

全ページでロゴが表示されていると邪魔なだけなので、お問い合わせページにのみreCAPTCHAを読み込むように設定しました。

 

//問い合わせページのみreCAPTCHA表示
add_action( 'wp_enqueue_scripts', function() {
    if(is_page('contact')) return;
  wp_deregister_script( 'google-recaptcha' );
});

上記コードをfunctions.phpに記述しました。

 

コード内の「contact」の部分はお問い合わせページのパーマリンクになります。各ブログのパーマリンクに書き換えてください。

これでお問い合わせ以外のページではreCAPTCHAロゴが無駄に表示されなくなりました。

 

あわせて読みたい
お問い合わせ ご訪問ありがとうございます。お問い合わせは下記フォームからよろしくお願い致します。簡単な質問はTwitterのDMからお気軽にどうぞ。

現在の当ブログのお問い合わせページです。

 

まとめ

bot対策にreCAPTCHAは必須ですが、サイト訪問者側となると「私はロボットではありません」のチェック項目とか、画像認証とか凄い面倒なんですよね。

面倒な作業がなくなった新バージョンのreCAPTCHA v3はストレスフリーです。

お問い合わせページにreCAPTCHAを導入する価値はあると思います。

 

当ブログにreCAPTCHA v3を導入したという話でした。

 

ブログ運営
もくじ