2026/09/11
問い合わせフォーム経由で送られる迷惑メール対策として、「Google reCAPTCHA」 に代わって 「Cloudflare Turnstile」 が使われることが多くなりました。
WordPress の定番メールフォームプラグイン 「Contact Form 7」 においても、Cloudflare Turnstile の利用が推奨されています。
バックグラウンドで動作/通信を行い、サイトを閲覧/フォームを操作をしているのが 「人間か、Botか」 を判定 → Bot判定された場合には、メールフォームからの送信をシャットアウトする … というものです。
遅々との遭遇
Contact Form 7 の 「インテグレーション」 から Cloudflare Turnstile を設定すると、サイトの全ページに対して以下のコードが追加されます。
▼ <head> 内
<link rel='dns-prefetch' href='//challenges.cloudflare.com' />▼ </footer> のあと
<script data-wp-strategy="async" id="cloudflare-turnstile-js" src="https://challenges.cloudflare.com/turnstile/v0/api.js"></script>
<script id="cloudflare-turnstile-js-after">
document.addEventListener( 'wpcf7submit', e => turnstile.reset() );
//# sourceURL=cloudflare-turnstile-js-after
</script>特に、<head> 内に挿入される dns-prefetch が、時として問題になることがありまして …
の応答を待っています⏳
のまま、遅々として進まない …
ページの表示が阻害されるケースに何度か遭遇しました。
対応・改善
Cloudflare Turnstile のバックグラウンド通信が必要とされるのは (狭義には) Contact Form が置かれているページのみなので …
上記コードが挿入されるのは、当該ページのみに限定するのが望ましいんじゃ？
ということで、
不要なページではカット ＝ 上記ソースが書き出されないようにするカスタマイズの覚書です。
functions.php に
以下を追記してやります。
// Contact Form 7 + Cloudflare Turnstile を使用するページの判定
function mytheme_is_cf7_page() {
if ( ! is_singular() ) { return false; }
$post = get_post();
if ( ! $post ) { return false; }
// ▼ ショートコードで埋め込まれている場合
if ( has_shortcode( $post->post_content, 'contact-form-7' ) ) { return true; }
// ▼ Gutenberg ブロックで埋め込まれている場合
if ( has_block( 'contact-form-7/contact-form-selector', $post ) ) { return true; }
return false;
}
// dns-prefetch の除去
add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
if ( $relation_type !== 'dns-prefetch' ) { return $hints; }
if ( ! mytheme_is_cf7_page() ) {
$hints = array_values( array_filter( $hints, function ( $hint ) {
$url = is_array( $hint ) ? ( $hint['href'] ?? '' ) : $hint;
return strpos( $url, 'challenges.cloudflare.com' ) === false;
} ) );
}
return $hints;
}, 10, 2 );
// JS, CSS も あわせて除去
add_action( 'wp_enqueue_scripts', function () {
if ( ! mytheme_is_cf7_page() ) {
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_script( 'cloudflare-turnstile' );
}
}, 99 ); // プラグインのエンキュー後に実行するため 99Contact Form が無いページでは CF7 や Turnstile の JavaScript, CSS も読み込まないようにすることで、わずかながらも高速化になります。
判定をスラッグで行う場合
上記は、お客様側で任意のページに Contact Form を増設するかもしれない場合を想定し、ショートコード or CF7カスタムブロックの有無で判定していますが
ページスラッグで判定するならもっと単純になりますね
// Contact Form 7 + Cloudflare Turnstile を使用するページの判定
function mytheme_is_cf7_page() {
return is_page( 'contact' ); // ←スラッグで指定 ※複数なら is_page( ['contact', 'inquiry'] ) など
}参考
dns-prefetch
dns-prefetch は読み込み時間を短縮する技術で、ページ読み込みの遅延にはならない … とされていますが、
DNSプリフェッチは、ページの読み込みと同時に実行されまたCPUやネットワークへの負荷が低いため、そのほかの処理を遅らせてしまう心配もほとんどありません。
DNSプリフェッチでウェブページの読み込み速度をスピードアップ – 海外SEO情報ブログ
実際問題として、表示が阻害されるケースがありました。 先述のように、CF7のインテグレーションによって全ページに一律導入されてしまうような場合は、必要ないページで除外しておくのが良さそうです。
CF７ + Cloudflare Turnstile
問い合わせフォームのスパム対策として Cloudflare Turnstile を導入する意義や具体的な方法については、エックスサーバーの記事がわかりやすいです。
フォームのスパム対策としてこれまでは、Googleの 『reCAPTCHA（リキャプチャ）』 を活用するのが一般的でした。しかし近年、『reCAPTCHA』 の無料利用枠が大幅に縮小されました。 (中略) そこで今注目されているのが、新しいスパム対策 『Cloudflare Turnstile（クラウドフレア ターンスタイル）』 です。
reCAPTCHAの代替『Cloudflare Turnstile』のメリットや導入方法 – エックスサーバー
Copy URL
