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

问题描述

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

I frequently use the Wordpress audio shortcode to embed my podcast episodes in my posts:

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

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

Unfortunately, the default audio player looks terrible. I would like to have it restyled with CSS. I have a mockup I can send to show you what it should look like, but here's the basic gist:

• 背景颜色:#B27D47
• 替换播放按钮图像(我可以提供 .png 文件)
• 使播放器高 75 像素，宽 100%
• 绕过玩家的角落

这是我希望玩家的样子:

Here's what I would like the player to look like:

(我有播放按钮的 .png 文件.)

(I have the .png file of the play button.)

推荐答案

考虑一下:

// 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 文件夹，将您的副本而不是原始文件排入队列，然后在那里摆弄 .css.标有//optional 的行显示如何根据访问者所在的页面使用不同的样式.找到它 这里

This way, you can now copy the whole mediaelement folder out of wp-include, enqueue your copy instead of the original and then fiddle with the .css there. The lines marked with //optional show how you can use different styles depending on the page your visitor is in. Found it here

这篇关于如何使用 CSS 设置默认 Wordpress 音频播放器的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！