如何使用 CSS 设置默认 Wordpress 音频播放器的样式？
Tri*_*est 5 css wordpress media-player audio-player
我经常使用 Wordpress 音频短代码将我的播客剧集嵌入到我的帖子中：
[audio src="http://podcastsourcefile"]
不幸的是，默认的音频播放器看起来很糟糕。我想用 CSS 重新设计它的样式。我可以发送一个模型来向您展示它应该是什么样子，但基本要点如下：
- 背景颜色：#B27D47
- 替换播放按钮图像（我可以提供.png文件）
- 使播放器高 75 像素，宽 100%
- 围绕播放器的角落
这是我希望播放器的样子：
（我有播放按钮的 .png 文件。）
有两个过滤器钩子可以处理这个问题。一开始，信息很少，我们用它来简化整个短代码并返回我们自己的自定义 HTML 代码：
add_filter( 'wp_audio_shortcode_override', 'short1_so_23875654', 10, 4 );
function short1_so_23875654( $return = '', $attr, $content, $instances )
{
# If $return is not an empty array, the shorcode function will stop here printing OUR HTML
// $return = '<html code here>';
return $return;
};
到达的参数有：
Array
(
[0] => ''
[1] => Array
(
[src] => http://example.com/wp-content/uploads/file.mp3
)
[2] => ''
[3] => 1
)
另一个在短代码函数末尾运行：
add_filter( 'wp_audio_shortcode', 'short2_so_23875654', 10, 5 );
function short2_so_23875654( $html, $atts, $audio, $post_id, $library )
{
return $html;
}
到达的参数有：
Array
(
[0] => <audio class="wp-audio-shortcode" id="audio-715-1" preload="none" style="width: 100%" controls="controls"><source type="audio/mpeg" src="http://example.com/wp-content/uploads/file.mp3?_=1" /><a href="http://example.com/wp-content/uploads/file.mp3">http://plugins.dev/wp-content/uploads/2013/10/04_discipline_64kb.mp3</a></audio>
[1] => Array
(
[class] => wp-audio-shortcode
[id] => audio-715-1
[preload] => none
[style] => width: 100%
)
[2] =>
[3] => 715
[4] => mediaelement
)
| 归档时间： |
|
| 查看次数： |
10072 次 |
| 最近记录： |