如何使用CSS设置默认的Wordpress音频播放器样式? [英] How do I style the default Wordpress audio player with CSS?
问题描述
我经常使用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音频播放器样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!