WordPress媒体库网格缩略图模板重写无效求助

我看了你尝试自定义媒体附件模板的代码，问题主要出在模板ID命名不匹配和视图替换时机上，咱们一步步来修正：

关键问题分析 #

1. 你的模板ID用了下划线tmpl-attachment_custom，但后面调用模板时用的是短横线attachment-custom，WordPress的模板命名规则是严格匹配的，这直接导致系统找不到你定义的自定义模板。
2. 依赖jQuery(document).ready替换视图模板的时机太晚，可能在媒体组件初始化完成后才执行，无法覆盖默认视图。

修正后的完整代码 #

add_action( 'wp_enqueue_media', 'add_media_overrides' );
function add_media_overrides() {
    // 覆盖文章编辑页和新文章页的媒体模板
    add_action( 'admin_footer-post.php', 'override_media_templates' );
    add_action( 'admin_footer-post-new.php', 'override_media_templates' );
}

function override_media_templates(){?>
<script type="text/html" id="tmpl-attachment-custom">
<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
<div class="thumbnail">
<# if ( data.uploading ) { #>
<div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
<# } else if ( 'image' === data.type && data.sizes ) { #>
<div class="centered">
<img src="{{ data.size.url }}" draggable="false" alt="" style="height: 90%; transform: translate(-50%,-55%);"/>
<div style="transform: translate(-50%,-100%); background-color: rgba(0,0,0,0.7); color: white; padding: 2px 6px; font-size: 80%; z-index: 9999; position: relative; vertical-align: middle; border-radius: 2px;">{{ data.filename }}</div>
</div>
<# } else { #>
<div class="centered">
<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
<img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" />
<# } else if ( data.sizes && data.sizes.medium ) { #>
<img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />
<# } else { #>
<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
<# } #>
</div>
<div class="filename">
<div>{{ data.filename }}</div>
</div>
<# } #>
</div>
<# if ( data.buttons.close ) { #>
<button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
<# } #>
</div>
<# if ( data.buttons.check ) { #>
<button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
<# } #>
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; if ( data.describe ) { if ( 'image' === data.type ) { #>
<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption" placeholder="<?php esc_attr_e( 'Caption this image&hellip;' ); ?>" {{ maybeReadOnly }} />
<# } else { #>
<input type="text" value="{{ data.title }}" class="describe" data-setting="title" <# if ( 'video' === data.type ) { #>
placeholder="<?php esc_attr_e( 'Describe this video&hellip;' ); ?>"
<# } else if ( 'audio' === data.type ) { #>
placeholder="<?php esc_attr_e( 'Describe this audio file&hellip;' ); ?>"
<# } else { #>
placeholder="<?php esc_attr_e( 'Describe this media file&hellip;' ); ?>"
<# } #>
{{ maybeReadOnly }} />
<# } } #>
</script>
<script>
(function($){
    // 确保wp.media组件已加载后再替换模板
    if ( typeof wp.media !== 'undefined' && wp.media.view.Attachment ) {
        // 直接覆盖Attachment视图的默认模板
        wp.media.view.Attachment.prototype.template = wp.media.template( 'attachment-custom' );
        
        // 处理媒体库已渲染的情况，打开时强制重新渲染视图
        $(document).on('click', '.insert-media', function(){
            setTimeout(function(){
                if ( wp.media.frame && wp.media.frame.content.get() ) {
                    var libraryView = wp.media.frame.content.get().collectionView;
                    if ( libraryView ) {
                        libraryView.render();
                    }
                }
            }, 500);
        });
    }
})(jQuery);
</script>
<?php }

核心修改说明 #

1. 修正模板ID匹配：把tmpl-attachment_custom改为tmpl-attachment-custom，和调用时的attachment-custom保持一致，这是解决问题的核心。
2. 覆盖新文章页面：新增admin_footer-post-new.php钩子，确保新文章编辑页也能生效。
3. 优化文件名样式：改用半透明背景+内边距+圆角，让文件名显示更清晰美观。
4. 强制重新渲染：添加媒体库打开后的重新渲染逻辑，确保已加载的附件视图能更新为新模板。

测试步骤 #

1. 将代码添加到主题的functions.php文件或自定义插件中。
2. 清除浏览器缓存（避免旧模板被缓存）。
3. 打开文章编辑页，点击「添加媒体」，就能看到图片缩略图上方显示文件名了。

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