Simple Cloudflare Turnstileを導入してみた

GoogleのCaptchaが課金制になるかもという記事を見かけたので代替として使われてるCloudflareのTurnstileを導入してみたので備忘録。

導入方法は他のブログを参照してください。分かりやすいので。

僕が参考にした記事「【2025年】reCAPTCHAの代替となる「Cloudflare Turnstile」の使い方」

このブログと、通販サイトでは無事にTurnstileのウィジェットが表示されたけど、フロントエンドにカスタムログイン、カスタム登録フォームを実装したサイトではTurnstileウィジェットが表示されなかったので、Chat GPTに生成してもらいました。

その備忘録です。

まず、インストールしたSimple Cloudflare Turnstileプラグインは、WordPressの標準的なフォーム（wp-login.php、wp-comments-post.php など）や Contact Form 7 には自動で統合されますが、独自に作成したログイン・登録フォームには手動で埋め込む必要がありました。

以下は、独自テンプレートで Turnstile を表示・検証するための手順です。

1. フォーム内のログインボタンなどの前に下記のコードを挿入

<div class="cf-turnstile" data-sitekey="あなたのサイトキー"></div>

「data-sitekey」には Cloudflare Turnstile の管理画面から取得した 「Site Key」を入れてください。

例：

<form method="post" action="">
ここにユーザー名やパスワードなどのコード
<div class="cf-turnstile" data-sitekey="0x4AAAA..."></div>
<button type="submit">ログイン</button>
</form>

このように、サブミットボタンの前に配置します。

2. Turnstile スクリプトの読み込み（必要に応じて）

通常はプラグインが自動でスクリプトを読み込みますが、独自テーマで 「wp_footer()」 を使っていない場合は、スクリプトの読み込みを追加してください。

function enqueue_turnstile_script() {
    wp_enqueue_script(
        'cf-turnstile',
        'https://challenges.cloudflare.com/turnstile/v0/api.js',
        [],
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_turnstile_script');

3. サーバー側での検証（重要）

フォームの処理側（「functions.php」 など）で、**Cloudflare Turnstile の検証処理を追加します。

function validate_turnstile_token() {
    if (empty($_POST['cf-turnstile-response'])) {
        return new WP_Error('turnstile_error', 'Turnstileの検証が必要です。');
    }

    $response = wp_remote_post('https://challenges.cloudflare.com/turnstile/v0/siteverify', [
        'body' => [
            'secret'   => 'あなたのシークレットキー',
            'response' => sanitize_text_field($_POST['cf-turnstile-response']),
            'remoteip' => $_SERVER['REMOTE_ADDR']
        ]
    ]);

    $body = json_decode(wp_remote_retrieve_body($response), true);

    if (empty($body['success'])) {
        return new WP_Error('turnstile_error', 'Turnstileの検証に失敗しました。');
    }

    return true;
}

これで無事にフロントエンドに実装した独自のログインフォームと登録フォームにもTurnstileウィジェットが表示されました。

参考までに。※注意：試す場合はファイルのバックアップは必ずとっておきましょう！