WordPressにCloudflare Turnstileを導入する方法（Contact Form 7対応）

WEB Tips ウェブ・アプリ

この記事にはプロモーションが含まれています

目次

前の記事で、Cloudflare TurnstileがreCAPTCHAの完璧な代替手段になることを詳しく解説しました。今回は、「実際にどうやって設定するの？」という疑問に対して詳しく説明していきます。

この記事では、専門知識がない方でも迷わずに設定できるよう、スクリーンショット付きで詳しく解説します。

この記事でわかること

  • Cloudflareでのアカウント作成とキー取得
  • WordPressプラグインを使った簡単導入
  • Contact Form 7での設定方法
  • 動作確認とトラブル対処法

作業時間は約30分。一緒に設定していきましょう！

作業の流れと準備

導入作業の流れ

  • Cloudflareアカウント作成（5分）
  • Turnstileウィジェット作成（5分）
  • WordPressプラグイン導入（10分）
  • Contact Form 7設定（5分）
  • 動作確認（5分）

事前に用意するもの

  • WordPressサイトの管理者権限
  • メールアドレス（Cloudflareアカウント用）
  • サイトのURL（設定時に入力）

注意事項

  • 念のため、サイト全体のバックアップを取得
  • 作業はアクセスの少ない時間帯に実施
  • テスト環境があれば、そちらで先に試用してみる

それでは、実際の導入作業に進みます！

ステップ1：Cloudflareアカウント作成

既にCloudflareのアカウント取得済みの場合は、ステップ2に進みます。

1-1. Cloudflare公式サイトにアクセス

  1. ブラウザでサインアップURLにアクセス
    https://dash.cloudflare.com/sign-up
  2. アカウント作成画面で情報を入力
    • Email（メールアドレス）：普段使っているアドレス
    • Password（パスワード）：8文字以上の安全なパスワード
  3. 「Create Account」ボタンをクリック

1-2. メール認証の完了

  1. 登録したメールアドレスに確認メールが届く
  2. メール内の「Verify email address」リンクをクリック
  3. 認証完了画面が表示される
  • メールが届かない場合は、迷惑メールフォルダもチェック
  • @cloudflare.comからのメールを受信できるよう設定確認

1-3. Cloudflareダッシュボードへのログイン

認証完了後、自動的にCloudflareのダッシュボードに移動します。これでCloudflareアカウント作成ができました。

Cloudflareログイン：https://dash.cloudflare.com/login

ステップ2：Turnstileウィジェット作成

2-1. Turnstileページにアクセス

1. ダッシュボード左側のメニューから「Turnstile」をクリック

2.「Add widget」（ウィジェットを追加）ボタンをクリック

2-2. ウィジェット設定の入力

ウィジェット名：

例：My Blog Turnstile （識別しやすい名前を自由に入力）

ホスト名管理：

  1. 「ホスト名の追加」ボタンをクリック
  2. 「カスタム ホスト名を追加する」の項目でホスト名を入力し、「追加」
  3. 追加したホスト名にチェックを入れ、一番下の「追加」ボタンをクリック
例：example.com, www.example.com
（サイトのURLを入力）
  • https://は不要、ドメイン名のみ入力
  • wwwありと無しの両方を入力推奨
  • サブドメインがある場合は追加で入力
カスタムホスト名を追加するにサイトのドメインを追加
ホスト名にチェックを入れ、追加ボタンをクリック

Widget Mode（ウィジェットモード）：

Managed（管理対象）を選択（推奨）。
必要に応じてチェックボックス表示、通常は自動で評価されます。

このサイトの事前クリアランスを選択しますか?

事前クリアランスは「一度検証したユーザーには、しばらく再検証を求めない」仕組みで、デフォルトでは「いいえ」です。

設定はお好みで。「はい」にした場合は、事前クリアランスのレベルを選択する必要があります。注意点は事前クリアランスを高く設定しすぎると、悪意のあるユーザーも簡単に通過してしまう可能性があります。

公式：Clearance

2-3. ウィジェット作成完了

1.「Create」（作成）ボタンをクリック

2.「サイトキー」と「シークレットキー」の情報が表示されます。（重要！）

  • Site Key：ウェブサイトに表示するための公開キー
  • Secret Key：サーバーで認証するための秘密キー

重要：このキーは後で使用するので、画面を閉じずにそのままにしておいてください。

ステップ3：WordPressプラグイン導入

3-1. 推奨プラグインの選択

Turnstile対応のWordPressプラグインは複数ありますが、「Simple Cloudflare Turnstile」が最もおすすめです。

Simple Cloudflare Turnstile – CAPTCHA Alternative
おすすめの理由
  • 設定が簡単
  • 多くのフォームプラグインに対応している
  • 定期的にアップデートされている
  • 日本語に対応している

3-2. プラグインのインストール

WordPressダッシュボードでの作業

  1. 「プラグイン」→「新規追加」をクリック
  2. 検索ボックスに以下を入力： Simple Cloudflare Turnstile
  3. 検索結果から該当プラグインを見つけて「今すぐインストール」
  4. インストール完了後「有効化」をクリック

