这是我想出的解决方案-它将WP的默认完整URL输入替换为媒体库弹出窗口中提供的任何缩略图大小的列表。
add_action( \'print_media_templates\', \'ezific_media_tmpl_image_thumbnail_urls\' );
function ezific_media_tmpl_image_thumbnail_urls() {
/* // The prior URL HTML; /wp-includes/media-template.php
// found with regex in variable old_html_regex below
<label class="setting" data-setting="url">
<span class="name">Copy Link</span>
<input type="text" value="{{ data.url }}" readonly />
</label>
*/
?>
<script>
jQuery( document ).ready( function( $ ){
var text = "",
old_html_regex = /<label class="setting" data-setting="url">.*<\\/label>/gms,
the_url_list = jQuery( "script#ezific-tmpl-attachment-url-list" ).text(),
existing_tmpls = jQuery( "script#tmpl-attachment-details-two-column, script#tmpl-attachment-details" );
// Loop through the script elements and swap in the new HTML
existing_tmpls.each(function() {
text = jQuery(this).text();
text = text.replace( old_html_regex, the_url_list );
jQuery(this).text( text );
});
// Add show/hide toggle
jQuery( "body" ).on("click", "#ezific-toggle-urls", function(e){
e.preventDefault();
jQuery( "#ezific-image-urls-hold" ).toggle();
});
});
</script>
<script type="text/template" id="ezific-tmpl-attachment-url-list">
<div class="setting" id="ezific-image-urls">
<a href="#" id="ezific-toggle-urls">Show All URLS</a>
<div id="ezific-image-urls-hold" style="display: none;">
<?php
$sizes = apply_filters( \'image_size_names_choose\', array(
\'thumbnail\' => __(\'Thumbnail\'),
\'medium\' => __(\'Medium\'),
\'large\' => __(\'Large\'),
\'full\' => __(\'Full Size\'),
) );
foreach ( $sizes as $value => $name ) : ?>
<#
var size = data.sizes[\'<?php echo esc_js( $value ); ?>\'];
if ( size ) { #>
<span class="setting">
<label for="attachment-details-copy-link-<?php echo esc_attr( $value ); ?>" class="name" style="float:left;"><?php echo esc_attr( $name ); ?></label>
<input type="text" id="attachment-details-copy-link-<?php echo esc_attr( $value ); ?>" value="{{ size.url }}" readonly />
</span>
<# } #>
<?php endforeach; ?>
</div>
</div>
</script>
<?php
}
基本思想是覆盖WordPress提供的媒体模式布局模板(可在中找到
/wp-includes/media-template.php.
我们加入print_media_templates
在中显示多个HTML模板<script>
我相信主干网将使用的元素。js。具体而言,我们关心script#tmpl-attachment-details-two-column
和script#tmpl-attachment-details
模板。
我们添加了一个新模板(此处,script#ezific-tmpl-attachment-url-list"
) 它保存HTML以显示图像大小。此代码段使用image_size_names_choose
hook 过滤显示的缩略图大小。
然后,只需从WordPress提供的模板中获取模板文本,在我们的新HTML中使用regex替换,WordPress并不明智,它会在最初只显示完整URL的位置显示我们的新图像大小。
我还添加了一个快速链接来显示/隐藏链接,因为理论上列表可能会很长。