MENU

WordPress|邪魔なreCAPTCHAロゴバッジを非表示にする方法

reCAPTCHAを有効化すると、画面右下にバッジが表示されてしまうが。邪魔である。

バッジを非表示にする方法は、Google reCAPTCHAのFAQで案内されている。

Google – reCAPTCHAバッジを非表示にします。

Googleが言っていることは、「バッジを消すかわりに、代替テキストを掲載しておいてください。」ということである。

reCHAPTCHAバッジを非表示にする手順

  1. HTMLで代替テキストを表示する
  2. CSSでバッジを非表示にする

使用中のテーマがCocoonの場合は、ウィジェットで簡単に対処できる。

このページを別画面で見たいときにお使いください。

QRcode

reCAPTCHAバッジを非表示にする方法

たとえばコメント送信フォームを投稿ページに設置している場合、その下に代替テキスト(赤線部分)を表示させることでバッジを消すことが許される。

1. HTMLで代替テキストを表示する

/*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.

代替テキストを表示させるHTMLは、GoogleのFAQで案内されている。

2. CSSでバッジを非表示にする

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

バッジを非表示にするためのCSSは、GoogleのFAQで案内されている。

このCSSをstyle.cssなどに記述することでバッジを非表示にできる。

Cocoonならウィジェットに記述するだけ

Cocoonを使っているなら、ウィジェットでコメント欄の下に設置するやり方が簡単。

外観 > ウィジェット

投稿コメント下にカスタムHTMLを配置し、カスタムHTMLに次のコードを貼り付ける。

/*reCAPTCHAバッジを非表示*/
<p style="color: gray; font-size: 12px; padding: 0 1rem; text-align: center;">
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.
</p>
<style>.grecaptcha-badge { visibility: hidden; }</style>

まとめ

  • reCAPTCHAバッジを消すかわりに、テキストを掲載しておけばよい。
  • 送信フォームの下に、Googleが指定するテキストを表示する。
  • CSSでバッジを非表示にする。CSSはGoogleで指定されている。
  • Cocoonの場合はウィジェットのカスタムHTMLだけで非表示にできる。

この記事を書いた人