我经常使用WordPress音频短代码将我的播客剧集嵌入到我的文章中:
[audio src="http://podcastsourcefile"]
很抱歉,原始音频播放器看起来很糟糕。我想用 CSS 对其进行重新设计。我可以发送一个模型来展示应该是什么样子,但这里是基本要点:
- 背景颜色:#B27D47
- 替换播放按钮图片(我可以提供 .png 文件)
- 将播放器高度设为 75 像素,宽度为 100%
- 圆角播放器的角落
这是我希望播放器的样子:
(我有播放按钮的 .png 文件。)
我经常使用WordPress音频短代码将我的播客剧集嵌入到我的文章中:
[audio src="http://podcastsourcefile"]
这是我希望播放器的样子:
(我有播放按钮的 .png 文件。)
// Deactivate default MediaElement.js styles by WordPress
function remove_mediaelement_styles() {
if( is_home() ) {
wp_dequeue_style('wp-mediaelement');
wp_deregister_style('wp-mediaelement');
}
}
add_action( 'wp_print_styles', 'remove_mediaelement_styles' );
// Add own custom CSS file to reskin the audio player
function add_audio_player_styles () {
if( is_home() ) {
wp_enqueue_style('mini-audio-player', get_stylesheet_directory_uri() . '/assets/mediaelement/mediaelementplayer.css', array(), null );
}
}
add_action( 'wp_enqueue_scripts', 'add_audio_player_styles');
这样,你现在可以将整个mediaelement文件夹从wp-include中复制出来,把你的副本代替原始文件,然后调整.css文件。标有//optional的行显示了如何根据访问者所在的页面使用不同的样式。在这里找到:这里
我像在this帖子中解释的那样,另外添加了我的样式表到现有的样式表中:
function enqueue_mediaelement(){
wp_enqueue_style( 'wp-mediaelement' );
//enqueue '/wp-content/my-theme/audio-player-styles.css'
wp_enqueue_style('my-audio-player', get_stylesheet_directory_uri() . '/audio-player-styles.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
background-color: #B27D47;
}
我只是通过在主题编辑器中样式化我的custom.css来实现它。
音频短代码的值如下。在我的情况下,我进行了更改,以便它不会受到任何WordPress更新的影响(即使比其他评论中的PHP解决方案更加肮脏)。您可以使用开发人员工具并按自己的方式设置播放器(我的问题是我不需要100%宽度的播放器)。
:
.mejs-mute,
.mejs-duration-container,
.mejs-time,
.mejs-duration-container,
... {...}
有两个过滤器钩子来处理这个问题。 一个在开头,提供非常少的信息,通过它我们可以快速地截断整个短代码并返回我们自己定制的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
)