reCaptchaバッジを表示せずにreCaptchaのプライバシーポリシーと利用規約を文字で表示する方法

採用した対応方法

Invisible reCaptchプラグイン使用時にreCaptchaバッジを表示せずに、reCaptchaのプライバシーポリシーと利用規約を文字で表示することにしました。

reCaptchaバッジの表示に問題はなく、ただ単にreCaptchaバッジを表示しないで、reCaptchaのプライバシーポリシーと利用規約を文字で表示する場合にも以下の設定が参考になると思います。

reCaptchaバッジの右が欠ける

CocoonのコメントフォームでInvisible reCaptchプラグインを使ってreCaptchaのバッジを表示させようとすると、特定の条件で下図のreCaptchaバッジの右側部分が欠けて表示されます。

その条件とは、WordPress管理画面>Cocoon設定>コメント>「コメント入力欄表示」>「ボタンで表示切り替え」に設定することです。

「ボタンで表示切り替え」を選択することで、「コメントを書き込む」ボタンを押してからコメント入力欄が表示されるので表示がすっきりします。

「コメント入力欄表示」の他の選択肢は「常に表示」で、これを選択するとreCaptchaバッジの右側が欠ける不具合は起こりませんが、この場合には最初から「コメントを書き込む」ボタンを押した後の状態になります。

「常に表示」の設定ではコメント表示欄が常に表示されることになりますので、「ボタンで表示切り替え」を選択した場合に比べるとややごちゃごちゃします。そういうわけで、自分は「ボタンで表示切り替え」を選択したいのですが、このときにreCaptchaバッジの右側が欠ける不具合が発生します。

WordPress管理画面>設定>Invisible reCaptcah>Invisible reCaptcah 設定>「バッジのカスタム CSS 」に以下のコードを入力して、widthの値を元の値の256pxから大きくしても、バッジは欠けたまま白い部分が伸びるだけで問題は解決しません。

.grecaptcha-badge {
    width: 290px !important;
}

reCaptchaバッジが欠けて表示されることの問題点

reCaptchaバッジの右側が切れてしまうので見栄えが今ひとつになります。

また、見栄えの問題だけではなく、Googleの提供するロゴの画像が加工された状態で表示されることになるので、Googleサービスの利用規約に反する可能性があります。reCaptchaはGoogle提供のサービスです。Googleサービスの利用規約には「いかなるブランド表示、ロゴ、法的通知も、削除したり、隠したり、改ざんしたりしてはなりません」との記載があります。

この不具合に対するCocoonフォーラムのスレッド

自分では解決できなかったのでCocoonフォーラムの不具合報告スレッドで相談しました。

Cocoonフォーラム>Cocoonテーマ>不具合報告>
　Cocoonのコメント表示の設定でinvisible reCaptchaのバッジの表示が切れることがあります

最終的な対応方法

reCaptchaバッジの欠けた部分を表示する方法もあったのですが、回転する矢印の部分の左右で色合いが微妙に変わってしまうことを直すことができませんでした。

reCapthaのバッジが欠けた状態で表示したり、元のバッジと一部分の色合いが変わった状態で表示することは、Googleサービスの利用規約に反する可能性があるので、reCaptchaのバッジを表示せず、reCaptchaのプライバシーポリシーと利用規約を文字で表示することにしました。reCaptchaのバッジを表示せず、文字だけで表示することはreCAPTCHAのFAQにOKと記載されています。

設定箇所

以下は参考情報です。元の状態に戻せるようにした上で設定し、不具合があれば戻せるようにして設定するのが良いと思います。それぞれの環境(Cocoonやプラグインのバージョン、インストールしてあるプラグイン、他CSSの設定等)によって必ずしも同じ結果にならないこともあると思います。

自分のサイトではコメントフォームの他にContact Form 7プラグインを用いた問い合わせフォームでもreCaptchaが使われるので、それぞれについてreCaptchaバッジをテキストで表示する設定をしました。

共通設定

コメントフォーム・問い合わせフォームの双方に共通の設定です。

WordPress管理画面>設定>Invisible reCaptcha>Invisible reCaptcha 設定>バッジ位置は「インライン」がおすすめです。

