フロントエンド側
.cf-turnstileは固定されたフォーマットなので、変更不可。
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="サイトキー" data-callback="onTurnstileSuccess" data-expired-callback="onTurnstileExpired" data-error-callback="onTurnstileError" data-language="ja"></div>
<script>
let turnstileToken = null;
function onTurnstileSuccess(token) {
console.log("✅ Turnstile 成功:", token);
turnstileToken = token;
document.getElementById("submit-btn").disabled = false;
}
function onTurnstileExpired() {
console.log("⏳ Turnstile 期限切れ");
turnstileToken = null;
document.getElementById("submit-btn").disabled = true;
}
function onTurnstileError() {
console.log("❌ Turnstile エラー");
turnstileToken = null;
document.getElementById("submit-btn").disabled = true;
}
function isTurnstileCompleted() {
return !!turnstileToken;
}
</script>
サーバー側
$token = $_POST['cf-turnstile-response'] ?? '';
if ($token === '') {
wp_send_json([
'message' => '送信ができませんでした。送信手順が正しくない可能性があります。',
], 403);
exit;
}
$data = [];
$data['secret'] = 'YOUR_SECRET_KEY';
$data['response'] = $token;
$data = http_build_query($data, '', '&');
$curl = curl_init();
curl_setopt_array($curl, [
CURLOPT_URL => 'https://challenges.cloudflare.com/turnstile/v0/siteverify',
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_POSTFIELDS => $data,
CURLOPT_TIMEOUT => 10,
]);
$res = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err || $res === false) {
wp_send_json([
'message' => '送信ができませんでした。送信手順が正しくない可能性があります。',
], 403);
exit;
}
$result = json_decode($res, true);
if (
!is_array($result) ||
($result['success'] ?? false) !== true
) {
wp_send_json([
'message' => '送信ができませんでした。送信手順が正しくない可能性があります。',
], 403);
exit;
}