web-dev-qa-db-fra.com

Comment ajouter l'attribut 'class' dans le shortcode [audio]?

J'aimerais styler différemment deux lecteurs MediaElement sur la même page, et j'ai trouvé le moyen le plus simple de le faire (par rapport à l'ajout d'un shortcode complètement nouveau et à la mise en file d'attente d'une nouvelle feuille de style, que je ne pouvais pas utiliser ) est d’affecter une classe différente au shortcode audio du lecteur A.

La référence de code WordPress mentionne l'ajout d'un attribut class au shortcode, mais je ne parviens pas à le faire fonctionner. Par exemple, écrire

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

me donne un lecteur actif, mais je ne peux voir le "mini-joueur" qui lui est attribué nulle part dans ma console Firefox. Alors, comment assigner une classe à mon shortcode correctement?

shortcodecssaudioattribute
4
Samuel LOL Hackson

WordPress permet au moins trois options pour manipuler le code à vos besoins.

  1. Utilisez une variable globale que vous incrémentez avec la réponse de @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;
}

  2. Supprimez le shortcode intégré et ajoutez le vôtre

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

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

  3. Utilisez le crochet de filtre wp_audio_shortcode_override pour remplacer

    add_filter('wp_audio_shortcode_override', 'my_audio_shortcode');

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

Il n'y a pas d'options pour ajouter class comme paramètre dans le shortcode [audio] . Vous devez utiliser le filtre wp_audio_shortcode_class pour modifier la classe par défaut wp-audio-shortcode ou ajouter une classe supplémentaire. Voici un exemple de code pour le filtrer (ajouter dans les fichiers de thème 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;
}

Pour plusieurs shortcode [audio], vous pouvez utiliser static $instance pour faire une boucle (si vous devez utiliser une variable globale, jetez un coup d'œil @iants 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;
}

Voici une autre option pour le prochain WordPress v4.5, nous raccrochons shortcode_atts_{$shortcode} et un shortcode spécifique.

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

J'ai bricolé avec toutes les suggestions et je voudrais vous présenter la solution la plus élégante (mais je laisserai le badge "Répondu" là où il se trouve), afin que les futurs lecteurs puissent en bénéficier également. Cela combine l'utilisation de filtres (grâce à @Jevuska) et la suggestion d'ajouter un shortcode (s/o @iantsch).

J'ai ajouté un shortcode thumbaudio qui exécutera le shortcode audio avec le filtre de classe modifié. De cette façon, si un utilisateur tape le shortcode audio, il affichera le lecteur par défaut, mais s'il (elle) saisit thumbaudio, cela ajoutera miniplayer aux classes. L'utilisateur a le contrôle total sur la classe qui est appliquée où et quand dans le fichier 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 );
}
1
Samuel LOL Hackson