如何在短码[音频]中添加‘class’属性?

时间:2016-03-20 作者:Samuel LOL Hackson

我想在同一页上为两个MediaElement播放器设计不同的样式,并找到了更简单的方法(与添加全新的短代码和将新样式表排队相比,which I couldn\'t get working either) 是为播放器a的音频短代码分配不同的类。

The WordPress code reference提及添加class 属性设置为短代码,but I can\'t get it to work. 例如,写作

[audio class="miniplayer" mp3="http://localhost/working_url.mp3"][/audio]
确实给了我一个可用的播放器,但我在Firefox控制台的任何地方都看不到分配给它的“miniplayer”。那么,我如何正确地为我的短代码分配一个类呢?

3 个回复
最合适的回答,由SO网友:iantsch 整理而成

WordPress允许至少三个选项根据您的需要操作代码。

使用一个全局变量,用@Jevuska的答案递增。

global $my_audio_player_count;
$my_audio_player_count = 0;

add_filter( \'wp_audio_shortcode_class\', \'wpse221201_audio_shortcode_class\', 1, 1 );
function wpse221201_audio_shortcode_class( $class ) {
    global $my_audio_player_count;
    $class .= \' my-audio-player-\'.$my_audio_player_count++;
    return $class;
}
删除内置短代码并添加您自己的短代码

remove_shortcode(\'audio\');
add_shortcode(\'audio\', \'my_audio_shortcode\');

function my_audio_shortcode($args) {
    //TODO: Insert your own version of the shortcode
}
使用wp_audio_shortcode_override 要覆盖的过滤器挂钩

add_filter(\'wp_audio_shortcode_override\', \'my_audio_shortcode\');

function my_audio_shortcode($args) {
    //TODO: Insert your own version of the shortcode
}

SO网友:Jevuska

没有可添加的选项class 作为短代码中的参数[audio]. 您需要使用筛选器wp_audio_shortcode_class 更改默认类的步骤wp-audio-shortcode 或添加其他类。这里是过滤它的示例代码(添加到functions.php 主题文件)。

add_filter( \'wp_audio_shortcode_class\', \'wpse221201_audio_shortcode_class\', 1, 1 );
function wpse221201_audio_shortcode_class( $class )
{
    $class .= \' my-class\'; /* additional class */
    return $class;
}
对于多个短代码[audio], 您可以使用static $instance 循环(如果需要使用全局变量,请查看@iantsch answer ):

add_filter( \'wp_audio_shortcode_class\', \'wpse221201_audio_shortcode_class\', 1, 1 );
function wpse221201_audio_shortcode_class( $class )
{
    static $instance = 0;
    $instance++;

    /* class name with increament number, change my-audio-class */
    $class = sprintf( \'%s my-audio-class-%d\', $class, $instance );
    return $class;
}
这里是下一个选项WordPress v4.5, 我们钩住shortcode_atts_{$shortcode} 和特定于目标的短代码。

add_filter( \'shortcode_atts_audio\', \'wpse221201_shortcode_atts_audio\', 1, 4 );
function wpse221201_shortcode_atts_audio( $out, $pairs, $atts, $shortcode )
{
    //static $instance = 0;
    //$instance++;

    /* target parameter \'mp3\' with its file
       or add your own parameter ( $atts[whatever] ) and use it in  conditional statement
    */
    if ( isset( $out[\'mp3\'] ) && isset( $out[\'class\'] ) && \'source.mp3\' == $out[\'mp3\'] )
        $out[\'class\'] = sprintf( \'%s my-class\', $out[\'class\'] );//additional class

    return $out;
}

SO网友:Samuel LOL Hackson

我仔细考虑了所有的建议,并想向我介绍什么是最优雅的解决方案(但我会把“已回答”的徽章留在原地),以便将来的读者也能从中受益。这结合了过滤器的使用(由于@Jevuska)和添加短代码的建议(s/o@iantsch)。

我添加了一个thumbaudio 将执行audio 使用修改过的类过滤器进行短代码。这样,如果用户键入音频快捷码,它将显示默认播放器,但如果用户键入thumbaudio, 它会增加miniplayer 去上课。用户可以完全控制在HTML文件中何时何地应用哪个类。

add_shortcode(\'thumbaudio\', \'my_thumbaudio_shortcode\');

function wp_audio_shortcode_thumbclass( $class ) {
    $class .= \' miniplayer\';
    return $class;
}

function my_thumbaudio_shortcode( $attr ) {
    add_filter( \'wp_audio_shortcode_class\', \'wp_audio_shortcode_thumbclass\', 1, 1 );
    echo wp_audio_shortcode( $attr );
    remove_filter( \'wp_audio_shortcode_class\', \'wp_audio_shortcode_thumbclass\', 1 );
}