WordPress で reCAPTCHA v3 を非表示にする方法【Googleが公式に推奨している方法】

WordPress で、コメント欄を開放したり、お問い合わせフォームを設置すると悩まされるのが、スパムコメントやスパムメールです。

スパム対策については、Google が提供する「reCAPTCHA v3」を使うのが効果的です。

WordPress WPForms でスパム対策をする方法【reCAPTCHA v3】

「reCAPTCHA v3」は、コメントやお問い合せフォームの送信時に、チェックを入れたり画像認証を行う必要がないので、ユーザビリティに優れています。

ただ、「reCAPTCHA v3」を設定すると、右下の邪魔な場所に「reCAPTCHA」のロゴ(バッジ)が表示されてしまいます。

「reCAPTCHA」のロゴ(バッジ)は、とくにモバイル端末では、「トップに戻るボタン」などと干渉してしまう場合も多いので、ユーザビリティの観点からも、対策が必要と感じる人も多いかもしれません。

「reCAPTCHA」のロゴ(バッジ)を非表示にする方法は、いくつかありますが、今回は、Googleが公式に推奨している方法で紹介します。

目次

reCAPTCHA のロゴ(バッジ)を非表示にする方法

「reCAPTCHA」のロゴ(バッジ)を非表示にするために、Googleが公式に推奨している方法は、以下のサポートページに記載されていますので、そちらも目を通してみてください。(日本語です)

https://developers.google.com/recaptcha/docs/faq?hl=ja

CSSで非表示にする方法

「reCAPTCHA」のロゴ(バッジ)を非表示にする方法ですが、

バッジを非表示にする場合は、

.grecaptcha-badge { visibility: hidden; }

を使用してください。

https://developers.google.com/recaptcha/docs/faq?hl=ja

と、Google のサポートページに書かれています。

WordPress の「外観」→「カスタマイズ」→「追加CSS」に、下記の CSS を記述して保存すればOKです。

バッジを非表示にするCSS
/*reCAPTCHAのバッジを非表示*/
.grecaptcha-badge { visibility: hidden; }

一般的なCSSの書き方で書くと以下のようになりますが、どちらの書き方でも大丈夫です。

バッジを非表示にするCSS
/*reCAPTCHAのバッジを非表示*/
.grecaptcha-badge {
	visibility: hidden; 
}

これで、サイトから「reCAPTCHA」のバッジ(ロゴ)が消えます。(ログイン画面では表示されます。)

Googleの規約等は気にせずに、こっそりと非表示にしたい人は、これにて終了となります。

お疲れ様でした。

Googleが公式に推奨している方法

「reCAPTCHA」のロゴ(バッジ)を非表示にするために、Googleが公式に推奨している方法は、以下のサポートページに記載されています。

https://developers.google.com/recaptcha/docs/faq?hl=ja

reCAPTCHA バッジを非表示にします。どうすればよいですか?
ユーザーフローに目に見える形で reCAPTCHA のブランドを含めていれば、バッジを非表示にできます。次のテキストを含めてください。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
https://developers.google.com/recaptcha/docs/faq?hl=ja

「次のテキスト」をブラウザで表示すると、

バッジを非表示にするときのテキスト

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

となり、翻訳すると、

翻訳

このサイトは、reCAPTCHA によって保護されており、Google プライバシー ポリシー利用規約が適用されます。

という内容になります。(サイトには このような日本語で表示させてもOKです)

つまり、

要するに

「reCAPTCHA を非表示にする代わりに reCAPTCHA を使っていますよ」という表記が必要

ということです。

バッジを非表示にするときのHTML
This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

reCAPTCHA のバッジを非表示にする

「reCAPTCHA」のロゴ(バッジ)を非表示にする方法は、「CSSで非表示にする方法」と同じですので、

WordPress の外観 → カスタマイズ →「追加CSS」に 以下のような CSS を記述して保存すればOKです。

バッジを非表示にするCSS
/*reCAPTCHAのバッジを非表示*/
.grecaptcha-badge {
	visibility: hidden; 
}

まとめ

「reCAPTCHA」のロゴ(バッジ)を非表示にする方法は簡単です。

ただ CSS で消してしまえばOKです。

WordPress の外観 → カスタマイズ →「追加CSS」に 以下のような CSS を記述して保存すればOKです。

バッジを非表示にするCSS
/*reCAPTCHAのバッジを非表示*/
.grecaptcha-badge {
	visibility: hidden; 
}

非表示にするだけなら簡単なので、Googleの規約等は気にせずに、ただ非表示にしている人も多いと思います。

しかし、きちんと Google が推奨する方法で「reCAPTCHA」のロゴ(バッジ)を非表示にさせる場合は、

CSS で「reCAPTCHA」のロゴ(バッジ)を非表示にしたうえで、以下のテキストを、コメント欄やお問い合わせフォームに表示させるようにします。

バッジを非表示にするときのテキスト

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

上記テキストを表示させるには、

バッジを非表示にするときのHTML
This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

というような HTML を記述すればOKです。

HTMLの記述先

HTML の記述先ですが、

コメント欄の場合は、「comments.php」というテーマファイル内に追記します。

お問い合わせフォームの場合は、お問い合わせフォーム用の固定ページに貼り付けた、ショートコードの下に追記するか、お問い合わせフォームのフォーム作成時に追記します。

HTMLをどこに記述するのかについては、コメントフォームとお問い合わせフォームに分けて、別の記事で説明します。

WordPress でコンタクトフォームの reCAPTCHA v3 を非表示にする方法【WPForms】

WordPress でコメントフォームの reCAPTCHA v3 を非表示にする方法【comments.php】

目次