Contact Form 7+reCAPTCHA v3のプライバシー・利用規約のロゴを非表示にする方法

2022.10.232019.08.20

この記事は約7分で読めます。

Contact Form 7をアップデートしたらreCAPTCHA（v2）が使えなくなり、reCAPTCHA（v3）に変更したら、reCAPTCHAが動作しなくなり、再設定しなおしました。そうしたら、全ページにreCAPTCHAのプライバシー・利用規約のロゴ（マーク、バッジ）が全ページに表示されるように。不便なので reCAPTCHAのロゴを非表示にしましたので、その方法を紹介します。

Contact Form 7のreCAPTCHAを再設定する
プラグインを使わずにGoogleのreCAPTCHAのロゴを全ページで非表示にする方法
1. お問い合わせフォームのページにreCAPTCHAブランディング用のHTML記述を追加
2. ロゴを消すCSSの追加
プラグインを使わずにGoogleのreCAPTCHAのロゴを特定のページだけ非表示にする方法
プラグインを使ってGoogleのreCAPTCHAを変更する方法
1. Invisible reCaptcha for WordPressの設定方法
関連記事
参考記事

Contact Form 7のreCAPTCHAを再設定する

私のように、reCAPTCHAが動作しなくなった人は、再設定から始めましょう。WordPressのメニュー＞「お問い合わせ」＞「インテグレーション」をクリックし、「キーを削除」をクリックします。その後、CAPTCHAの下にあるURLをクリックします。

GoogleのreCAPTCHAの設定画面へ行くために「Admin console」をクリックします。

GoogleのreCAPTCHAの設定画面に入ったら「＋」をクリックします。

ラベルを入力し、「reCAPTCHA v3」を選択し、ドメインを確認します。

「reCAPTCHA利用条件に同意する」にチェックを入れ、「アラートをオーナーに送信する」にチェックを入れて、「送信」をクリックします。

表示されたサイトキーとシークレットキーを確認し、Contact Form 7のreCAPTCHAの設定のサイトキーとシークレットキー欄に入力します。

プラグインを使わずにGoogleのreCAPTCHAのロゴを全ページで非表示にする方法

実は、以下の条件を満たせば、reCAPTCHAを使用しているページでもreCAPTCHAのロゴを表示しなくても良いのです。Google公認です。私はこの方法を採用しました。

I’d like to hide the reCAPTCHA badge. What is allowed?

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

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

reCAPTCHA v3バッジを隠したい場合は、reCAPTCHAブランディングをユーザフローに目に見える形で含める限り、バッジを隠すことができると書いてあります。

お問い合わせフォームのページにreCAPTCHAブランディング用のHTML記述を追加

お問い合わせフォーム用のページを選び、カスタムHTMLブロックにて以下のHTMLソースコードを追加します。

リンク先は別ウィンドウで開くように変更済みです。

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and
    <a href="https://policies.google.com/terms" target="_blank">Terms of Service</a> apply.

ロゴを消すCSSの追加

使用しているテーマのCSSに以下のソースコードをを追加します。

.grecaptcha-badge {
    opacity: 0;
}

プラグインを使わずにGoogleのreCAPTCHAのロゴを特定のページだけ非表示にする方法

順を追って説明していきます。

お問い合わせページが固定ページの場合

使用しているテーマのfanction.phpに以下のように記述します。

add_action( 'wp_enqueue_scripts', function() {
	if(is_page('○○○')) return;
    wp_deregister_script( 'google-recaptcha' );
});

「○○○」部分は、お問い合わせページのIDか、パーマリンク（最後のスラッシュ以降の文字列）が入ります。

お問い合わせページが固定ページではない場合

is_pageの部分を「is_single」に変更します。

add_action( 'wp_enqueue_scripts', function() {
	if(is_single('○○○')) return;
    wp_deregister_script( 'google-recaptcha' );
});

お問い合わせフォームが複数のページにある場合

「return;」がある行を複数回記述すればOKです。

add_action( 'wp_enqueue_scripts', function() {
	if(is_page('contact')) return;
	if(is_page('sitepolicy')) return;
	if(is_page(4536)) return;
	if(is_single('about')) return;
    wp_deregister_script( 'google-recaptcha' );
});

プラグインを使ってGoogleのreCAPTCHAを変更する方法

ソースコード書いたりするのは無理！という人は、プラグインがありますので、そちらを利用しましょう。「Invisible reCaptcha for WordPress」というプラグインです。

Contact Form 7+reCAPTCHA v3に「Invisible reCaptcha for WordPress」使用すると、reCAPTCHA v2のように「お問い合わせ」フォームの下のみにreCAPTCHA v3のロゴを表示させることができます。