WordPressのプラグイン「Contact Form 7」で是非使っておきたい機能に「reCAPTCHA インテグレーションモジュール」があります。
この「reCAPTCHA」は、スパムやその他の自動化された不正なフォーム送信を遮断するGoogleのサービスで、執筆時の最新バージョンはv3です。バージョン5.1以降の「Contact Form 7」はこの「reCAPTCHA v3 API」を使用しており、フォームを送信する人に読みにくいテキストを読ませたり、「私はロボットではありません」といったチェックボックスを選択させる必要なく、バックグラウンドで作業してくれるので大変便利です。
ただ一つ難点が、メールフォームの有無に関わらす全ページに表示されるreCAPTCHAロゴです。
このロゴはreCAPTCHAのプライバシーポリシーや利用規約にリンクするロゴで、ページの右下に表示され、普段は頭4分の1ほどの表示で、マウスオーバーでスライドインします。パソコンでの表示ではあまり気にならないのですが、スマートフォンなどの画面幅の小さいデバイスでは、フッターメニューや「ページトップへ戻るボタン」に重なったりして少し邪魔に感じます。
この「reCAPTCHA v3 ロゴ」を、問い合わせページのようなメールフォームのあるページのみに表示させ、かつ、フッターや「ページトップへ戻るボタン」の邪魔にならない位置に移動する方法が以下です。
コンタクトフォーム7の reCAPTCHA v3 ロゴを必要なページのみ表示する
WordPressのテーマ(子テーマ)の functions.php ファイルに追記します。
アクションフックで wp_enqueue_scripts にフックし、任意のページのみ実行し、それ以外は wp_deregister_script 関数で google-recaptcha を読み込ませないようにします。
例えば、ロゴを表示させたい(reCAPTCHA機能を使用したい)ページのスラッグが contact と inquiry の場合は、functions.php ファイルに以下の記述を追加してください。
reCAPTCHAを使用するのが固定ページではなく個別投稿ページの場合は is_single() を使用するなど、条件分岐で柔軟に対応出来ます。
ポイントは、add_action の第3パラメータの優先順序です。Contact Form 7 のバージョンにより、デフォルトの 10 のままだと機能しないので、100 あたりに設定しておきましょう。
add_action( 'wp_enqueue_scripts', function() { if(is_page([ 'contact', 'inquiry', ])) return; wp_deregister_script( 'google-recaptcha' ); }, 100, 0);
コンタクトフォーム7の reCAPTCHA v3 ロゴの表示位置を調整する
reCAPTCHAロゴには grecaptcha-badge というクラス名が付いていますので、CSSで位置調整が可能です。
.grecaptcha-badge { margin-bottom: 60px; }
以上、ご参考になれば幸いです。
皆さまにすべての良きことが雪崩のごとく起きますように。
コメント
[…] https://se.ekaki-j.com/wp-contact-form-7-recaptcha-v3/ […]