「インライン」以外を選択すると、reCaptchaバッジをテキストで表示する設定をしていない箇所でreCaptchaバッジが表示された場合に、既存の表示と被って、既存の表示が見えなくなる場合があります。

コメントフォームでテキスト表示する設定

function.phpの追加

以下のadd_filter()関数を追加します。

add_filter( 'comment_form_submit_button', function( $submit_button ) {
  $html = '<p class="recaptcha_policy">This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and <a href="https://policies.google.com/terms" target=" _blank" rel="noopener noreferrer">Terms of Service</a> apply.</p>';
  return $submit_button . $html;
});

CSSの追加

reCaptcha表示に関するCSSですので、WordPress管理画面>設定>Invisible reCaptcha>Invisible reCaptcha 設定>「バッジのカスタム CSS」に記入するのが良いと思います。

以下のコードを追加します。テキストはGoogleのreCAPTCHAのFAQの表示と色合いを合わせました。

文字色を自身のサイトのものにしたければ、color:の行を削除してください。
.recaptcha_policy a の方はアンカーの文字色です。

/* reCaptchaバッジ表示をコメントフォームで表示されないようにする */
.comment-form .grecaptcha-badge
{
  visibility: hidden;
}
/* reCaptcha policy表示テキストのフォントサイズ・色等設定 */
.recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 9px !important;
  color: #ADADAD !important;
}
.recaptcha_policy a {
  font-size: 9px !important;
  color: #4AA4F2 !important;
}

以上の設定でコメントフォームには以下のようにreCaptchaバッジが表示されなくなり、recaptcha policyがテキストで表示されるはずです。

問い合わせフォームでテキスト表示する設定

function.phpの追加

function recaptcha_policy() {
  return '<p class="recaptcha_policy">This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> apply.</p>';
}
add_filter( 'wpcf7_form_elements', function( $form_tag ) {
  return $form_tag . recaptcha_policy();
});

CSSの追加

/* reCaptchaバッジ表示をお問い合わせフォームで表示されないようにする */
.wpcf7-form .grecaptcha-badge
{
  visibility: hidden;
}
/* お問い合わせフォームの「送信」ボタンとテキストのreCaptcha policy表示の間の空白を小さくするための設定 */
.wpcf7-submit-block
{
  height: 45px;
}
/* reCaptcha policy表示テキストのフォントサイズ・色等設定 */
/* コメントフォームと共通なので、両方のreCaptchaバッジをテキストに置き換える場合は以下は不要です */
.recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 9px !important;
  color: #ADADAD !important;
}
.recaptcha_policy a {
  font-size: 9px !important;
  color: #4AA4F2 !important;
}

Contact Form 7の[submit]の修正

WordPress管理画面>お問い合わせ>コンタクトフォーム>[お問い合わせフォームのタイトル名]の「編集」>フォームでデフォルト状態では最後の行にある[submit]の行を以下に置き換えます。(問い合わせフォームの「送信」ボタンとテキストのreCaptcah policy表示の間の空白をなくすための設定です。

[submit]
↓
<div class="wpcf7-submit-block">[submit]</div>

以上の設定でお問い合わせフォームでreCaptchaバッジが表示されなくなり、recaptcha policyがテキストで表示されるはずです。

別の対応方法

上の方法では、コメントフォーム・問い合わせフォームの送信ボタン部分でそれぞれreCaptchaバッジを非表示にして、recaptcha policyをテキストで表示するようにしていましたが、全てのフォームでreCaptchaバッジを非表示にして、常に表示する部分(フッター部分等)にrecaptcha policyをテキストで表示する方法も考えられます。

Cocoonのフッターに表示する場合には以下のようになると思います。

CSSの追加

/* reCaptchaバッジ表示を表示されないようにする */
.grecaptcha-badge
{
  visibility: hidden;
}
.recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 9px !important;
  color: #ADADAD !important;
}
.recaptcha_policy a {
  font-size: 9px !important;
  color: #4AA4F2 !important;
}

Cocoonのフッターの設定

WordPress管理画面>Cocoon設定>フッター>クレジット表記>独自表記
のラジオボタンを選択し、その下の欄に以下を記入します。

<p class="recaptcha_policy">This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> apply.</p>
<p>© 20XX-20YY 著作権者名など.</p>