wordpress - Wordpress:覆盖媒体网格中附件“缩略图”的模板
问题描述
当您单击“编辑帖子”页面中的“添加媒体”按钮时,我正在尝试自定义媒体浏览器的模板,但它不起作用。我的目的是在缩略图上添加文件名作为标题,因此我无需选择图像即可在“附件详细信息”面板上检查其文件名。
关于如何通过在 media-templates.php 中覆盖它来自定义附件详细信息模板,我发现了这个非常好的答案:
https://stackoverflow.com/a/25948448/8717608
它完美无瑕。
因此,理论上我应该能够调整该答案以覆盖附件模板,该模板位于此处,位于第 506 行:
https://github.com/WordPress/WordPress/blob/master/wp-includes/media-template.php
这是我的版本:
add_action( 'wp_enqueue_media', 'add_media_overrides' );
function add_media_overrides() {
add_action( 'admin_footer-post.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: black;
color: white;
margin-top: 50%;
font-size: 80%;
z-index: 9999;
position: relative;
vertical-align: middle;
">{{ 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…' ); ?>" {{ 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…' ); ?>"
<# } else if ( 'audio' === data.type ) { #>
placeholder="<?php esc_attr_e( 'Describe this audio file…' ); ?>"
<# } else { #>
placeholder="<?php esc_attr_e( 'Describe this media file…' ); ?>"
<# } #> {{ maybeReadOnly }} />
<# }
} #>
</script>
<script>
jQuery(document).ready( function($) {
if( typeof wp.media.view.Attachment != 'undefined' ){
wp.media.view.Attachment.prototype.template = wp.media.template( 'attachment-custom' );
}
});
</script>
<?php
}
通过单击“添加媒体”按钮,我希望在黑色背景中看到所有带有文件名的拇指,但没有发生任何事情。看来我错过了什么...
解决方案
有一个错字,而不是:
wp.media.view.Attachment.prototype.template = wp.media.template( 'attachment-custom' );
应该:
wp.media.view.Attachment.prototype.template = wp.media.template( 'attachment_custom' );
推荐阅读
- php - 如何在没有 if 语句的情况下打印奇数/偶数系列
- python - 为什么我收到 RuntimeError:生成器引发了 StopIteration?以及如何解决?
- python - 如何在 Databricks 上绘制 Python XGBdecision 树
- bootstrap-4 - 如果从一开始就看不到,这里的地图将不会显示
- javascript - Sweet Alert 没有显示动态值,我做错了什么?
- json - 如何使用公共密钥合并和附加两个 json 文件而不丢失其他数据
- c# - 如何在 WPF 中的 MaterialDesign:PackIcon 中使用点击事件?
- node.js - 是否可以在 nodeJS 中将两个或多个对象链接在一起?
- javascript - 为什么我要在一小时内在 youtube api 上运行我的每日配额?
- asp.net - Asp.Net Core - 防止相同域应用程序之间的会话 cookie 冲突