如何在Kirki Framework中实现多图上传以制作相册？

一、开启多图上传功能 #

你当前使用的image控件默认仅支持单图上传，Kirki 3.1+版本已支持多图上传，只需在字段的choices参数中添加'multiple' => true即可，同时保留save_as => 'id'来保存图片ID数组。

修改后的自定义器字段代码：

Kirki::add_field( 'my_gallery', [
    'type'        => 'image',
    'settings'    => 'my_gallery_st',
    'label'       => esc_html__( 'Gallery Images', 'txtdom' ),
    'description' => esc_html__( 'Upload Images for the gallery section', 'txtdom' ),
    'section'     => 'my_gallery_sc',
    'choices'     => [
        'save_as'   => 'id',
        'multiple'  => true, // 关键：开启多图上传
    ],
] );

二、前端展示缩略图并实现灯箱效果 #

在你的模板文件（如首页模板front-page.php或自定义模板）中，通过get_theme_mod()获取保存的图片ID数组，循环生成缩略图和灯箱链接：

PHP代码：

<?php
// 获取保存的图片ID数组，默认空数组
$gallery_ids = get_theme_mod( 'my_gallery_st', [] );

if ( ! empty( $gallery_ids ) ) {
    echo '<div class="gallery-section">';
    foreach ( $gallery_ids as $image_id ) {
        // 获取自定义缩略图的URL、宽度、高度
        $thumb_data = wp_get_attachment_image_src( $image_id, 'home-gallery-thumb' );
        // 获取原图的URL
        $original_data = wp_get_attachment_image_src( $image_id, 'full' );
        
        // 确保图片数据存在
        if ( $thumb_data && $original_data ) {
            $thumb_src = esc_url( $thumb_data[0] );
            $original_src = esc_url( $original_data[0] );
            $image_alt = esc_attr( get_post_meta( $image_id, '_wp_attachment_image_alt', true ) );
            
            echo '<a href="' . $original_src . '" class="gallery-item" data-lightbox="gallery">';
            echo '<img src="' . $thumb_src . '" alt="' . $image_alt . '" />';
            echo '</a>';
        }
    }
    echo '</div>';
}
?>

灯箱功能实现（原生JS+CSS）

如果不想依赖插件，可添加以下代码实现基础灯箱：

CSS（添加到主题样式文件style.css）：

/* 相册布局 */
.gallery-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
    padding: 2rem 0;
}
.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.gallery-item:hover img {
    opacity: 0.9;
}

/* 灯箱样式 */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 2rem;
}
.lightbox img {
    max-width: 100%;
    max-height: 90vh;
}

JS（添加到主题JS文件或通过wp_enqueue_script加载）：

document.addEventListener('DOMContentLoaded', function() {
    const galleryItems = document.querySelectorAll('.gallery-item');
    const lightbox = document.createElement('div');
    lightbox.className = 'lightbox';
    document.body.appendChild(lightbox);

    galleryItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const img = document.createElement('img');
            img.src = this.getAttribute('href');
            // 清空灯箱内容并添加新图片
            lightbox.innerHTML = '';
            lightbox.appendChild(img);
            lightbox.style.display = 'flex';
        });
    });

    // 点击灯箱任意位置关闭
    lightbox.addEventListener('click', function() {
        this.style.display = 'none';
    });

    // ESC键关闭灯箱
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            lightbox.style.display = 'none';
        }
    });
});

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