如何在Loop内构建自定义文章导航菜单及动态弹窗侧边栏

Hey there! Let's fix that hardcoded sidebar link issue and make your popup navigation fully dynamic. Here's a step-by-step approach tailored to your setup:

Step 1: Fetch All Custom Posts Upfront #

First, we'll grab all your custom posts in a single query at the top of your template. This avoids redundant database calls inside each popup—way more efficient than querying per popup!

// Replace 'your_custom_post_type' with your actual custom post type slug
$all_custom_posts = get_posts(array(
    'post_type' => 'your_custom_post_type',
    'posts_per_page' => -1, // Fetch all published posts
    'post_status' => 'publish'
));

Step 2: Update Your Main Loop to Generate Dynamic Sidebars #

In your main custom post loop, we'll use the $all_custom_posts array to build the sidebar links for each popup. We'll also add logic to highlight the current post's link with an active class.

// Your main custom post loop
$main_post_query = new WP_Query(array(
    'post_type' => 'your_custom_post_type',
    'posts_per_page' => -1
));

if ($main_post_query->have_posts()) :
    while ($main_post_query->have_posts()) : $main_post_query->the_post();
        $current_post_id = get_the_ID();
?>
        <!-- Clickable Post Item -->
        <div class="post-item" data-post-id="<?php echo $current_post_id; ?>">
            <?php the_title(); ?>
        </div>

        <!-- Hidden Popup for This Post -->
        <div class="popup" id="popup-<?php echo $current_post_id; ?>">
            <div class="popup-inner">
                <!-- Dynamic Sidebar -->
                <aside class="popup-sidebar">
                    <h4>Other Posts</h4>
                    <ul class="sidebar-post-list">
                        <?php foreach ($all_custom_posts as $post) : setup_postdata($post); ?>
                            <?php
                            $sidebar_post_id = get_the_ID();
                            $is_active = ($sidebar_post_id === $current_post_id) ? 'active' : '';
                            ?>
                            <li>
                                <a href="#<?php echo $sidebar_post_id; ?>" class="sidebar-post-link <?php echo $is_active; ?>" data-target="<?php echo $sidebar_post_id; ?>">
                                    <?php the_title(); ?>
                                </a>
                            </li>
                        <?php endforeach; wp_reset_postdata(); ?>
                    </ul>
                </aside>

                <!-- Popup Content -->
                <div class="popup-content">
                    <?php the_content(); ?>
                    <!-- Add any other post data you need here -->
                </div>
            </div>
        </div>
<?php
    endwhile;
    wp_reset_postdata();
endif;

Step 3: Add JavaScript to Handle Popup Navigation #

We need some JS to handle opening the right popup when a sidebar link is clicked, plus update the active link styling.

document.addEventListener('DOMContentLoaded', function() {
    // Hide all popups by default
    const allPopups = document.querySelectorAll('.popup');
    allPopups.forEach(popup => popup.style.display = 'none');

    // Open popup when clicking a main post item
    const postItems = document.querySelectorAll('.post-item');
    postItems.forEach(item => {
        item.addEventListener('click', () => {
            const postId = item.dataset.postId;
            togglePopup(postId);
        });
    });

    // Open target popup when clicking sidebar links
    const sidebarLinks = document.querySelectorAll('.sidebar-post-link');
    sidebarLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetPostId = link.dataset.target;
            togglePopup(targetPostId);
        });
    });

    // Helper function to manage popups and active links
    function togglePopup(postId) {
        // Hide all popups first
        allPopups.forEach(popup => popup.style.display = 'none');
        // Show the target popup
        const targetPopup = document.getElementById(`popup-${postId}`);
        if (targetPopup) targetPopup.style.display = 'block';

        // Remove active class from all links
        sidebarLinks.forEach(link => link.classList.remove('active'));
        // Add active class to the current link
        const activeLink = document.querySelector(`.sidebar-post-link[data-target="${postId}"]`);
        if (activeLink) activeLink.classList.add('active');
    }
});

Quick Notes to Customize: #

• Swap out your_custom_post_type with the actual slug of your custom post type.
• Adjust CSS classes (like .active, .popup, .post-item) to match your existing styles—use the active class to style your highlighted link (e.g., bold text, background color).
• The wp_reset_postdata() calls ensure we don't break the main query's post data after looping through sidebar links.

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