给wordpress网站内容添加一个密码保护功能（新）

之前我的网站有一个页面添加了密码保护功能，不过它是通过wordpress自带的密码保护实现的，通过代码美化了保护页的样式。这个功能在wordpress 7.0更新后可能出现一个小问题，就是用户输入密码后不能马上看到内容，可能出现一个空白页面，url是：网址/wp-login.php?action=postpass，需要再次刷新才能看到真实页面。所以我觉得有必要更新一下这个功能，用新方法给wordpress网站内容添加一个密码保护功能。

功能代码

这里直接给出代码，大家如有需要，可以直接把它添加到主题的functions.php文件中，或者是添加到wp code之类代码管理插件中，也可以改造成插件安装（这个不建议）。

// ========== YRWP 密码保护短代码 ==========

function yrwp_pp_get_cookie_name($post_id, $index) {
    return 'yrwp_pp_' . $post_id . '_' . $index;
}

function yrwp_pp_shortcode($atts, $content = null) {
    static $yrwp_pp_index = 0;
    $yrwp_pp_index++;
    $post_id = get_the_ID();

    $atts = shortcode_atts(array(
        'password' => '',
        'keyword'  => '案例',
        'qrcode'   => '填写图片URL，如一个二维码图片URL',
        'account'  => 'wordpress建站开发',
        'expire'   => 30,
        'title'    => '请输入密码',
    ), $atts, 'yrwp_protect');

    if (empty($atts['password'])) {
        return '<p style="color:red;">[YRWP 密码保护] 错误：缺少 password 参数。</p>';
    }

    $correct_password = $atts['password'];
    $cookie_name      = yrwp_pp_get_cookie_name($post_id, $yrwp_pp_index);
    $cookie_duration  = intval($atts['expire']) * 60;

    // 检查 cookie
    $is_verified = false;
    if (isset($_COOKIE[$cookie_name]) && $_COOKIE[$cookie_name] === md5($correct_password . $post_id . $yrwp_pp_index)) {
        $is_verified = true;
    }

    // 处理 POST 提交
    $error_message = '';
    if (!$is_verified && isset($_POST['yrwp_pp_submit']) && isset($_POST['yrwp_pp_index']) && intval($_POST['yrwp_pp_index']) === $yrwp_pp_index) {
        $input = isset($_POST['yrwp_pp_password']) ? sanitize_text_field(wp_unslash($_POST['yrwp_pp_password'])) : '';
        if ($input === $correct_password) {
            $is_verified = true;
            $hashed = md5($correct_password . $post_id . $yrwp_pp_index);
            setcookie($cookie_name, $hashed, time() + $cookie_duration, COOKIEPATH, COOKIE_DOMAIN, is_ssl(), true);
            $_COOKIE[$cookie_name] = $hashed;
        } else {
            $error_message = '密码错误，请重试。';
        }
    }

    if ($is_verified) {
        return do_shortcode($content);
    }

    ob_start();
    ?>
    <div class="yrwp-pp-wrapper">
        <div class="yrwp-pp-card">
            <div class="yrwp-pp-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="5" y="11" width="14" height="10" rx="2" fill="currentColor" opacity="0.15"/>
                    <path d="M7 11V7a5 5 0 1 1 10 0v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    <circle cx="12" cy="16" r="1.5" fill="currentColor"/>
                    <path d="M12 17.5v1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
            </div>
            <h2 class="yrwp-pp-title"><?php echo esc_html($atts['title']); ?></h2>
            <p class="yrwp-pp-desc">为了防止恶意骚扰，请输入密码后查看案例。</p>
            <?php if ($error_message): ?>
                <div class="yrwp-pp-error"><?php echo esc_html($error_message); ?></div>
            <?php endif; ?>
            <form method="post" class="yrwp-pp-form">
                <input type="hidden" name="yrwp_pp_index" value="<?php echo esc_attr($yrwp_pp_index); ?>">
                <div class="yrwp-pp-input-group">
                    <input type="password" name="yrwp_pp_password" class="yrwp-pp-input" placeholder="请输入密码" required autocomplete="off">
                    <button type="submit" name="yrwp_pp_submit" class="yrwp-pp-btn">提交</button>
                </div>
            </form>
            <div class="yrwp-pp-wechat">
                <div class="yrwp-pp-wechat-inner">
                    <div class="yrwp-pp-qrcode">
                        <img src="<?php echo esc_url($atts['qrcode']); ?>" alt="公众号二维码" loading="lazy">
                    </div>
                    <div class="yrwp-pp-wechat-text">
                        <p>关注<strong>【<?php echo esc_html($atts['account']); ?>】</strong>微信公众号</p>
                        <p>回复<strong>【<?php echo esc_html($atts['keyword']); ?>】</strong>获取密码</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('yrwp_protect', 'yrwp_pp_shortcode');

// 内联样式（只输出一次）
function yrwp_pp_inline_styles() {
    ?>
    <style>
    .yrwp-pp-wrapper{display:flex;justify-content:center;align-items:center;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#F0F4FF;border-radius:12px}
    .yrwp-pp-card{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:480px;width:100%;text-align:center;box-shadow:0 4px 24px rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.06)}
    .yrwp-pp-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#DBEAFE;color:#2563EB;margin-bottom:20px}
    .yrwp-pp-title{font-size:20px;font-weight:700;color:#1E293B;margin:0 0 12px;line-height:1.4}
    .yrwp-pp-desc{font-size:14px;color:#64748B;margin:0 0 20px;line-height:1.6}
    .yrwp-pp-error{background:#FEF2F2;color:#EF4444;font-size:13px;padding:8px 16px;border-radius:8px;margin-bottom:16px;border:1px solid #FECACA;display:inline-block}
    .yrwp-pp-form{margin-bottom:24px;max-width:360px;margin-left:auto;margin-right:auto}
    .yrwp-pp-input-group{display:flex;gap:0;border:2px solid #2563EB;border-radius:8px;overflow:hidden}
    .yrwp-pp-input-group:focus-within{box-shadow:0 0 0 3px rgba(37,99,235,.15)}
    .yrwp-pp-input{flex:1;border:none;outline:none;padding:12px 16px;font-size:15px;color:#1E293B;background:#fff;min-width:0}
    .yrwp-pp-input::placeholder{color:#94A3B8}
    .yrwp-pp-btn{flex-shrink:0;background:#2563EB;color:#fff;border:none;padding:12px 28px;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
    .yrwp-pp-btn:hover{background:#1D4ED8}
    .yrwp-pp-wechat{background:linear-gradient(135deg,#F8FAFC,#F1F5F9);border-radius:8px;padding:20px;border:1px solid #E2E8F0}
    .yrwp-pp-wechat-inner{display:flex;align-items:center;gap:20px;justify-content:center}
    .yrwp-pp-qrcode{flex-shrink:0;width:100px;height:100px;border-radius:8px;overflow:hidden;border:2px solid #E2E8F0;background:#fff}
    .yrwp-pp-qrcode img{width:100%;height:100%;object-fit:cover;display:block}
    .yrwp-pp-wechat-text{text-align:left}
    .yrwp-pp-wechat-text p{margin:0;font-size:13px;color:#64748B;line-height:1.8}
    .yrwp-pp-wechat-text strong{color:#2563EB;font-weight:600}
    @media (max-width:480px){
        .yrwp-pp-wrapper{padding:20px 12px}
        .yrwp-pp-card{padding:28px 20px 24px}
        .yrwp-pp-wechat-inner{flex-direction:column;text-align:center}
        .yrwp-pp-wechat-text{text-align:center}
        .yrwp-pp-input-group{flex-direction:column;border:none;gap:8px}
        .yrwp-pp-input{border:2px solid #2563EB;border-radius:8px}
        .yrwp-pp-btn{border-radius:8px;padding:12px}
    }
    </style>
    <?php
}
add_action('wp_head', 'yrwp_pp_inline_styles');

内容修改说明

代码中的中文提示可以按需修改，图片URL可按需填写，比如放一个公众号二维码。

所有场景

这个功能可以用来对网站中的一些特别页面加密。其实在很多资源分享网站中都有类似的功能，让你关注某某公众号才能获得下载链接。这个功能可以用到做一些推广引流。不过你的网站和内容得有用户基础才行，新站没什么流量的网站就不要随便用了，否则别人看到东西还要密码，还要关注公众号，直接就划走了。

使用方法

【yrwp_protect password="123456"】
中间中正式内容
【/yrwp_protect】

注:正式使用时，请把上面短代码括号【】换成[]

1.在页面的开头，添加一个简码模块，输入第一行代码，密码可以自定义。

2.中间就放正式内容，你用任何页面编辑器都无所谓。

3.最后放闭合短代码（第3行），直接原样复制，不要改。

如果你在上面代码中添加的是二维码图片，那么你最好在公众号去添加一个自动回复，用户回复关键词后，公众号就直接给出密码了。

注意：使用本方法就不要使用wordpress自带的密码保护功能了，需要把原来的密码删除掉。

最终的效果如上图所示。