迁移ASP站点至WordPress：用WP Bakery循环从文件夹生成幻灯片

一、集成简洁JS脚本解析目录文件（兼容WP Bakery Lightbox） #

浏览器端JS无法直接读取服务器目录（安全限制），需通过后端接口获取文件列表后再渲染：

1. WordPress后端接口（PHP） #

在主题functions.php中添加自定义REST API端点，用于返回指定目录的图片及说明：

add_action('rest_api_init', function () {
    register_rest_route('legacy-album/v1', '/files/(?P<show_id>\d+)', [
        'methods' => 'GET',
        'callback' => 'get_legacy_album_files',
        'permission_callback' => '__return_true', // 可根据需求调整访问权限
    ]);
});

function get_legacy_album_files($request) {
    $show_id = $request->get_param('show_id');
    $upload_dir = wp_upload_dir();
    $target_dir = $upload_dir['basedir'] . '/show/' . $show_id;
    
    if (!is_dir($target_dir)) {
        return new WP_Error('dir_not_found', '目录不存在', ['status' => 404]);
    }
    
    $allowed_ext = ['jpg', 'jpeg', 'png', 'gif'];
    $files = [];
    
    foreach (scandir($target_dir) as $file) {
        $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
        if (!in_array($file, ['.', '..']) && in_array($ext, $allowed_ext)) {
            $file_url = $upload_dir['baseurl'] . '/show/' . $show_id . '/' . $file;
            $thumb_url = $file_url . '-800x400.jpg';
            
            // 读取同名TXT文件的图片说明
            $txt_path = $target_dir . '/' . pathinfo($file, PATHINFO_FILENAME) . '.txt';
            $caption = file_exists($txt_path) ? trim(file_get_contents($txt_path)) : pathinfo($file, PATHINFO_FILENAME);
            
            $files[] = [
                'url' => $file_url,
                'thumb_url' => $thumb_url,
                'caption' => $caption,
                'filename' => pathinfo($file, PATHINFO_FILENAME)
            ];
        }
    }
    
    return rest_ensure_response($files);
}

2. 前端JS渲染脚本（兼容WP Bakery Lightbox） #

用原生JS调用接口，生成WP Bakery风格的幻灯片结构：

// 从页面获取活动ID，例如通过PHP输出：<?php echo $LEGACYSHOWID; ?>
const LEGACYSHOWID = '345';
const slidesContainer = document.getElementById('legacy-album-slides');

// 生成WP Bakery风格的唯一lightbox标识
const lightboxRel = `lightbox[rel-${Math.floor(Math.random() * 10000)}-${Math.floor(Math.random() * 1000000000)}]`;

// 调用API获取图片列表并渲染
fetch(`${window.location.origin}/wp-json/legacy-album/v1/files/${LEGACYSHOWID}`)
    .then(response => response.json())
    .then(files => {
        if (files.length === 0) {
            slidesContainer.innerHTML = '<p>暂无图片</p>';
            return;
        }
        
        let slidesHtml = '<ul class="slides">';
        files.forEach(file => {
            slidesHtml += `
                <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="" data-thumb-alt="">
                    <a href="${file.url}" data-lightbox="${lightboxRel}">
                        <img src="${file.thumb_url}" width="800" height="400" alt="${file.caption}" title="${file.caption}" draggable="false">
                    </a>
                </li>
            `;
        });
        slidesHtml += '</ul>';
        slidesContainer.innerHTML = slidesHtml;
        
        // 触发WP Bakery Lightbox初始化（若需要）
        if (typeof jQuery !== 'undefined' && jQuery.fn.lightbox) {
            jQuery('[data-lightbox]').lightbox();
        }
    })
    .catch(error => {
        slidesContainer.innerHTML = `<p>加载图片失败：${error.message}</p>`;
    });

二、编写WordPress循环生成WP Bakery幻灯片代码 #

若需静态生成代码，可通过自定义短代码实现：

1. 自定义短代码（PHP） #

在functions.php中添加短代码逻辑：

add_shortcode('legacy_album_slides', 'generate_legacy_album_slides');

function generate_legacy_album_slides($atts) {
    $atts = shortcode_atts([
        'show_id' => '',
    ], $atts);
    
    if (empty($atts['show_id'])) {
        return '<p>请指定活动ID</p>';
    }
    
    $show_id = sanitize_text_field($atts['show_id']);
    $upload_dir = wp_upload_dir();
    $target_dir = $upload_dir['basedir'] . '/show/' . $show_id;
    
    if (!is_dir($target_dir)) {
        return '<p>活动目录不存在</p>';
    }
    
    $allowed_ext = ['jpg', 'jpeg', 'png', 'gif'];
    $files = [];
    
    foreach (scandir($target_dir) as $file) {
        $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
        if (!in_array($file, ['.', '..']) && in_array($ext, $allowed_ext)) {
            $file_url = $upload_dir['baseurl'] . '/show/' . $show_id . '/' . $file;
            $thumb_url = $file_url . '-800x400.jpg';
            $txt_path = $target_dir . '/' . pathinfo($file, PATHINFO_FILENAME) . '.txt';
            $caption = file_exists($txt_path) ? trim(file_get_contents($txt_path)) : pathinfo($file, PATHINFO_FILENAME);
            
            $files[] = [
                'url' => $file_url,
                'thumb_url' => $thumb_url,
                'caption' => $caption
            ];
        }
    }
    
    if (empty($files)) {
        return '<p>暂无图片</p>';
    }
    
    $lightbox_rel = sprintf('lightbox[rel-%d-%d]', rand(1000, 9999), rand(100000000, 999999999));
    $output = '<ul class="slides">';
    
    foreach ($files as $file) {
        $output .= sprintf('
            <li style="width: 100%%; float: left; margin-right: -100%%; position: relative; opacity: 0; display: block; z-index: 1;" class="" data-thumb-alt="">
                <a href="%s" data-lightbox="%s">
                    <img src="%s" width="800" height="400" alt="%s" title="%s" draggable="false">
                </a>
            </li>
        ', esc_url($file['url']), esc_attr($lightbox_rel), esc_url($file['thumb_url']), esc_attr($file['caption']), esc_attr($file['caption']));
    }
    
    $output .= '</ul>';
    return $output;
}

2. 使用方式 #

• 在编辑器中直接插入：[legacy_album_slides show_id="345"]
• 在模板文件中调用：<?php echo do_shortcode('[legacy_album_slides show_id="'.$LEGACYSHOWID.'"]'); ?>

注意事项 #

• 确保/wp-content/uploads/show/目录权限为755，WordPress可正常读取文件
• 若缩略图不存在，可改用WordPress的wp_get_image_editor动态生成，或直接使用原图
• REST API的permission_callback可根据需求调整为仅允许登录用户访问

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