“滑块安全校验”镶嵌到指定页面

<?php
/*
Template Name: 每次必须验证（不记忆）
*/

// 永远不记住，每次都验证
$is_verified = false;

// 只有本次提交成功，才临时通过
if (isset($_POST['captcha_verified']) && $_POST['captcha_verified'] === '1') {
    $is_verified = true;
}

// ==============================================
// 未验证 → 显示验证界面
// ==============================================
if (!$is_verified) {
    get_header();
?>

<style>
.captcha-container{max-width:460px;margin:60px auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,0.1);}
.captcha-header{background:#1677ff;color:#fff;padding:18px 22px;font-size:18px;}
.captcha-body{padding:24px;}
.captcha-image{position:relative;width:100%;height:240px;background:#113a77;border-radius:6px;overflow:hidden;margin-bottom:20px;}
.captcha-bg{position:absolute;left:0;top:0;width:100%;height:100%;background:url(https://picsum.photos/800/480?blue) center/cover no-repeat;}
.captcha-block{position:absolute;width:60px;height:60px;top:90px;left:140px;border:2px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.3);background:inherit;background-position:-140px -90px;}
.captcha-mask{position:absolute;width:60px;height:60px;top:90px;left:320px;background:rgba(22,119,255,.35);border:2px dashed #fff;}
.captcha-refresh{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;}

.captcha-slider{position:relative;width:100%;height:44px;background:#f5f7fa;border-radius:6px;overflow:hidden;}
.captcha-progress{position:absolute;left:0;top:0;width:0;height:100%;background:#1677ff;opacity:.25;}
.captcha-drag{position:absolute;left:0;top:0;width:46px;height:100%;background:#fff;border:2px solid #1677ff;display:grid;place-items:center;color:#1677ff;cursor:pointer;}
.captcha-tip{position:absolute;left:55px;top:0;height:100%;display:flex;align-items:center;color:#888;font-size:14px;}

.captcha-status{margin-top:14px;text-align:center;font-size:14px;display:none;}
.captcha-status.success{color:#00b42a;}
.captcha-status.fail{color:#ff4d4f;}
</style>

<div class="captcha-container">
    <div class="captcha-header">安全验证</div>
    <div class="captcha-body">
        <form method="post" id="verifyForm">
            <input type="hidden" name="captcha_verified" id="captchaVerified" value="0">
            
            <div class="captcha-image">
                <div class="captcha-bg"></div>
                <div class="captcha-block" id="puzzle"></div>
                <div class="captcha-mask"></div>
                <div class="captcha-refresh" id="refreshBtn">↻</div>
            </div>

            <div class="captcha-slider">
                <div class="captcha-progress" id="progress"></div>
                <div class="captcha-drag" id="dragBtn">→</div>
                <div class="captcha-tip">向右拖动滑块完成验证</div>
            </div>

            <div class="captcha-status" id="status"></div>
        </form>
    </div>
</div>

<script>
const form = document.getElementById('verifyForm');
const verified = document.getElementById('captchaVerified');
const puzzle = document.getElementById('puzzle');
const dragBtn = document.getElementById('dragBtn');
const progress = document.getElementById('progress');
const status = document.getElementById('status');
const refreshBtn = document.getElementById('refreshBtn');

const target = 320;
const start = 140;
const tolerance = 6;
let dragging = false;
let startX = 0;
let current = 0;

function reset() {
    dragBtn.style.left = '0';
    progress.style.width = '0';
    puzzle.style.left = start + 'px';
    status.style.display = 'none';
    dragging = false;
    current = 0;
}

dragBtn.addEventListener('mousedown', e => {
    dragging = true;
    startX = e.clientX;
    dragBtn.style.transition = 'none';
    puzzle.style.transition = 'none';
});

document.addEventListener('mousemove', e => {
    if (!dragging) return;
    const move = e.clientX - startX;
    const max = dragBtn.parentElement.clientWidth - dragBtn.clientWidth;
    current = Math.max(0, Math.min(move, max));
    dragBtn.style.left = current + 'px';
    progress.style.width = current + 'px';
    const scale = (target - start) / max;
    puzzle.style.left = (start + current * scale) + 'px';
});

document.addEventListener('mouseup', () => {
    if (!dragging) return;
    dragging = false;

    const max = dragBtn.parentElement.clientWidth - dragBtn.clientWidth;
    const scale = (target - start) / max;
    const realPos = start + current * scale;

    if (Math.abs(realPos - target) < tolerance) {
        status.textContent = '✅ 验证成功，正在进入...';
        status.className = 'captcha-status success';
        status.style.display = 'block';
        verified.value = '1';
        setTimeout(() => form.submit(), 500);
    } else {
        status.textContent = '❌ 验证失败，请重试';
        status.className = 'captcha-status fail';
        status.style.display = 'block';
        setTimeout(reset, 1000);
    }
});

refreshBtn.addEventListener('click', reset);
</script>

<?php
get_footer();
exit;
}
?>

<!-- ============================================== -->
<!-- ✅ 验证成功后显示你网站的原始内容 -->
<!-- ============================================== -->
<?php get_header(); ?>

<div class="container">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title('<h1>', '</h1>');
            the_content();
        endwhile;
    endif;
    ?>
</div>

<?php get_footer(); ?>