WordPress自定义主题：点击文章缩略图打开灯箱画廊求助

Hey there! Let's get that lightbox gallery working with your custom WordPress theme and the Featured Galleries plugin. I'll break down the issues in your current code and walk you through a fix, plus share a simpler alternative if you're open to it.

First, Let's Fix Your Existing Code #

Your current code is outputting all gallery images directly on the page, which isn't ideal—we need to hide those (since the lightbox only needs the link references) and make the article thumbnail trigger the lightbox gallery instead of linking to the thumbnail itself. Here's how to adjust it:

Step 1: Install a Lightbox Plugin #

Start by installing and activating the SimpleLightbox plugin (free from the WordPress plugin repository). It automatically handles loading the necessary CSS/JS and initializes the lightbox functionality for links with data-lightbox attributes.

Step 2: Modify Your Gallery Output Code #

Update your template code to:

• Make the article thumbnail trigger the lightbox (instead of linking to the thumbnail image)
• Hide the gallery image links (so they don't show up on the page)
• Group each post's gallery with a unique data-lightbox attribute (using the post ID to avoid mixing galleries)

<div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>">
    <!-- Article Thumbnail (triggers lightbox) -->
    <a href="#" class="gallery-trigger" data-gallery-id="<?php the_ID(); ?>">
        <div class="bg_img"<?php if ( $thumbnail_id = get_post_thumbnail_id() ) { 
            if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) ) {
                printf( ' style="background-image: url(%s);"', esc_url($image_src[0]) ); 
            }
        } ?>>
        </div>
        <h3><?php the_title(); ?></h3>
        <p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p>
    </a>

    <!-- Hidden Gallery Links for Lightbox -->
    <div class="hidden-gallery" id="gallery-<?php the_ID(); ?>">
        <?php 
        $galleryarray = get_post_gallery_ids(get_the_ID()); 
        foreach ($galleryarray as $index => $id) { 
            $full_image = wp_get_attachment_image_src( $id, 'full' ); 
            $image_caption = wp_get_attachment_caption($id);
        ?>
            <a href="<?php echo esc_url($full_image[0]); ?>" 
               data-lightbox="gallery-<?php the_ID(); ?>" 
               data-title="<?php echo esc_attr($image_caption); ?>">
                <!-- No need to display the thumbnail here -->
            </a>
        <?php } ?>
    </div>
</div>

Step 3: Add Custom JS to Trigger Lightbox on Thumbnail Click #

Since we're using a trigger link instead of linking directly to the first gallery image, add this custom JavaScript to your theme (either in a custom.js file or via the WordPress Customizer's "Additional JS" section):

jQuery(document).ready(function($) {
    // Trigger lightbox when clicking the article thumbnail
    $('.gallery-trigger').on('click', function(e) {
        e.preventDefault();
        var galleryId = $(this).data('gallery-id');
        $('#gallery-' + galleryId + ' a:first').click();
    });
});

Step 4: Add CSS to Hide the Gallery #

Add this to your theme's style.css to keep the hidden gallery links from showing on the page:

.hidden-gallery {
    display: none;
}

.gallery-trigger {
    cursor: pointer; /* Make it clear the thumbnail is clickable */
}

Simpler Alternative: Use a More Integrated Plugin #

If you want to avoid custom code entirely, consider swapping to a plugin that combines featured galleries and lightbox functionality out of the box:

• FooGallery: Lets you create galleries and assign them as featured galleries, with built-in lightbox options (no extra code needed).
• Envira Gallery: Another robust option with featured gallery support and native lightbox controls, perfect for portfolio sites.

Both plugins play nicely with custom WordPress themes and eliminate the need for manual code tweaks.

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