WordPressテーマ「SWELL」でお問い合わせページにのみ「reCAPTCHA」を設定する方法

WordPressサイトのセキュリティ強化やスパム対策に役立つ「reCAPTCHA」は、特にお問い合わせフォームでよく利用される。ただし、全てのページに「reCAPTCHA」を読み込むと、サイトの表示速度に影響を与える可能性がある。ここでは、WordPressテーマ「SWELL」を使っている場合に、特定のページ（お問い合わせページ）のみに「reCAPTCHA」を表示し、ページトップボタンと「reCAPTCHA」アイコンが重なる問題を解消する方法を紹介する。

お問い合わせページのみに「reCAPTCHA」を表示する

まず、以下のコードをfunctions.phpに追加する。これにより、「reCAPTCHA」がお問い合わせページにのみ読み込まれ、他のページでは読み込まれないようにする。

// お問い合わせページ以外に「reCAPTCHA」を読み込ませない
function load_recaptcha_js() {
	if (!is_page('contact')) {
		wp_deregister_script('google-recaptcha');
	}
}
add_action('wp_enqueue_scripts','load_recaptcha_js',100);

このコードは、is_page(‘contact’)でお問い合わせページかどうかを判定し、お問い合わせページでない場合はgoogle-recaptchaスクリプトを解除する仕組みだ。

ページトップボタンと「reCAPTCHA」アイコンが重なる問題の解消

「reCAPTCHA」アイコンがページトップボタンと重なる問題を解消するためには、CSSでz-indexやmarginを調整する方法が有効。このCSSコードを追加する。

/* ページトップボタン非表示 */
#pagetop {
	display: none;
}

/* PTCHAマークを手前に表示 */ 
.grecaptcha-badge{
	margin-bottom:var(--recaptcha-badge-position);
	z-index:9999;
}

このコードでページトップボタンを非表示にし、さらに「reCAPTCHA」アイコンを前面に表示するよう設定。これにより、重なりの問題は解消されるが、お問い合わせページだけはページトップボタンが非表示になるというデメリットも発生する。しかし、ユーザーがお問い合わせページでページトップに戻る必要性はそれほど高くないため、大きな問題にはならないだろう。

まとめ

この手順を実行することで、「SWELL」テーマを使用しているWordPressサイトで「reCAPTCHA」を特定のページにのみ表示させ、表示に関する問題も解消できる。これにより、サイトの表示速度を最適化し、ユーザーエクスペリエンスを向上させることが可能だ。