如何将WordPress媒体库上传按钮添加到物流插件的popup_body弹出层

1. 资源加载的正确规范 #

不要将wp_enqueue_script('jquery')和wp_enqueue_media()直接插在输出HTML的PHP代码中间，必须挂载到WordPress官方指定的后台资源加载钩子上，避免资源加载顺序错误。示例代码放置到插件主PHP文件中即可：

// 后台加载媒体上传所需资源
add_action('admin_enqueue_scripts', 'logistics_plugin_enqueue_media_resources');
function logistics_plugin_enqueue_media_resources() {
    // 可添加页面判断，只在插件对应后台页面加载资源避免冗余
    $current_screen = get_current_screen();
    // 不确定插件screen id可先注释判断条件，全局加载测试
    if ($current_screen->id === 'toplevel_page_your_logistics_plugin_slug') {
        wp_enqueue_script('jquery');
        wp_enqueue_media();
        // 推荐将自定义JS代码单独存为文件，通过wp_enqueue_script加载更符合规范
    }
}

2. 事件绑定改为动态委托 #

原代码的点击事件是页面初始加载完成后直接绑定给#upload-btn，但popup层的DOM是动态插入到页面的，初始加载时按钮元素不存在，会导致事件绑定失效。修改为事件委托绑定到页面初始就存在的父元素即可：

jQuery(document).ready(function($){
    // 把事件绑定到document，适配所有动态插入的#upload-btn元素
    $(document).on('click', '#upload-btn', function(e) {
        e.preventDefault();
        var image = wp.media({ 
            title: 'Upload Image',
            multiple: false
        }).open()
        .on('select', function(e){
            var uploaded_image = image.state().get('selection').first();
            var image_url = uploaded_image.toJSON().url;
            $('#image_url').val(image_url);
        });
    });
});

3. 兼容弹窗层级问题 #

如果修改后点击按钮仍看不到媒体上传框，大概率是自定义popup的z-index高于WordPress默认媒体上传框的层级，添加以下CSS调整层级即可：

/* 调整媒体上传框层级高于自定义popup */
.media-modal {
    z-index: 999999 !important;
}
.media-modal-backdrop {
    z-index: 999998 !important;
}

效果参考 #

#

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