如何使用 CSS 设置默认 Wordpress 音频播放器的样式？答案

【问题标题】：How do I style the default Wordpress audio player with CSS?如何使用 CSS 设置默认 Wordpress 音频播放器的样式？
【发布时间】：2014-07-15 13:17:23
【问题描述】：

我经常使用 Wordpress 音频短代码将我的播客片段嵌入到我的帖子中：

[audio src="http://podcastsourcefile"]

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

背景颜色：#B27D47
替换播放按钮图片（我可以提供.png文件）
让播放器高 75 像素，宽 100%
在播放器的角落里

这是我希望播放器的样子：

（我有播放按钮的 .png 文件。）

【问题讨论】：

你能发个小提琴或链接吗？

标签： css wordpress media-player audio-player

【解决方案1】：

考虑一下：

// 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');

这样，您现在可以从 wp-include 中复制整个 mediaelement 文件夹，将您的 copy 排入队列而不是原始文件夹，然后在那里摆弄 .css。标有 //optional 的行显示了如何根据访问者所在的页面使用不同的样式。找到它here

【讨论】：

【解决方案2】：

有two filter hooks 处理这个问题。 一个开头，只有很少的信息，我们用它来缩短整个短代码并返回我们自己的自定义 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
)

【讨论】：

【解决方案3】：

我只是通过在主题编辑器中设置我的 custom.css 来做到这一点。

音频短代码的值如下。就我而言，我对其进行了更改，因此它不会受到任何 Wordpress 更新的影响（即使它比其他评论中的 PHP 解决方案更脏）。您可以使用开发工具并按照自己的方式设置播放器样式（我的问题是我不需要 100% 宽度的播放器）。

：

.mejs-mute,
.mejs-duration-container, 
.mejs-time, 
.mejs-duration-container,

... {...}

【讨论】：

【解决方案4】：

我将我的样式表添加到现有样式表中，就像我在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' );

例如，如果您想为播放器背景着色，您现在可以将以下内容添加到 audio-player-styles.css：

 .mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
    background-color: #B27D47;
}

【讨论】：