wake-up-neo.net

Wie füge ich dem Shortcode [Audio] das Attribut 'class' hinzu?

Ich möchte zwei MediaElement-Player auf derselben Seite unterschiedlich formatieren und habe herausgefunden, wie dies einfacher zu bewerkstelligen ist (im Vergleich zum Hinzufügen eines völlig neuen Shortcodes und zum Einreihen eines neuen Stylesheets, das auch nicht funktioniert . _) soll dem Audio-Shortcode von Player A eine andere Klasse zuweisen.

Die WordPress-Codereferenz erwähnt das Hinzufügen eines class-Attributs zum Shortcode, aber ich kann es nicht zum Laufen bringen. Zum Beispiel schreiben

[audio class="miniplayer" mp3="http://localhost/working_url.mp3"][/audio]

gibt mir einen funktionierenden Player, aber ich kann den zugewiesenen "Miniplayer" nirgendwo in meiner Firefox-Konsole sehen. Wie ordne ich meinem Shortcode eine Klasse zu?

4

WordPress bietet mindestens drei Optionen, um den Code an Ihre Bedürfnisse anzupassen.

  1. Verwenden Sie eine globale Variable, die Sie mit der Antwort von @Jevuska inkrementieren.

    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;
    }
    
  2. Entfernen Sie den integrierten Shortcode und fügen Sie Ihren eigenen hinzu

    remove_shortcode('audio');
    add_shortcode('audio', 'my_audio_shortcode');
    
    function my_audio_shortcode($args) {
        //TODO: Insert your own version of the shortcode
    }
    
  3. Verwenden Sie den Filter-Hook wp_audio_shortcode_override zum Überschreiben

    add_filter('wp_audio_shortcode_override', 'my_audio_shortcode');
    
    function my_audio_shortcode($args) {
        //TODO: Insert your own version of the shortcode
    }
    
0
iantsch

Es gibt keine Optionen zum Hinzufügen von class als Parameter im Shortcode [audio] . Sie müssen filter wp_audio_shortcode_class verwenden, um die Standardklasse wp-audio-shortcode zu ändern oder zusätzliche Klassen hinzuzufügen. Hier Beispielcode zum Filtern (in functions.php-Themendateien einfügen).

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

Für mehrere Shortcodes [audio] können Sie eine Schleife mit static $instance ausführen (wenn Sie eine globale Variable verwenden müssen, schauen Sie nach @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;
}

Hier eine andere Option für den nächsten WordPress v4.5, wir haken shortcode_atts_{$shortcode} und zielen auf einen bestimmten 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;
}
2
Jevuska

Ich habe mit allen Vorschlägen rumgespielt und möchte die eleganteste Lösung für mich präsentieren (aber ich lasse das "beantwortete" Abzeichen dort, wo es ist), damit auch zukünftige Leser davon profitieren können. Dies kombiniert die Verwendung von Filtern (danke an @Jevuska) und den Vorschlag, einen Shortcode (s/o @iantsch) hinzuzufügen.

Ich habe einen thumbaudio-Shortcode hinzugefügt, der den audio-Shortcode mit dem geänderten Klassenfilter ausführt. Auf diese Weise wird, wenn ein Benutzer den Audio-Shortcode eingibt, der Standard-Player angezeigt. Wenn er jedoch thumbaudio eingibt, werden den Klassen miniplayer hinzugefügt. Der Benutzer hat die volle Kontrolle darüber, welche Klasse wo und wann in der HTML-Datei angewendet wird.

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 );
}
1