3-3. プラグインの基本設定

Simple Cloudflare Turnstile設定画面を開く

  1. 「設定」→「Cloudflare Turnstile」をクリック

APIキー情報の入力：

  1. 「Site Key」欄にCloudflareのSite Keyを入力
  2. 「Secret Key」欄にCloudflareのSecret Keyを入力
  • Cloudflareの画面とWordPress画面を別タブで開く
  • キーをコピーする際は先頭や末尾に余分なスペースが入らないよう注意

3-4. 基本機能の有効化

「フォームで Turnstile を有効化する」の項目

推奨設定（初期設定）：

☑️ WordPress Login（ログインページ）
☑️ WordPress Registration（ユーザー登録）
☑️ WordPress Lost Password（パスワードリセット）
☑️ WordPress Comments（コメント投稿）
☑️ Contact Form 7（お問い合わせフォーム）

設定のポイント：

  • すべてにチェックを入れても問題なし
  • 不要な機能は後から無効化可能
  • Contact Form 7を使用している場合は必須でチェック

基本設定では、テーマ・言語を選択。高度な設定ではさらに外観やエラーメッセージをカスタマイズできます。

3-5. テスト実行（重要）

「Test Response」ボタンをクリック：

  • 正常な場合：「Success!」と表示される
  • エラーの場合：エラーメッセージが表示される

注意： このテストが成功するまで、Turnstileは動作しません。必ず成功させてから次に進んでください。

よくあるエラーと対処法
  • 「Invalid Secret Key」：Secret Keyの入力ミス→再入力
  • 「Invalid Site Key」：Site Keyの入力ミス→再入力
  • 「Domain not allowed」：ホスト名設定ミス→Cloudflareで修正

ステップ4：Contact Form 7での設定

Contact Form 7でTurnstileを使用する方法は2つあります。順に説明します。

方法1：Simple Cloudflare Turnstileプラグインを使う

Simple Cloudflare Turnstileプラグインで、フォームだけでなくWordPress全体を保護したい場合に一括管理できます。

メリット
  • 設定が簡単
  • 定期的にアップデートされている
  • WordPressトータルで保護できる

設定手順：

  1. Simple Cloudflare TurnstileでContact Form 7にチェックを入れる
  2. Contact Form 7 フォームにショートコード追加

  3. 確認方法：フォームページで送信ボタンの上にウィジェットが表示

方法2：Contact Form 7標準機能（v6.1以降）

新しいContact Form 7の統合機能を使用。Contact Form 7バージョン6.1以降ではCloudflare Turnstileが標準機能として装備されました。

メリット
  • Contact Form 7の公式機能
  • 設定が保護されやすい
  • 将来のアップデートに強い
  1. 「お問い合わせ」→「インテグレーション」をクリック
  2. 「Turnstile」セクションで「インテグレーションのセットアップ」
  3. キー情報を入力：
    • サイトキー：CloudflareのSite Key
    • シークレットキー：CloudflareのSecret Key
  4. 「変更を保存」をクリック
  5. 表示箇所を微調整
Turnstileのセクションで「インテグレーションのセットアップ」ボタンをクリック
Cloudflareのサイトキー・シークレットキーをコピペして「変更を保存」をクリック

Turnstileウィジェットの表示位置をカスタマイズ

Contact Form 7でTurnstileのサイトキー・シークレットキーを入力するだけでTurnstileは有効になります。

しかしデフォルトではフォームの一番上にTurnstileウィジェットが表示されます。

デフォルトではフォームの先頭にTurnstileウィジェットが表示される

Contact Form 7のフォームでTurnstileウィジェットを表示させたい場所に[turnstile]ショートコードを挿入します。

以下の例では、送信ボタン[submit 送信]の前に[turnstile]を配置しました。

CF7フォーム画面でTurnstileウィジェットを表示させたい場所に[turnstile]ショートコードを挿入

ウィジェットが送信ボタンの前に移動できました。

その他のカスタマイズ・使用できるパラメータ

theme（テーマ）

ウィジェットの外観を設定

  • light – ライトテーマ（デフォルト）
  • dark – ダークテーマ
  • auto – ユーザーのシステム設定に従って自動選択
size（サイズ）

ウィジェットのサイズを設定

  • normal – 通常サイズ（デフォルト）W300px H65px
  • compact – コンパクトサイズ W150px H140px
  • Flexible – レスポンシブデザイン用 W100% (min: 300px) H65px
language（言語）

ウィジェットの表示言語を設定

  • ja – 日本語
  • en – 英語
  • auto – ブラウザの言語設定に従う（デフォルト）
action（アクション）

分析用のアクション名を設定

  • submit – フォーム送信
  • login – ログイン
  • contact – お問い合わせ
  • カスタム文字列も可能
tabindex（タブインデックス）

キーボードナビゲーション用のタブ順序を設定

  • 数値（例：1, 2, 3）

実例1:ダークテーマ + コンパクトサイズ

[turnstile theme:dark size:compact]
ダークテーマ・コンパクトサイズ

実例2: 日本語 + カスタムアクション

[turnstile theme:light language:ja action:contact-form]
ライトテーマ

