『reCAPTCHA』をお問い合わせページにのみ設置&ロゴを非表示にする方法

アイキャッチ

スパム対策として「reCAPTCHA」を設置しているサイトは多いですよね。
ただ、「reCAPTCHA」を設置すると、サイト全体に表示されてしまいます。
これをお問い合わせページにのみ表示する方法と、ロゴを非表示にする方法をご紹介します。

この記事は、次の3つを既に持っている人に向いています。

  • WordPressを使っている人
  • reCAPTCHAを設置している人
  • Contact Form7を使って“お問い合わせフォームを作成している人
目次

「reCAPTCHA」のデメリット

reCAPTCHA」はJavaスクリプトで動いています。そのため設置するとサイトが重くなってしまうというデメリットがあります。

「reCAPTCHA」を登録すると、サイト全体が対象になるので、全てのページに設置されてしまいます。

そうなるとページ数が多ければ多いほど、ページに負荷がかかってしまうということに。

そもそも「reCAPTCHA」を導入する目的は、お問い合わせフォームのスパム対策です。
全てのページに設置する必要はないんですね。

そこで、お問い合わせページにのみ表示させるようにカスタマイズしていきます。

お問い合わせページのみに表示させる方法

お問い合わせページにのみ表示させるにはfunction.phpにコードを追加します。

STEP
WordPressダッシュボード画面より[外観]/[テーマファイルエディター]/[テーマのための関数]と開く

警告画面が出ますが気にしなくて大丈夫です。

レキャプチャ設定画面1
STEP
[テーマのための関数](function.php)にコードを貼り付ける

「/* その他の読み込みファイルはこの下に記述 */」の下に以下のコードを貼り付けます。

/* お問い合わせページを除き、reCAPTCHAを読み込ませない */

function load_recaptcha_js() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

当ブログのお問い合わせページのディレクトリ名は「/contact」だったので、2行目は「’contact’」にしていますが、ここはディレクトリ名に合わせて変更してください。

最後に[ファイルを更新]を押すのを忘れずに。

レキャプチャ設定画面2

お問い合わせページのみに「reCAPTCHA」のロゴが表示されていれば設定は完了です。

reCAPTCHAのロゴを非表示にする

ページ右下に表示されている「reCAPTCHA」のロゴですが、「TOPへ戻る」などのボタンと被ってしまい見づらいです。

ロゴが表示されている
TOPボタンと被ってしまう

気になるのでこのロゴを非表示にします。

STEP
GoogleのreCAPTCHAよくある質問ページを開く

GoogleのreCAPTCHAよくある質問ページ https://developers.google.com/recaptcha/docs/faq?hl=ja 

にアクセスし、「reCAPTCHA Enterprise バッジを非表示にしたいのですが、どうすればよいですか?」までスクロールします。

STEP
赤枠で囲っている箇所をコピー
レキャプチャ設定画面3
スマホの人はクリックで拡大します

赤枠で囲っている箇所をコピペします。
これは「ロゴを非表示にしてもいいけど、次の文言を記しておいてね」という意味です。

赤枠の文章を訳すと、こうなります。

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

このページは後で使うのでまだ閉じないでください。

STEP
「contact form 7」に貼り付ける

WordPressの「contact form 7」設定画面に移動して、一番下に先ほどコピーしたものを貼り付けます。

最後に[保存]するのを忘れずに。

レキャプチャ設定画面4
STEP
先ほどアクセスしたGoogleのページを再度表示

「バッジを非表示にする場合」のCSSコードをコピーします。

レキャプチャ設定画面5
STEP
WordPressのダッシュボード画面より[外観]/[カスタマイズ]/[追加CSS]と開く

最後の行に先ほどコピーしたコードを貼り付けます。

/*reCAPTCHAのロゴマークを非表示にする*/
.grecaptcha-badge { visibility: hidden; }
たいら

コードの前には/*〇〇〇にする*/という風に目的を記しておくと分かりやすいです

recaprtchas設定画面4

[公開]を押して設定完了です。
ロゴが非表示になっていることを確認します。

注意点
この方法はGoogleの公式サイトに載っている正式な方法です。
これ以外の方法で勝手にCSS等でロゴを非表示にすることは禁じられています。

ちなみに、「reCAPTCHA」 をGoogleで設定時に、お問い合わせページのみを登録すればわざわざこんな設定をしなくてもいいのではないか?と思い、試してみましたが個別のページは登録できませんでした。

reCAPTCHAは必要なページだけに設置しよう

ここまで、「reCAPTCHA」をお問い合わせページのみ表示させる方法とロゴを非表示にする方法を紹介してきました。

少し面倒かもしれませんが、そのままだと全てのページに設置されてサイトが重くなってしまうので、必要なページだけに設置するように設定しましょう。

function.phpをいじることに不安がある人は、プラグインで使えるものもあるみたいです。

ただ、プラグインの入れすぎはサイトが重くなる原因にもなるので、安易にプラグインに頼ることはおすすめしません。

コピペするだけで簡単に設置できますので、ぜひやってみてください。

今日はここまでになります。
最後まで読んでいただきありがとうございました。

目次