如何使用CSS设置默认Wordpress音频播放器的样式？_Css_Wordpress_Media Player_Audio Player

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

css wordpress

如何使用CSS设置默认Wordpress音频播放器的样式？,css,wordpress,media-player,audio-player,Css,Wordpress,Media Player,Audio Player,我经常使用Wordpress音频短代码在我的帖子中嵌入我的播客片段： [audio src="http://podcastsourcefile"] 不幸的是，默认的音频播放器看起来很糟糕。我想用CSS重新设计样式。我可以发送一个模型，向您展示它应该是什么样子，但以下是基本要点：背景色：#B27D47 替换播放按钮图像（我可以提供.png文件）使播放器高75像素，宽100% 绕过球员的角落以下是我希望玩家的样子：（我有播放按钮的.png文件。）有很多方法来处理这个问题一开始是一个，

我经常使用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;
};

和在短码函数末尾运行的另一个：

add_filter( 'wp_audio_shortcode', 'short2_so_23875654', 10, 5 );

function short2_so_23875654( $html, $atts, $audio, $post_id, $library )
{
    return $html;   
}

到达的参数是：

Array
(
    [0] => ''
    [1] => Array
        (
            [src] => http://example.com/wp-content/uploads/file.mp3
        )

    [2] => ''
    [3] => 1
)

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
)

数组
(
[0] => 
[1] =>阵列
(
[class]=>wp音频短码
[id]=>audio-715-1
[预加载]=>无
[样式]=>宽度：100%
)
[2] => 
[3] => 715
[4] =>媒体元素
)

我只是通过在主题编辑器中设置custom.css的样式来实现

音频短代码的值如下所示。在我的例子中，我更改了它，这样它就不会受到任何Wordpress更新的影响（即使它比另一条评论中的PHP解决方案更脏）。你可以使用开发工具，按照自己的方式设计播放器（我的问题是我不需要100%宽度的播放器）

。。。{…}

考虑一下：

// 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的行显示了如何根据访问者所在的页面使用不同的样式。找到它
我在现有样式表的基础上添加了我的样式表，正如我在帖子中解释的：
例如，如果要为播放器背景上色，现在可以将以下内容添加到audio-player-styles.css中：

你能发一个提琴或链接吗？
// 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');

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; }