WordPress│reCAPTCHAのロゴ画像を公式のやり方で非表示にするカスタマイズ

2023.01.292024.03.07

WordPressでのコメントやお問い合わせのスパム対策で

GoogleのreCAPTCHA（v3）を入れることは定番の対策だと思います。

しかし条件によってはreCaptchロゴが邪魔になることがあります。

特にスマホ表示の場合、上に戻るボタンとかぶることがしばしば見かけます。

それだったらCSSで非表示にするだけだと思うと思いますが、これだとGoogleの方針に沿っていない対応になってしまいます。

似たような方針例として広告に「広告」と「スポンサーリンク」のいずれかのラベルを表示するというものがあります。※義務ではなく、推奨。

非表示にするためには、指定の文言を挿入する必要があります。

本記事では、そのカスタマイズを方法を紹介いたします。

ちなみに僕はInvisible reCaptcha for WordPressというプラグインを使ってreCaptchaを導入しています。

reCAPTCHAのロゴ画像を公式のやり方で非表示にするカスタマイズ

まず、Googleの公式ドキュメントを見てみましょう。

Google for Developers

Frequently Asked Questions | reCAPTCHA | Google for Developers Get answers to questions about reCAPTCHA Enterprise, versions, limits, customization, and more.

まず以下の文言を含めてくださいと記載されています。

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で非表示にすると解説されています。

/*reCAPTCHAのロゴを非表示*/
.grecaptcha-badge {
	visibility: hidden; 
}

ということで、CSSで非表示にするのは簡単ですが、

コメント欄やお問い合わせに文言を追加する場合はカスタマイズが必要になります。

さっそくやり方を解説いたします。

reCAPTCHAのロゴを非表示にするCSS

あらためて記載しますが、下記のCSSを入れるとreCAPTCHAのロゴを非表示にできます。

/*reCAPTCHAのロゴを非表示*/
.grecaptcha-badge {
	visibility: hidden; 
}

そしてこれだけでは、こっそりreCAPTCHAを使っているということになってしまいますので、使用している箇所（コメントやお問い合わせ）にreCAPTCHAを使用しているという指定の文言を表示しましょう。

コメント欄に文言を追加する方法

まずはコメント欄にreCAPTCHAを使っていますという表記を加えたいと思います。

管理画面＞外観＞テーマエディタ＞ functions.phpから以下のコードを追記します。

※コードの追記が怖い人はCode Snippetsのプラグインに記載すると安全です。

function motoki_comment_form_add_text($arg) {
	$arg['comment_notes_before'] = '<span class="u-fz-xs">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.</span>';
	return $arg;
}
add_filter('comment_form_default_fields', 'motoki_comment_form_add_text');

※クラス部分に記載したu-fz-xsはSWELLの小文字にする表記になります。

お問い合わせに文言を追加する方法

お問い合わせに関しては、プラグインを用いると思いますので、プラグインに合わせて文言を追記しましょう。

僕の場合はWPFormsというプラグインを使用していますので、こちらで解説いたします。

※他のプラグインの場合はGoogle検索で調べてみましょう。

といっても、やり方は非常に簡単でお問い合わせフォームの説明欄に下記のHTMLを挿入するだけです。

<span class="u-fz-xs">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.</span>