WordPress自定义主题特定内容权限控制及弹窗实现技术咨询

Got it, let's fix this properly—since you already know front-end-only JS checks are insecure (smart call!), we’ll combine server-side validation (for security) with front-end JS (for the user-friendly popup) to make this work reliably. Here’s a step-by-step solution tailored to your setup:

Front-end checks can be bypassed easily, so we need to confirm access rights on the server first. We’ll pass a verified access status to the front-end and optionally block sensitive content from being sent to unauthorized users.

Add this to your theme’s functions.php or the specific template file for your list page:

function validate_premium_access() {
    // Get current logged-in user
    $current_user = wp_get_current_user();
    
    // Define roles that ARE allowed to access the Premium tab (adjust these to your needs)
    $allowed_roles = array('administrator', 'premium_subscriber');
    
    // Check if user has access
    $has_access = false;
    if (is_user_logged_in()) {
        foreach ($allowed_roles as $role) {
            if (in_array($role, $current_user->roles)) {
                $has_access = true;
                break;
            }
        }
    }
    
    // Pass verified access status to front-end JS (can't be tampered with easily)
    wp_localize_script('your-theme-main-js', 'premiumPermissions', array(
        'hasAccess' => $has_access,
        'isLoggedIn' => is_user_logged_in()
    ));
    
    // Optional: Server-side block to prevent unauthorized users from seeing Premium content in source code
    if (!$has_access) {
        add_filter('the_content', function($content) {
            // Target only your list page (adjust the condition to match your page's ID/slug)
            if (is_page('your-list-page-slug')) {
                // Replace Premium tab content with a hidden trigger for the popup
                $content .= '<div id="premium-access-trigger" style="display:none;"></div>';
            }
            return $content;
        });
    }
}
add_action('wp_enqueue_scripts', 'validate_premium_access');

Now we’ll use the verified server-side status plus your existing body role classes to trigger the popup when unauthorized users try to access the Premium tab. Add this to your theme’s main JS file:

document.addEventListener('DOMContentLoaded', function() {
    // Target your Premium tab (adjust the selector to match your tab's class/id)
    const premiumTab = document.querySelector('.tab--premium');
    // Target your existing popup element (adjust selector to match your popup's ID)
    const accessPopup = document.querySelector('#premium-login-popup');
    // Optional: Target an overlay for the popup
    const popupOverlay = document.querySelector('#popup-overlay');

    // Function to show the popup
    function showAccessPopup() {
        accessPopup.style.display = 'block';
        popupOverlay.style.display = 'block';
        document.body.style.overflow = 'hidden'; // Lock scrolling
    }

    // Function to hide the popup
    function hideAccessPopup() {
        accessPopup.style.display = 'none';
        popupOverlay.style.display = 'none';
        document.body.style.overflow = 'auto'; // Unlock scrolling
    }

    // Check if user clicks the Premium tab without access
    if (premiumTab && !premiumPermissions.hasAccess) {
        premiumTab.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            showAccessPopup();
        });
    }

    // Handle direct URL hash navigation to the Premium tab
    if (window.location.hash === '#premium' && !premiumPermissions.hasAccess) {
        showAccessPopup();
        window.location.hash = ''; // Prevent loop
    }

    // Add close functionality to popup buttons
    document.querySelectorAll('.popup__close').forEach(btn => {
        btn.addEventListener('click', hideAccessPopup);
    });
});

If you need a basic popup template, add this to your theme’s footer.php or list page template:

<!-- Popup Overlay -->
<div id="popup-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:999;"></div>

<!-- Premium Access Popup -->
<div id="premium-login-popup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:2.5rem; border-radius:8px; z-index:1000; width:90%; max-width:400px;">
    <h3>Premium Content Access</h3>
    <?php if (!is_user_logged_in()) : ?>
        <p>Please log in or sign up to view premium content.</p>
        <a href="<?php echo wp_login_url(get_permalink()); ?>" class="btn">Log In</a>
        <a href="<?php echo wp_registration_url(); ?>" class="btn btn--secondary">Sign Up</a>
    <?php else : ?>
        <p>Your account doesn’t have access to premium content. Upgrade your plan to unlock it!</p>
        <!-- Add your upgrade link here -->
        <a href="/upgrade-plan" class="btn">Upgrade Now</a>
    <?php endif; ?>
    <button class="popup__close" style="position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer;">×</button>
</div>

• Never rely solely on front-end checks: The server-side validation ensures unauthorized users can’t view Premium content even if they bypass the popup via browser dev tools.
• Adjust selectors: Make sure all CSS selectors match your theme’s actual tab and popup classes/IDs.
• Test edge cases: Verify behavior for logged-out users, allowed roles, and restricted roles to ensure everything works as expected.

内容的提问来源于stack exchange，提问作者EMAT Digital Marketing