私のWordpress 4.0で美しいプレイリストのショートコードを使用した場合、有名な "Next"や "Prev"アイコンは表示されませんが、私のHtmlコードではこのコードだけが表示されます。
<div class="wp-playlist-next"></div>
そして
<div class="wp-playlist-prev"></div>
次のコマンドや前のコマンドにアイコンを表示するにはどうすればいいですか?
スタイルシート内:
.wp-playlist-prev{
width:20px;
height:20px;
background-image: url("./theme_images_folder/something_icon.png");
}
次のボタンも同じです。
これらをバーに入れるには、美しい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 );