如何使用CSS设置默认的WordPress音频播放器？

2023年1月12日 350次阅读

我经常使用Wordpress音频短代码在我的帖子中嵌入我的播客剧集：

http://podcastsourcefile

不幸的是,默认音频播放器看起来很糟糕.我想用CSS重新设计它.我有一个模型可以发送给你看看它应该是什么样子,但这里是基本的要点：

>背景颜色：#B27D47
>替换播放按钮图像(我可以提供.png文件)
>使播放器高75像素,宽100％
>围绕玩家的角落

这就是我希望玩家看起来像的样子：

(我有播放按钮的.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的行显示了如何根据访问者所在的页面使用不同的样式.找到它here

点赞