文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >下载wp音频播放器按钮

问下载wp音频播放器按钮
EN

WordPress Development用户
提问于 2014-04-19 08:12:44
回答 2查看 6.8K关注 0票数 4

我想添加一个下载按钮到核心wp音频播放器(mediaelement.js)。

我怎么能这么简单？有什么建议吗？

audio
EN

回答 2

WordPress Development用户

发布于 2014-04-30 23:08:24

如何使用自定义播放列表模板：

可以用自己的模板覆盖播放列表模板：

代码语言：javascript
复制
/**
 * 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 );
}

其中，修改后的模板定义为：

代码语言：javascript
复制
/**
 * 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
}

我们在结尾添加了这个部分：

代码语言：javascript
复制
<!-- 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文件的这一部分：

代码语言：javascript
复制
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来修改它以满足您的需要。

这里有一种黑客，可能需要根据当前主题进行调整：

代码语言：javascript
复制
<style>
    .wpse-download {
        margin-top: -22px;
        margin-left: -16px;
        position: absolute;
    }
    .wp-playlist {
        padding: 25px;
    }
</style>

通过以下方式：

代码语言：javascript
复制
<!-- BEGIN CHANGES -->
    <a href="{{ data.src }}" class="wpse-download" download="">
        <i class="fa fa-download" aria-hidden="true"></i>
    </a>
<!-- END CHANGES -->

当着字体的面。

进一步定制：

您还可以考虑在您自己版本的wp-playlist.js文件中排队，以替换：

代码语言：javascript
复制
'click .wp-playlist-item' : 'clickTrack',

例如：

代码语言：javascript
复制
'click a.wp-playlist-item-caption' : 'clickTrack',

可以将下载链接与歌曲标题放在同一行。

更新：

更新了截图并添加了另一个例子。

为了确保文件是下载的，而不是显示在浏览器中，我们可以使用download链接属性。我更新了上面的内容：

代码语言：javascript
复制
(<a href="{{ data.src }}" download="">download</a>)

空值似乎会以当前文件名的形式下载。

票数 9
EN

WordPress Development用户

发布于 2017-11-10 17:35:49

代码语言：javascript
复制
<script>
/**
 * Our custom playlist template for mp3 download`.
 */
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">
<span>
            (<a href="{{ data.src }}"><i class="fa fa-download" title="Download" aria-hidden="true"></i></a>)
        </span>{{ data.meta.length_formatted }}</div>
                <# } #>             
        </div>
</script>
<?php
}
</script>
票数 0
EN
页面原文内容由WordPress Development提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://wordpress.stackexchange.com/questions/141767

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档