WordPress 4.4媒体播放器:不同的CSS样式表取决于短代码?

时间:2016-03-20 08:52:33

标签: php wordpress mediaelement.js

问题:我希望MediaElement.js在我不添加[audio]短代码时使用默认样式,但在添加参数时使用不同的样式表,或者当我写一个参数时不同的短代码,但仅适用于这个确切的播放器。

可能的解决方案: In media.php,其中调用wp_audio_shortcode(),有一段说明:

if ( 'mediaelement' === $library && did_action( 'init' ) ) {
    wp_enqueue_style( 'wp-mediaelement' );
    wp_enqueue_script( 'wp-mediaelement' );
}

所以我基本上做的是copypasta整个wp_audio_shortcode函数,给它一个不同的名称(并将其他一些wp_audio_shortcode更改为我的新名称)并将第二行更改为:

    wp_enqueue_style('mini-audio-player', get_stylesheet_directory_uri() . '/assets/mediaelement/mediaelementplayer.css', array(), null );

其中mediaelementplayer.css是我的新样式表。

会发生什么:这在某种程度上起作用 - 当在页面上只执行我的新短代码(调用我修改过的短代码函数)时,它会使用此样式表。 然而,如果页面上还有默认 [音频]短代码,例如,同一页面上有两个播放器,则两者都将具有默认外观。< / p>

问题:如何正确排列两个样式表?

如果我忘记改变某些内容,我会给你完整的参考功能:

/**
 * Builds the Audio shortcode output using a special stylesheet.
 *
 * This implements the functionality of the Audio Shortcode for displaying
 * WordPress mp3s in a post.
 *
 * @staticvar int $instance
 *
 * @param array  $attr {
 *     Attributes of the audio shortcode.
 *
 *     @type string $src      URL to the source of the audio file. Default empty.
 *     @type string $loop     The 'loop' attribute for the `<audio>` element. Default empty.
 *     @type string $autoplay The 'autoplay' attribute for the `<audio>` element. Default empty.
 *     @type string $preload  The 'preload' attribute for the `<audio>` element. Default empty.
 *     @type string $class    The 'class' attribute for the `<audio>` element. Default 'wp-audio-shortcode'.
 *     @type string $style    The 'style' attribute for the `<audio>` element. Default 'width: 100%'.
 * }
 * @param string $content Shortcode content.
 * @return string|void HTML content to display audio.
 */
