如何向WordPress音频快捷码添加数据属性

时间:2017-11-24 作者:Ralphonz

我正在尝试集成fullpage。将js转换为wordpress主题。为了让音频在各个部分之间保持播放,我需要添加data属性data-keepplaying<audio> 由wordpress生成的标记。

然而,我不知道如何连接到内置的短代码中来添加数据属性。基本上,我正在寻找一种方法来修改音频快捷码的输出,以便在模板中执行此操作(或类似操作):

<?php echo do_shortcode(\'[audio src="\'.$audio_url.\'" atts="data-keepplaying"]\'); ?>

1 个回复
最合适的回答,由SO网友:CK MacLeod 整理而成

它们可能是实现您所需的更省钱的方法,可能是使用jQuery或更严格定制的代码版本,但只要保持WordPress的核心功能,您就可以尝试以下方法,该方法利用wp_audio_shortcode_override 滤器

我使用is_page() 对于主条件。您可以使用以下条件替换页面模板文件名get_page_template_slug() 如图所示:

/**
 * Use audio shortcode override filter selectively 
 * to replace built-in shortcode function with modified version
 * on pages using the specified template
 */

add_filter( \'wp_audio_shortcode_override\', \'add_keep_playing_att_on_these\', 10, 4 );

function add_keep_playing_att_on_these($override, $attr, $content, $instance) {

    if ( \'page-audio.php\' === get_page_template_slug( get_the_ID() ) ) {

        /**
         * EXCEPT AS NOTED
         * FROM HERE UP TO THE RETURN STATEMENTS
         * function mostly re-produces audio shortcode function from media.php
         * I removed the html filter from the original code, but may return later and put it back!
         **/

        $default_types = wp_get_audio_extensions();
        $defaults_atts = array(
            \'src\'      => \'\',
            \'loop\'     => \'\',
            \'autoplay\' => \'\',
            \'preload\'  => \'none\',
            \'class\'    => \'wp-audio-shortcode\',
            \'style\'    => \'width: 100%;\'
        );
        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\' );
        }

        /**
         * Filters 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( \'wp-mediaelement\' );
            wp_enqueue_script( \'wp-mediaelement\' );
        }

        /**
         * Filters the class attribute for the audio shortcode output container.
         *
         * @since 3.6.0
         *
         * @param string $class CSS class or list of space-separated classes.
         */
        $atts[\'class\'] = apply_filters( \'wp_audio_shortcode_class\', $atts[\'class\'] );

        $html_atts = array(
            \'class\'    => $atts[\'class\'],
            \'id\'       => sprintf( \'audio-%d-%d\', $post_id, $instance ),
            \'loop\'     => wp_validate_boolean( $atts[\'loop\'] ),
            \'autoplay\' => wp_validate_boolean( $atts[\'autoplay\'] ),
            \'preload\'  => $atts[\'preload\'],
            \'style\'    => $atts[\'style\'],
        );

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

        /****************************************************************
         * ADD data-keepplaying ATTRIBUTE TO AUDIO HTML         
         * THIS IS THE THE ONLY SIGNIFICANT ALTERATION IN THE BASIC AUDIO SHORTCODE
         ***************************************************************/

        $html .= sprintf( \'<audio %s controls="controls" data-keepplaying>\', 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>\';

        return $html ;

    } else {

        return $override ;

    }

}

结束

相关推荐

Shortcode IF statment help

下面是我一直致力于运行短代码的代码。我已经尝试实施if() 声明,但没有任何效果。我有两个输出。我想做的是,如果属性(\'img\', \'user\', \'text\') 显示在快捷码中$output1.否则,如果属性(\'img\', \'text\', \'length\', \'material\', \'power\') 显示在快捷码中$output2.function hire_equipment_func($atts) { extract( s