web-dev-qa-db-ja.com

Wordpressのネイティブ「プレイリスト」ショートコード。 NextとPrevがありますが、アイコンはありません。直し方？

私のWordpress 4.0で美しいプレイリストのショートコードを使用した場合、有名な "Next"や "Prev"アイコンは表示されませんが、私のHtmlコードではこのコードだけが表示されます。

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

そして

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

次のコマンドや前のコマンドにアイコンを表示するにはどうすればいいですか？

customizationaudioicon
2
ginolin

スタイルシート内：

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

次のボタンも同じです。

2
T.Todua

これらをバーに入れるには、美しいWPプレイリストのものを無視し、mediaelement.jsを使用して直接自分自身を追加します。これは、 この質問と同様です 。

基本的には、MediaElementPlayer関数を記述してbuildXXXを拡張し、次にそれらをsettings featuresプロパティに配列として（他のすべてのコントロールとともに）指定します。

以下は、優先順位9でwp_playlist_scriptsアクションをフックすることで、それらをWPに統合します。プレイリストが_wpmejsSettingsによって作成される前に、MediaElementPlayerおよびWP wp-mediaelementの拡張が開始するのに十分早い時期に。

（わかりやすくするために、ここではdashiconsをスタイル設定に使用しています。）

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