All geek questions in one place

How to style default Wordpress player using CSS?

I often use Wordpress shortcode to embed my podcast episodes in my posts:

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

Unfortunately, the default player looks awful. I would like it to be reused with CSS. I have a layout that I can send to show you what it should look like, but here is the main point:

  • background color: # B27D47
  • replace the image of the play button (I can provide a .png file)
  • make the player 75 pixels high, 100% wide
  • around the corners of the player

Here is what I would like the player to look like this:

(I have a play button .png file.)

+4
source share
4

:

// 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. , //, , , .

+1

-, . , , 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
)
0

, custom.css .

. , Wordpress ( , PHP ). - ( , 100%).

:

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

... {...}

HTML output of Wordpress audio shortcode

0

, :

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

Source: https://habr.com/ru/post/1542078/

More articles:


All Articles