如何使用自定义播放列表模板：
您可以使用自己的模板覆盖播放列表模板：
/**
* Remove the native playlist template and load our custom template
* @link http://wordpress.stackexchange.com/q/141767/26350
*/
add_action( \'wp_playlist_scripts\', \'wpse_141767_wp_playlist_scripts\' );
function wpse_141767_wp_playlist_scripts()
{
remove_action( \'wp_footer\', \'wp_underscore_playlist_templates\', 0 );
add_action( \'wp_footer\', \'wpse_141767_wp_underscore_playlist_templates\', 0 );
}
其中，修改后的模板定义为：
/**
* Our custom playlist template.
*/
function wpse_141767_wp_underscore_playlist_templates() {
?>
<script type="text/html" id="tmpl-wp-playlist-current-item">
<# if ( data.image ) { #>
<img src="{{ data.thumb.src }}"/>
<# } #>
<div class="wp-playlist-caption">
<span class="wp-playlist-item-meta wp-playlist-item-title">“{{ data.title }}”</span>
<# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
<# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
</div>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
<div class="wp-playlist-item">
<a class="wp-playlist-caption" href="{{ data.src }}">
{{ data.index ? ( data.index + \'. \' ) : \'\' }}
<# if ( data.caption ) { #>
{{ data.caption }}
<# } else { #>
<span class="wp-playlist-item-title">“{{{ data.title }}}”</span>
<# if ( data.artists && data.meta.artist ) { #>
<span class="wp-playlist-item-artist"> — {{ data.meta.artist }}</span>
<# } #>
<# } #>
</a>
<# if ( data.meta.length_formatted ) { #>
<div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
<# } #>
</div>
<!-- BEGIN CHANGES -->
<a href="{{ data.src }}" class="wpse-download" download="">download</a>
<!-- END CHANGES -->
</script>
<?php
}
我们在末尾添加了此部分：
<!-- BEGIN CHANGES -->
(<a href="{{ data.src }}" class="wpse-download" download="">download</a>)
<!-- END CHANGES -->
您可能还需要添加一个特殊的url来下载文件。
我没有在div.wp-playlist-item 选择器，是因为在其中单击的所有内容都将启动播放器。原因是/wp-includes/js/mediaelement/wp-playlist.js 文件：
events : {
\'click .wp-playlist-item\' : \'clickTrack\',
\'click .wp-playlist-next\' : \'next\',
\'click .wp-playlist-prev\' : \'prev\'
},
clickTrack : function (e) {
e.preventDefault();
this.index = this.$( \'.wp-playlist-item\' ).index( e.currentTarget );
this.setCurrent();
},
下面是我们修改后的播放列表模板的屏幕截图：
您可以尝试一些自定义CSS来根据您的需要对此进行修改。
这里有一种黑客，可能需要根据当前主题进行调整：
<style>
.wpse-download {
margin-top: -22px;
margin-left: -16px;
position: absolute;
}
.wp-playlist {
padding: 25px;
}
</style>
使用：
<!-- BEGIN CHANGES -->
<a href="{{ data.src }}" class="wpse-download" download="">
<i class="fa fa-download" aria-hidden="true"></i>
</a>
<!-- END CHANGES -->
在Font Awesome面前。
Further customization:
您还可以考虑将自己版本的
wp-playlist.js 替换的文件：
\'click .wp-playlist-item\' : \'clickTrack\',
例如：
\'click a.wp-playlist-item-caption\' : \'clickTrack\',
能够将下载链接与歌曲标题放在同一行中。
Update:
更新了屏幕截图并添加了另一个示例。
要确保文件已下载且未显示在浏览器中，我们可以使用download 链接属性。我已将上述内容更新为：
(<a href="{{ data.src }}" download="">download</a>)
空值似乎会将其作为当前文件名下载。
