web-dev-qa-db-fra.com

Wordcode natif "playlist" shortcode. Next et Prev il y en a mais sans icônes. Comment réparer?

Si j'utilise le magnifique shortcode de la playlist sur mon Wordpress 4.0, je ne vois pas les fameuses icônes "Suivant" et "Préc", mais uniquement ce code dans mon code HTML:

<div class="wp-playlist-next"></div>

et

<div class="wp-playlist-prev"></div>

Comment afficher les icônes sur les commandes next et prev?

customizationaudioicon
2
ginolin

dans la feuille de style:

.wp-playlist-prev{
   width:20px;
   height:20px;
   background-image: url("./theme_images_folder/something_icon.png");
}

identique pour le bouton suivant.

2
T.Todua

Pour les mettre dans la barre, vous pouvez ignorer les magnifiques WP listes de lecture et ajouter votre propre liste en utilisant directement mediaelement.js, comme pour cette question .

En gros, vous étendez MediaElementPlayer en écrivant des fonctions buildXXX, puis vous les spécifiez dans la propriété settings features en tant que tableau (avec tous les autres contrôles).

Les éléments suivants les intègrent dans WP en associant l'action wp_playlist_scripts avec une priorité de 9, suffisamment tôt pour que les extensions de MediaElementPlayer et le WP _wpmejsSettings soient activés avant la création des listes de lecture par wp-mediaelement.

(Par souci de simplicité, dashicons est utilisé ici pour le style.)

add_action( 'wp_playlist_scripts', function () {
wp_enqueue_style( 'dashicons' );
?>
<style>
.mejs-prev span, .mejs-next span {
    color:#eee; cursor:pointer; display:inline-block; font-family:"dashicons"; margin-top:5px;
}
</style>
<script>
(function ($) {
    if (typeof MediaElementPlayer !== 'undefined' && typeof _wpmejsSettings !== 'undefined') {
        $.extend(MediaElementPlayer.prototype, {
            buildprev: function(player, controls, layers, media) {
                var tracks = $('.wp-playlist-tracks .wp-playlist-item', controls.closest('.wp-playlist'));
                if (tracks.length > 1) {
                    $('<div class="mejs-button mejs-prev-button mejs-prev" >' +
                        '<span class="dashicons dashicons-arrow-left-alt2" title="' + this.options.prevText + '"></span>' +
                    '</div>').appendTo(controls).on('click', function (event) {
                        event.stopPropagation();
                        tracks.each(function (index) {
                            if ($(this).hasClass('wp-playlist-playing') ) {
                                index = (index - 1) % tracks.length;
                                tracks.get(index).click();
                                return false;
                            }
                        });
                    });
                }
            },
            buildnext: function(player, controls, layers, media) {
                var tracks = $('.wp-playlist-tracks .wp-playlist-item', controls.closest('.wp-playlist'));
                if (tracks.length > 1) {
                    $('<div class="mejs-button mejs-next-button mejs-next" >' +
                        '<span class="dashicons dashicons-arrow-right-alt2" title="' + this.options.nextText + '"></span>' +
                    '</div>').appendTo(controls).on('click', function (event) {
                        event.stopPropagation();
                        tracks.each(function (index) {
                            if ($(this).hasClass('wp-playlist-playing') ) {
                                index = (index + 1) % tracks.length;
                                tracks.get(index).click();
                                return false;
                            }
                        });
                    });
                }
            }
        });
        $.extend(_wpmejsSettings, {
            // Put these in the order you want.
            features: ['playpause','current','progress','duration','tracks','volume','fullscreen','prev','next'],
            prevText: <?php echo json_encode( __( 'Previous track' ) ); ?>,
            nextText: <?php echo json_encode( __( 'Next track' ) ); ?>
        });
    }
})(jQuery);
</script>
<?php
}, 9 );
1
bonger