如何在自定义WordPress插件中调用媒体模态框批量上传图片？

没问题，用WordPress原生的wp.media API完全能实现你要的效果——和后台媒体库一致的模态框，支持批量选择/上传图片，还能直接在插件设置页触发。我给你拆解具体步骤，照着做就行：

首先要在你的插件主文件里，注册前端脚本并依赖WordPress的媒体库核心脚本。这样能确保wp.media对象可用，同时只在你的插件设置页加载，避免影响其他后台页面：

add_action('admin_enqueue_scripts', 'my_plugin_enqueue_media_scripts');
function my_plugin_enqueue_media_scripts($hook) {
    // 替换成你的插件设置页的hook（可以用get_current_screen()查看当前页面hook）
    if ($hook !== 'toplevel_page_my-plugin-settings') {
        return;
    }

    // 注册并加载自定义JS文件
    wp_enqueue_script(
        'my-plugin-media-script',
        plugin_dir_url(__FILE__) . 'js/media-upload.js', // 你的JS文件路径
        array('jquery', 'wp-media'), // 依赖jQuery和WP媒体库核心脚本
        '1.0.0',
        true // 在页脚加载，确保DOM已就绪
    );

    // 传递安全验证nonce到前端
    wp_localize_script('my-plugin-media-script', 'MyPluginMedia', array(
        'nonce' => wp_create_nonce('my-plugin-media-nonce')
    ));
}

在你的插件设置页HTML里，添加一个触发按钮，以及用来显示选中图片预览的容器：

<!-- 批量选择图片触发按钮 -->
<button id="my-plugin-bulk-upload-btn" class="button button-primary">批量选择/上传图片</button>

<!-- 选中图片预览容器 -->
<div id="selected-images-container" style="margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap;"></div>

<!-- 安全验证nonce字段，提交表单时需要 -->
<input type="hidden" name="my_plugin_media_nonce" value="<?php echo wp_create_nonce('my-plugin-media-nonce'); ?>">

在你的media-upload.js文件里，编写代码监听按钮点击，初始化媒体模态框，并处理选中的图片：

jQuery(document).ready(function($) {
    // 绑定按钮点击事件
    $('#my-plugin-bulk-upload-btn').on('click', function(e) {
        e.preventDefault();

        // 如果模态框已经存在，直接打开避免重复创建
        if (window.myMediaFrame) {
            window.myMediaFrame.open();
            return;
        }

        // 创建媒体模态框实例
        window.myMediaFrame = wp.media({
            title: '批量选择图片', // 模态框顶部标题
            button: {
                text: '确认选择' // 底部确认按钮文字
            },
            multiple: true, // 允许批量选择图片
            library: {
                type: 'image' // 只显示图片类型（可改为'video'或留空显示所有文件）
            },
            // 默认会显示「上传」标签，用户可直接上传新图片，无需额外配置
        });

        // 监听用户选中图片的事件
        window.myMediaFrame.on('select', function() {
            // 获取选中的所有附件（转成JSON格式方便处理）
            const attachments = window.myMediaFrame.state().get('selection').toJSON();
            const container = $('#selected-images-container');
            container.empty();

            // 遍历选中的附件，生成预览和隐藏的ID输入框
            attachments.forEach(attachment => {
                // 优先用缩略图，没有的话用原图
                const imgUrl = attachment.sizes?.thumbnail?.url || attachment.url;
                container.append(`
                    <div class="selected-image-item" style="border: 1px solid #ddd; padding: 5px; text-align: center;">
                        <img src="${imgUrl}" alt="${attachment.alt || '未设置描述'}" style="max-width: 100px; max-height: 100px;" />
                        <input type="hidden" name="my_plugin_selected_images[]" value="${attachment.id}" />
                        <p style="margin: 5px 0; font-size: 12px;">ID: ${attachment.id}</p>
                    </div>
                `);
            });
        });

        // 打开模态框
        window.myMediaFrame.open();
    });
});

最后，在你的插件里添加保存逻辑，把用户选中的图片ID存储到WordPress选项中：

add_action('admin_init', 'my_plugin_save_selected_images');
function my_plugin_save_selected_images() {
    // 检查表单提交状态和nonce安全验证
    if (isset($_POST['my_plugin_save_settings']) && wp_verify_nonce($_POST['my_plugin_media_nonce'], 'my-plugin-media-nonce')) {
        // 获取选中的图片ID，并转成整数确保数据安全
        $selected_images = isset($_POST['my_plugin_selected_images']) ? array_map('intval', $_POST['my_plugin_selected_images']) : array();
        // 保存到WordPress全局选项
        update_option('my_plugin_selected_images', $selected_images);
    }
}

• 限制选择数量：如果需要限制用户最多选多少张图，可以在select事件里判断attachments.length，超过数量时提示用户并清空多余选择。
• 自定义模态框：wp.media支持更多参数，比如设置frame: 'post'可使用和文章编辑页完全一致的媒体框，或通过library参数添加作者、日期等过滤条件。
• 恢复已选图片：用户再次打开设置页时，可从get_option('my_plugin_selected_images')获取已保存的ID，循环生成预览HTML，让用户看到之前的选择。
• 样式优化：可以给预览容器和图片项添加自定义CSS，让界面更贴合你的插件风格。

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