ステップ5：動作確認とテスト

5-1. フロントエンド表示の確認

確認すべきポイント：

  1. ウィジェット表示の確認
    • フォーム送信ボタンの上に表示されているか
    • デザインがサイトに馴染んでいるか
    • モバイル表示でも正常か
  2. 認証動作の確認
    • チェックボックスをクリックできるか
    • 1〜2秒で「✓」マークが表示されるか
    • エラーメッセージが出ないか

5-2. 実際のフォーム送信テスト

テスト手順：

  1. 自分でフォームに入力
    • 名前、メール、メッセージなど必須項目を入力
    • Turnstileのチェックボックスをクリック
  2. 送信ボタンをクリック
    • 正常に送信完了メッセージが表示されるか
    • 管理者にメールが届くか
  3. 複数回テスト
    • 連続送信でも正常動作するか
    • 時間を空けてもう一度テスト

5-3. 異なるデバイスでのテスト

テスト環境：

  • PC（Windows/Mac）
  • スマートフォン（iOS/Android）
  • タブレット

確認項目：

  • ウィジェットが適切なサイズで表示される
  • タッチ操作で正常に認証できる
  • 画面が崩れていない

5-4. ボット対策効果の確認

Cloudflareダッシュボードでの確認：

  1. Turnstileページに戻る
  2. 作成したウィジェットをクリック
  3. 「Analytics」タブで統計を確認

確認できる情報：

  • 総リクエスト数
  • 成功率
  • ブロックされたボット数

よくある問題と解決法

トラブル1：ウィジェットが表示されない

フォームにTurnstileが表示されない、送信ボタンのみ表示されるなど。

原因1：テスト実行未完了

対処法：
WordPress設定画面で「Test Response」を実行
→「Success!」が表示されるまで繰り返す

原因2：キャッシュの影響

対処法：
1. ブラウザキャッシュをクリア
2. キャッシュプラグインのキャッシュを削除
3. Cloudflareキャッシュをパージ（使用している場合）

原因3：JavaScriptエラー

対処法：
1. ブラウザの開発者ツールでエラーを確認
2. 他のプラグインとの競合をチェック
3. テーマとの相性を確認

トラブル2：認証が通らない

チェックボックスをクリックしてもエラーになる、「認証に失敗しました」メッセージが出るなど。

原因1：ドメイン設定ミス

対処法：Cloudflareのホスト名設定を確認
正しい例：example.com, www.example.com
間違い例：https://example.com

原因2：時刻のずれ

対処法：サーバーの時刻設定を確認 WordPressの時刻設定も確認

トラブル3：フォーム送信でエラー

  • Turnstileは成功するが、フォーム送信でエラー
  • 「送信に失敗しました」メッセージ

原因1：サーバー側検証の失敗

対処法：
Secret Keyの設定を再確認
WordPressとCloudflareの設定を照合する

原因2：他のプラグインとの競合

対処法： 1. 他のセキュリティプラグインを一時無効化 2. プラグインを一つずつ有効化して原因特定 3. 競合するプラグインの設定調整

トラブル4：モバイルで動作しない

  • PCでは正常だがスマートフォンでエラー
  • ウィジェットが見切れる

原因1：レスポンシブ対応不足

対処法： 1. テーマのCSS調整 2. ウィジェットサイズを「compact」に変更 3. カスタムCSSの追加

原因2：JavaScript読み込みエラー

対処法： 1. モバイル用の軽量化設定を確認 2. 遅延読み込み設定の調整 3. AMPページでの動作確認

まとめ

本記事では、WordPressサイトにCloudflare Turnstileの導入方法を解説しました。

導入が完了したら、以下のチェックリストを元に正常に動作しているかをチェックしてみてください。

導入完了のチェックリスト

  • [　 ] Cloudflareでウィジェット作成完了
  • [　 ] WordPressプラグイン設定完了
  • [　 ] Contact Form 7でTurnstile表示確認
  • [　 ] 実際のフォーム送信テスト成功
  • [　 ] モバイルでの動作確認完了
  • [　 ] 旧reCAPTCHA設定の削除（移行の場合）

Turnstile導入により、1ヶ月後にはスパム減少率80%以上、フォーム完了率10～15%向上、そしてreCAPTCHA有料化分の確実なコスト削減効果が期待できます。導入前にGoogle Cloud料金計算ツールで算出した予想コストと比較すれば、年間コストの削減効果を実感できるでしょう。

今後は月1回の動作確認とCloudflareアナリティクスの確認、適宜のプラグインアップデートにより、安定したセキュリティ環境を維持していくことが重要です。

Google reCAPTCHA無料枠が大幅縮小！2025年に知っておくべき対策
「あれ、お問い合わせフォームが動かない…」 そんな事態が多くのサイトで起こる可能性があります。原因は、Google reCAPTCHA（リキャプチャ …
記事を読む
reCAPTCHA代替！完全無料Cloudflare Turnstileの解説
前回の記事「Google reCAPTCHA無料枠が大幅縮小！2025年に知っておくべき対策」で、Google reCAPTCHAの無料枠が月100万→1万リク …
記事を読む