web-dev-qa-db-fra.com

Comment changer la taille du lecteur intégré WordPress ou afficher uniquement le bouton de lecture

Même si j'ai essayé de modifier la largeur de la taille du lecteur intégré [embed] qui ressemble à ceci  player  using [embed width="50" height="50"], mais peu importe la valeur que j'utilise, cela ne changera pas la taille. WordPress dit ici que cela devrait fonctionner.

Que puis-je faire pour changer la taille? Je veux juste montrer le bouton de lecture, rien d'autre.

Et je ne veux pas changer la largeur du contenu comme cela est suggéré dans d'autres posts sur ce site. Je veux que ce changement affecte uniquement le lecteur intégré.

embed
2
whitelord

Je suppose que vous parlez d’incorporer les fichiers audio , comme:

[embed]http://s.w.org/images/core/3.9/AintMisbehavin.mp3[/embed]

Le gestionnaire audio embed est enregistré dans wp_maybe_load_embeds() et filtré par le filtre wp_embed_handler_audio.

Donc, dans WP_Embed::shortcode() ceci génère:

[audio src="http://s.w.org/images/core/3.9/AintMisbehavin.mp3" /]

ainsi, certaines des méthodes mentionnées ici pour le shortcode [audio] devraient fonctionner.

Puisque nous utilisons le shortcode [embed], nous pourrions également ajouter notre propre wrapper pour prendre en charge le paramètre width:

add_filter( 'wp_embed_handler_audio', function( $html, $attr, $url, $rawattr )
{
    if( isset( $rawattr['width'] ) )
    {
        $html = sprintf( 
            '<div class="wpse_audio_embed_wrapper%s" style="width:%dpx">%s</div>', 
            $class = 1 * $rawattr['width'] < 120 ? ' audio-button-only' : '',
            $rawattr['width'], 
            $html
        );
    }
    return $html;
}, 10, 4 );

Ici, nous utilisons le $rawattr puisque nous voulons uniquement vérifier la saisie de l'utilisateur.

Nous ajoutons la classe audio-button-only au wrapper si la largeur est inférieure à 120.

Nous injectons ensuite le style en ligne après la feuille de style mediaelement pour masquer les parties pertinentes comme durée et volume:

add_action( 'wp_enqueue_scripts', function()
{
    wp_add_inline_style( 
        'mediaelement', 
        ' .audio-button-only .mejs-volume-button, 
          .audio-button-only .mejs-duration, 
          .audio-button-only .mejs-currenttime, 
          .audio-button-only .mejs-horizontal-volume-slider 
          { display: none !important; };'
    );
} );

Cela pourrait bien sûr être ajouté à la feuille de style correspondante.

Nous pourrions également étendre cette approche pour prendre en charge d’autres mini-versions avec les classes correspondantes.

Nous pouvons maintenant utiliser le paramètre width dans [embed] pour les fichiers audio:

[embed width="28"]http://s.w.org/images/core/3.9/AintMisbehavin.mp3[/embed]

Sortie:

Bouton jouer:

play button

Bouton Pause:

pause button

_ {Testé sur le thème des vingt seize.} _

5
birgire