音频播放器子集的包装器：
如果要将包装器添加到某些本机音频播放器，但不是所有本机音频播放器，可以使用以下方法。如果要添加如下所示的包装：
然后，您可以在音频短代码中使用以下额外属性：
[audio wrapper="on"
wrapper_class="audio-mini"
wrapper_style="width:182px; border: 1px solid black; padding: 10px;
background-color: #888;"
wrapper_width="182"
wrapper_tag="div"
mp3="http://example.com/mozart.mp3" ]
要添加具有给定类的包装，请使用样式
标记和宽度。请注意，如果将播放器缩小到120px, 您需要使用CSS隐藏音量按钮和音量滑块：
.mejs-volume-button, .mejs-horizontal-volume-slider { display: none; }
为了避免影响所有音频播放器，可以使用自定义包装类来针对小型播放器：.audio-mini .mejs-volume-button,
.audio-mini .mejs-horizontal-volume-slider { display: none; }
要激活包装器，请使用wrapper 具有以下值的属性on, yes, true 或1.借助以下插件，可以实现上述方法：
/**
* Plugin Name: Wrapper for Audio Player shortcode
* Plugin URI: https://wordpress.stackexchange.com/a/143281/26350
* Author: birgire
*/
add_action( \'init\', function(){
$mini = new WPSE_Audio_Player_Wrapper;
$mini->init();
});
class WPSE_Audio_Player_Wrapper
{
protected $wrapper = FALSE;
protected $tag = \'div\';
protected $allowed_tags = array( \'div\', \'p\' );
protected $width = \'\';
protected $class = \'\';
protected $style = \'\';
public function init()
{
add_filter( \'wp_audio_shortcode_override\' ,
array( $this, \'wp_audio_shortcode_override\' ), 10, 2 );
}
public function wp_audio_shortcode_override( $html, $attr )
{
if( isset( $attr[\'wrapper\'] ) )
$this->wrapper = filter_var( $attr[\'wrapper\'], FILTER_VALIDATE_BOOLEAN );
if( isset( $attr[\'wrapper_width\'] ) )
$this->width = $attr[\'wrapper_width\'];
if( isset( $attr[\'wrapper_class\'] ) )
$this->class = $attr[\'wrapper_class\'];
if( isset( $attr[\'wrapper_style\'] ) )
$this->style = $attr[\'wrapper_style\'];
if( isset( $attr[\'wrapper_tag\'] )
&& in_array( $attr[\'wrapper_tag\'], $this->allowed_tags, TRUE )
)
$this->tag = $attr[\'wrapper_tag\'];
add_filter( \'wp_audio_shortcode\',
array( $this, \'wp_audio_shortcode\' ) );
return $html;
}
function wp_audio_shortcode( $html )
{
if( $this->wrapper )
{
$s = \'\';
if( \'\' !== $this->class )
$s .= sprintf( \' class="%s"\', esc_attr( $this->class ) );
if( \'\' !== $this->style )
$s .= sprintf( \' style="%s"\', esc_attr( $this->style ) );
if( \'\' !== $this->width )
$s .= sprintf( \' width="%s"\', esc_attr( $this->width ) );
$html = sprintf( \'<%s%s>%s</%s>\', $this->tag, $s, $html, $this->tag );
}
return $html;
}
}
将插件代码保存到文件中/wp-content/plugins/wrapped-audio-player/wrapped-audio-player.php 并激活它。上一个答案：
音频播放器的默认样式为width:100% 因此，您可以始终在内容编辑器中的短代码周围添加div包装：<div style="width:120px;">
[audio mp3="myfile.mp3]
</div>
您似乎无法用以下内容覆盖默认样式： [audio mp3="myfile.mp3 style="width:120px;"]
因为style 音频标签的属性是硬编码的。我不确定这是故意的还是一个bug。支持的短代码属性包括src, loop, autoplay 和preload.
这里有一些其他想法，您可以尝试将宽度更改为120px:
它们没有经过很好的测试，但希望您可以进一步使用它，并根据您的需要进行调整：
Idea 1:
您可以通过制作自己的短码来绕过它，该短码将上述div包装在音频短码周围。Idea 2:
使用wp_audio_shortcode 更换过滤器：/**
* Change the width of the audio player from 100% to 120px via replace
*
*/
function wpse_143272_wp_audio_shortcode_a( $html )
{
return str_ireplace( \'width: 100%\', \'width: 120px\', $html );
}
add_filter( \'wp_audio_shortcode\', \'wpse_143272_wp_audio_shortcode_a\' );
Idea 3:
包裹adiv 在wp_audio_shortcode 过滤器：/**
* Change the width of the audio player from 100% to 120px with a div wrapper
*
*/
function wpse_143272_wp_audio_shortcode_b( $html )
{
return sprintf( \'<div style="width: 120px">%s</div>\', $html );
}
add_filter( \'wp_audio_shortcode\', \'wpse_143272_wp_audio_shortcode_b\' );
Idea 4:
使用CSS进行调整：/**
* Change the width of the audio player from 100% to 120px with CSS
*
*/
function wpse_143272_wp_head()
{
echo \'<style>.wp-audio-shortcode { width: 120px !important; }</style>\';
}
add_action( \'wp_head\', \'wpse_143272_wp_head\' ),
或者直接将其添加到样式表中；-）Playlist:
要显示所有歌曲的列表，请使用[playlist] 改为使用快捷码，但您必须将音频文件上载到WordPress媒体库。如果要在播放列表中使用外部音频文件，可以尝试this solution.