WordPress media library自定义弹窗如何实现metadata过滤

你可以直接通过当前媒体弹窗实例的查询钩子追加meta过滤规则，所有逻辑仅作用于当前弹窗，不会修改全局媒体库的默认行为，原有MIME类型过滤逻辑可完全保留。

实现要点 #

• 初始化wp.media实例时，可直接在library配置项中传入meta_query参数，和原生WP_Query的meta查询语法完全一致，后端媒体接口原生支持该参数，无需额外开发后端兼容
• 若需要动态调整过滤规则（比如弹窗内添加筛选控件），可监听当前实例的查询事件动态修改查询参数，事件绑定随实例销毁自动解绑，无全局污染
• MIME类型过滤和meta过滤为叠加生效关系，符合多维度筛选需求

完整修改后代码 #

function upload_image_tinymce(e) {
    e.preventDefault();
    var $input_field = $('.mce-my_input_image');
    var custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Add Video',
        button: {
            text: 'Add Video'
        },
        library: {
            // 原有MIME类型过滤保留
            type: [
                'video/MP4',
                'video/quicktime',
                'video/x-m4v',
            ],
            // 新增默认meta过滤规则，按实际业务需求修改键、值、比较符
            meta_query: [
                {
                    key: 'your_custom_metadata_key', // 替换为你要过滤的meta键名
                    value: 'target_value', // 替换为要匹配的meta值
                    compare: '=' // 支持=、!=、>、<、LIKE等WP_Query支持的比较运算符
                }
            ]
        },
        multiple: false
    });

    // 若需要动态修改过滤规则（比如弹窗内加筛选下拉、输入框），可绑定该事件
    custom_uploader.on('library:query:attachments', function(queryInstance) {
        // 示例：监听自定义筛选控件值变化后，动态更新meta_query即可实时刷新列表
        // queryInstance.set('meta_query', [/* 新的查询规则数组 */])
    });

    // 原有select逻辑不变
    custom_uploader.on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $input_field.val(attachment.id);
    });
    custom_uploader.open();
}

扩展：添加弹窗内可视化筛选控件 #

如果需要在弹窗顶部工具栏添加metadata筛选的交互控件，可以在实例上监听open事件，往弹窗工具栏插入自定义DOM，控件值变化时更新library的查询属性即可实时刷新附件列表，所有DOM和事件都挂载在当前弹窗节点下，关闭弹窗后自动清理。

注意：不要修改wp.media.view.AttachmentFilters的全局原型，否则所有媒体弹窗都会出现你加的筛选控件，所有自定义逻辑都要绑定在当前custom_uploader实例对应的视图上。

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