WordPress – Contact Form 7のreCAPTCHA v3のロゴを必要なページの邪魔にならない場所にのみ表示させる

WordPress
この記事は約3分で読めます。
スポンサーリンク

WordPressのプラグイン「Contact Form 7」で是非使っておきたい機能に「reCAPTCHA インテグレーションモジュール」があります。
この「reCAPTCHA」は、スパムやその他の自動化された不正なフォーム送信を遮断するGoogleのサービスで、執筆時の最新バージョンはv3です。バージョン5.1以降の「Contact Form 7」はこの「reCAPTCHA v3 API」を使用しており、フォームを送信する人に読みにくいテキストを読ませたり、「私はロボットではありません」といったチェックボックスを選択させる必要なく、バックグラウンドで作業してくれるので大変便利です。

ただ一つ難点が、メールフォームの有無に関わらす全ページに表示されるreCAPTCHAロゴです。
このロゴはreCAPTCHAのプライバシーポリシーや利用規約にリンクするロゴで、ページの右下に表示され、普段は頭4分の1ほどの表示で、マウスオーバーでスライドインします。パソコンでの表示ではあまり気にならないのですが、スマートフォンなどの画面幅の小さいデバイスでは、フッターメニューや「ページトップへ戻るボタン」に重なったりして少し邪魔に感じます。

reCAPTCHA v3 ロゴ
reCAPTCHA v3 ロゴ

この「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 あたりに設定しておきましょう

PHP
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で位置調整が可能です。

CSS
.grecaptcha-badge {
margin-bottom: 60px;
}
reCAPTCHA (v3) | Contact Form 7 [日本語]

以上、ご参考になれば幸いです。
皆さまにすべての良きことが雪崩のごとく起きますように。

コメント

タイトルとURLをコピーしました