WordPress中实现点击文章「阅读更多」弹出登录弹窗的方案

嘿，作为WordPress新手碰到这个需求完全能理解！其实咱们可以结合WordPress自带的登录状态判断函数，加上一点前端JS交互，就能轻松实现这个功能。下面是具体步骤：

第一步：把用户登录状态传到前端 #

WordPress的PHP函数is_user_logged_in()可以判断用户是否登录，但前端JS没法直接调用，所以咱们先把这个状态传到前端。打开你当前主题的functions.php文件，添加这段代码：

function pass_login_status_to_frontend() {
    ?>
    <script>
        // 全局变量存储登录状态，true是已登录，false是未登录
        window.isUserLoggedIn = <?php echo is_user_logged_in() ? 'true' : 'false'; ?>;
    </script>
    <?php
}
// 把这段代码挂到页面头部输出
add_action('wp_head', 'pass_login_status_to_frontend');

这样页面加载时，前端就有了一个全局变量isUserLoggedIn，用来判断用户状态。

第二步：给「阅读更多」链接加交互逻辑 #

首先，给你文章里的「阅读更多」锚点统一加个类名，比如read-more-trigger（方便JS批量监听）。然后在主题的自定义JS文件里（或者通过后台「外观-自定义-额外CSS/JS」添加脚本）写这段逻辑：

document.addEventListener('DOMContentLoaded', () => {
    // 找到所有带read-more-trigger类的链接
    const readMoreLinks = document.querySelectorAll('.read-more-trigger');
    
    readMoreLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            // 如果用户没登录，阻止默认的锚点跳转
            if (!window.isUserLoggedIn) {
                e.preventDefault();
                // 调用WordPress自带的登录弹窗（大部分主流主题都支持这个内置组件）
                wp.loginForm.show({
                    // 登录成功后跳回当前文章，并且直接定位到阅读更多的锚点位置
                    redirect: window.location.href + link.getAttribute('href')
                });
            }
            // 如果已经登录，就让链接正常跳转到锚点就行
        });
    });
});

小提醒：如果你的主题没内置wp.loginForm这个弹窗组件，也可以自己做个模态框，异步加载wp-login.php的内容，或者用WordPress的AJAX钩子来实现登录表单的加载，效果是一样的。

备选方案：用短代码直接生成条件链接 #

如果你不想写太多JS，也可以在后台用短代码来生成「阅读更多」链接，让后端直接根据登录状态输出不同内容。同样在functions.php里加这段代码：

function custom_read_more_shortcode($atts) {
    // 设置短代码的默认参数
    $params = shortcode_atts([
        'text' => '阅读更多',
        'anchor' => '#more-content'
    ], $atts);
    
    if (is_user_logged_in()) {
        // 已登录用户直接显示正常锚点链接
        return '<a href="' . esc_url($params['anchor']) . '" class="read-more-trigger">' . esc_html($params['text']) . '</a>';
    } else {
        // 未登录用户显示需要登录的链接，配合前面的JS弹窗
        return '<a href="#" class="read-more-trigger">' . esc_html($params['text']) . '</a>';
    }
}
// 注册短代码[custom_read_more]
add_shortcode('custom_read_more', 'custom_read_more_shortcode');

之后在文章编辑时，直接用[custom_read_more text="阅读更多" anchor="#more-123"]代替手动添加的锚点就行，后端会自动根据用户状态输出不同的链接。

这样设置好之后，未登录用户点「阅读更多」就会弹出WordPress默认登录表单，登录成功后自动跳回文章的完整内容位置啦！

内容的提问来源于stack exchange，提问作者Alisa Darya