「ウェブサイトにセキュリティ強化は必須だけど、reCAPTCHA V3のアイコンが全ページに表示されていて、デザインやユーザー体験を損ねている…」とお悩みではありませんか？
特に、Contact Form 7をご利用の場合、reCAPTCHA V3のアイコンが意図せず全ページに表示されてしまうことがあります。
この記事では、そんなWordPressユーザーの皆さんの悩みを解決します。
reCAPTCHA V3のアイコンを、お問い合わせページなど、指定した必要なページにのみ表示させる具体的な方法を、コードを交えてわかりやすく解説します。
ウェブサイトのセキュリティを維持しつつ、デザイン性とユーザー体験を向上させるための実践的なテクニックをご紹介します。もう、アイコンの全ページ表示に悩む必要はありません。
Contact Form7のインテグレーションでは全ページに表示されてしまう
スパムメールの対策として、Contact Form7にはオプションで「インテグレーション」が設けられています。
インテグレーションを選択すると、サイトキーとシークレットキーを入力するだけで超簡単にreCAPTCHAを設定することができます。
ところが、この方法では全ページにreCAPTCHA v3のアイコンが表示されてしまいます。
デザイン上かなり邪魔なので、これを指定したページにのみ表示したいところです。
【注意点】display: none; はNG
reCAPTCHA v3のアイコンをdisplay: none; で強制的に非表示にすることはお勧めできません。
この方法はreCAPTCHAの利用規約に反しており、何より、フォームが上手く機能しなくなることがあります。
具体的には、フォームに正しく内容を入力して送信ボタンをクリックするとエラーメッセージが表示され送信できないという事象です。
【対策】指定ページにのみreCAPTCHAをセットする
問い合わせページなど、指定したページにのみreCAPTCHAのアイコンを表示したい場合は、
①Contact Form7のreCAPTCHAのキーを削除する（設定済みの場合）
②functions.phpに以下のコードを追記
////////Contact Form7 Recaptchaを指定ページにのみ埋め込む////////
function load_recaptcha_v3_show_pages() {
if ( is_page( array( 'スラッグ1', 'スラッグ2' ) ) ) {
echo '<script src="https://www.google.com/recaptcha/api.js?render=サイトキー" defer></script>';
}
}
add_action( 'wp_footer', 'load_recaptcha_v3_show_pages(' );
コード解説
if ( is_page( array( 'スラッグ1', 'スラッグ2' ) ) ) {
表示したいページのスラッグをarrayで指定します。例えば、https://example.com/formというページに設定したければ、is_page( array( 'form')とします。
指定したページにのみ以下の処理を実行します。
echo '<script src="https://www.google.com/recaptcha/api.js?render=サイトキー" defer></script>';reCAPTCHAのサイトキーをURLのパラメータに入力します。
これで、指定したページにのみreCAPTCHAを挿入することができます。
最後に、フォームが正しく送信できるか確認して完了です。
