reCAPTCHA v3を邪魔にならない様に表示する方法【WordPress】

スパム対策としてお問い合わせフォームに設置しているreCAPTCHA。

最新版のreCAPTCHA v3をブログやサイトで綺麗に表示する方法をご紹介します。

ブログをWordPressで運営している方は、この方法でロゴを綺麗に表示することができます。

reCAPTCHA v3は便利だがロゴが邪魔になる

これまで利用されていたreCAPTCHA v2では、チェックボックスにチェックを入れる手間がありました。

しかし、最新版のreCAPTCHA v3ではチェックボックスはなくなり、ユーザーにとっては嬉しい仕様に変更されています。

しかし、reCAPTCHA v3にはひとつ大きなデメリットがある。

それは、画面右下に固定表示されるロゴです。

右下に固定表示されるロゴ

このようにPCでもスマホでも右下にロゴが固定表示されるので、メニューやTOPに戻るボタンと被ってしまってとても邪魔。

これではブログやサイトのデザインにも影響がでてしまいます。

また、条件を満たせばロゴを消すこともできるみたいですが、ユーザーに安心感を与えるためにあえて残す方向でカスタマイズしたいと考えています。

プラグインを使って邪魔にならないように表示する

reCAPTCHA v3をreCAPTCHA v2のように、特定の場所に止まって表示してくれるプラグインが「Invisible reCaptcha for WordPress」です。

まずは管理画面の［プラグイン］＞［新規追加］からInvisible reCaptcha for WordPressをインストールして有効化します。

次に［設定］＞［Invisible reCaptcha］＞［Settings］を開きます。

それぞれの設定項目を以下のように設定して保存します。

各項目を設定する

これで準備は完了です。

お問い合わせにreCAPTCHA v3を設定する

ここでは「Contact Form 7」で設置したお問い合わせページにreCAPTCHA v3を設定していきます。

まずは、Contact Form 7でインテグレーションを設定している場合は削除してください。

インテグレーションを削除する

次に［設定］＞［Invisible reCaptcha］＞［Contact Forms］を開き、「Enable Protection for Contact Form 7」にチェックを入れて保存します。

お問い合わせページに設置するための設定

これでお問い合わせページの送信ボタンの下にreCAPTCHA v3のロゴが表示されるようになりました。

お問い合わせページに設置完了

記事のコメント欄にreCAPTCHA v3を設定する

記事のコメント欄にもreCAPTCHA v3を表示させることができます。

［設定］＞［Invisible reCaptcha］＞［WordPress］を開き、「Enable Comments Form Protection」にチェックを入れて保存をするだけ。

コメント欄に設置するための設定

このようにコメント欄にもreCAPTCHA v3を設置することができます。

コメント欄に設置完了

reCAPTCHA v3のロゴを中央にする

Invisible reCaptcha for WordPressでreCAPTCHA v3を設置すると、ロゴが左寄せになって気になるかと思います。

このロゴはCSSで簡単に中央に配置することができます。

中央に表示したロゴ

やり方は簡単で、管理画面の［外観］＞［テーマ編集（テーマエディター）］に下記のコードをコピペするだけ。

/*--------------------------------------
reCAPTCHA v3を中央表示
--------------------------------------*/
.grecaptcha-badge {
	margin: auto;
}

まとめ

プラグインを使えば簡単に問題解説することができました。

reCAPTCHA v3では写真を選択する“あの超難問”を解く必要もないので、まだreCAPTCHA v2を利用している場合はv3に変更してみましょう。

これもひとつのユーザーファーストとなりますからね。