function wp_audiothumb_shortcode( $attr, $content = '' ) {
    $post_id = get_post() ? get_the_ID() : 0;

    static $instance = 0;
    $instance++;

    /**
     * Filter the default audio shortcode output.
     *
     * If the filtered output isn't empty, it will be used instead of generating the default audio template.
     *
     * @since 3.6.0
     *
     * @param string $html     Empty variable to be replaced with shortcode markup.
     * @param array  $attr     Attributes of the shortcode. @see wp_audio_shortcode()
     * @param string $content  Shortcode content.
     * @param int    $instance Unique numeric ID of this audio shortcode instance.
     */
    $override = apply_filters( 'wp_audio_shortcode_override', '', $attr, $content, $instance );
    if ( '' !== $override ) {
        return $override;
    }

    $audio = null;

    $default_types = wp_get_audio_extensions();
    $defaults_atts = array(
        'src'      => '',
        'loop'     => '',
        'autoplay' => '',
        'preload'  => 'none'
    );
    foreach ( $default_types as $type ) {
        $defaults_atts[$type] = '';
    }

    $atts = shortcode_atts( $defaults_atts, $attr, 'audio' );

    $primary = false;
    if ( ! empty( $atts['src'] ) ) {
        $type = wp_check_filetype( $atts['src'], wp_get_mime_types() );
        if ( ! in_array( strtolower( $type['ext'] ), $default_types ) ) {
            return sprintf( '<a class="wp-embedded-audio" href="%s">%s</a>', esc_url( $atts['src'] ), esc_html( $atts['src'] ) );
        }
        $primary = true;
        array_unshift( $default_types, 'src' );
    } else {
        foreach ( $default_types as $ext ) {
            if ( ! empty( $atts[ $ext ] ) ) {
                $type = wp_check_filetype( $atts[ $ext ], wp_get_mime_types() );
                if ( strtolower( $type['ext'] ) === $ext ) {
                    $primary = true;
                }
            }
        }
    }

    if ( ! $primary ) {
        $audios = get_attached_media( 'audio', $post_id );
        if ( empty( $audios ) ) {
            return;
        }

        $audio = reset( $audios );
        $atts['src'] = wp_get_attachment_url( $audio->ID );
        if ( empty( $atts['src'] ) ) {
            return;
        }

        array_unshift( $default_types, 'src' );
    }

    /**
     * Filter the media library used for the audio shortcode.
     *
     * @since 3.6.0
     *
     * @param string $library Media library used for the audio shortcode.
     */
    $library = apply_filters( 'wp_audio_shortcode_library', 'mediaelement' );
    if ( 'mediaelement' === $library && did_action( 'init' ) ) {
        wp_enqueue_style('mini-audio-player', get_stylesheet_directory_uri() . '/assets/mediaelement/mediaelementplayer.css', array(), null );
        wp_enqueue_script( 'wp-mediaelement' );
    }

    /**
     * Filter the class attribute for the audio shortcode output container.
     *
     * @since 3.6.0
     *
     * @param string $class CSS class or list of space-separated classes.
     */
    $html_atts = array(
        'class'    => apply_filters( 'wp_audio_shortcode_class', 'wp-audio-shortcode' ),
        'id'       => sprintf( 'audio-%d-%d', $post_id, $instance ),
        'loop'     => wp_validate_boolean( $atts['loop'] ),
        'autoplay' => wp_validate_boolean( $atts['autoplay'] ),
        'preload'  => $atts['preload'],
        'style'    => 'width: 100%; visibility: hidden;',
        );

    // These ones should just be omitted altogether if they are blank
    foreach ( array( 'loop', 'autoplay', 'preload' ) as $a ) {
        if ( empty( $html_atts[$a] ) ) {
            unset( $html_atts[$a] );
        }
    }

    $attr_strings = array();
    foreach ( $html_atts as $k => $v ) {
        $attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
    }

    $html = '';
    if ( 'mediaelement' === $library && 1 === $instance ) {
        $html .= "<!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->\n";
    }
    $html .= sprintf( '<audio %s controls="controls">', join( ' ', $attr_strings ) );

    $fileurl = '';
    $source = '<source type="%s" src="%s" />';
    foreach ( $default_types as $fallback ) {
        if ( ! empty( $atts[ $fallback ] ) ) {
            if ( empty( $fileurl ) ) {
                $fileurl = $atts[ $fallback ];
            }
            $type = wp_check_filetype( $atts[ $fallback ], wp_get_mime_types() );
            $url = add_query_arg( '_', $instance, $atts[ $fallback ] );
            $html .= sprintf( $source, $type['type'], esc_url( $url ) );
        }
    }

    if ( 'mediaelement' === $library ) {
        $html .= wp_mediaelement_fallback( $fileurl );
    }
    $html .= '</audio>';

    /**
     * Filter the audio shortcode output.
     *
     * @since 3.6.0
     *
     * @param string $html    Audio shortcode HTML output.
     * @param array  $atts    Array of audio shortcode attributes.
     * @param string $audio   Audio file.
     * @param int    $post_id Post ID.
     * @param string $library Media library used for the audio shortcode.
     */
    return apply_filters( 'wp_audiothumb_shortcode', $html, $atts, $audio, $post_id, $library );
}
add_shortcode( 'audiothumb', 'wp_audiothumb_shortcode' );

0 个答案:

没有答案