如何为WordPress媒体库网格视图的附件添加自定义类？

一、PHP传递标记（避免AJAX消耗） #

网格视图的列表项由JS动态渲染，无法直接用PHP给<li>加类，但可以通过PHP将附件的模糊数据状态提前注入到JS的附件数据中，彻底避免AJAX请求的CPU消耗：

// 向JS传递附件是否有模糊数据的标记
add_filter('wp_prepare_attachment_for_js', 'inject_blur_data_flag', 10, 3);
function inject_blur_data_flag($response, $attachment, $meta) {
    // 替换成你存储模糊数据的元字段名
    $has_blur_data = get_post_meta($attachment->ID, '_blur_data', true);
    // 给JS的附件对象添加自定义属性
    $response['hasBlurData'] = !empty($has_blur_data);
    return $response;
}

二、JS扩展视图添加类 #

通过扩展WordPress媒体库的视图类，读取PHP传递的标记并添加自定义类，注意要确保代码在媒体库JS加载后执行：

1. 注册并加载JS文件 #

在插件中添加以下PHP代码，确保JS仅在媒体库相关页面加载：

add_action('admin_enqueue_scripts', 'enqueue_blur_media_script');
function enqueue_blur_media_script($hook) {
    // 仅在媒体库、文章编辑页加载（覆盖网格视图和弹窗场景）
    if (!in_array($hook, ['upload.php', 'post.php', 'post-new.php'])) {
        return;
    }
    // 依赖wp-media和media-grid，确保在媒体库JS之后加载
    wp_enqueue_script(
        'blur-data-media',
        plugin_dir_url(__FILE__) . 'js/blur-media.js', // 替换成你的JS文件实际路径
        ['wp-media', 'media-grid'],
        '1.0',
        true
    );
}

2. 编写JS代码（blur-media.js） #

jQuery(document).ready(function($) {
    if (typeof wp?.media?.view === 'undefined') return;

    // 扩展媒体库网格视图的附件项
    const OriginalAttachmentView = wp.media.view.Attachment.Library;
    wp.media.view.Attachment.Library = OriginalAttachmentView.extend({
        render: function() {
            // 先执行父类的渲染逻辑
            OriginalAttachmentView.prototype.render.apply(this, arguments);
            // 根据PHP传递的标记添加自定义类
            if (this.model.get('hasBlurData')) {
                this.$el.addClass('has-blur-data');
            }
            return this;
        }
    });
});

三、之前JS代码失效的常见原因 #

• 加载时机错误：未依赖wp-media等核心脚本，导致代码在媒体库视图初始化前执行。
• 视图类选错：误扩展了基础的wp.media.view.Attachment，而非针对网格视图的wp.media.view.Attachment.Library。
• 数据未正确传递：可在浏览器控制台打印this.model，检查hasBlurData属性是否存在。

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