wordpress修改默认的媒体播放器

作者:matrix 被围观: 2,091 次 发布时间:2019-03-07 分类:Wordpress 零零星星 | 一条评论 »

本来几乎少有在blog上放置音乐,但是看到之前的帖子的哪个音频播放UI简直难受的很,已经记不起WP是从多少版本开始有这种协调默认的媒体播放界面。刚开始应该是使用html5的默认audio播放界面,后面就使用MediaElement.js的播放器且覆盖了样式,默认都是黑色调的蓝/白色进度条的那种。

图片4441-wordpress修改默认的媒体播放器
音频播放界面如上图样子,早就该改了的 实在难受 😱 😱
下面的代码来自@Vassilis Mastorostergios
,style很好看 也就照教程搬过来用了。
修改后的样式:
图片4447-wordpress修改默认的媒体播放器

添加样式文件

主题css目录下新建文件my-theme-player.css

/* Media Element Player styles */

/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
    background-color: #efefef;
}

/* Playmejs-time-floater controls */
.mytheme-mejs-container .mejs-button > button {
    background-image: url(images/mejs-controls-dark.svg);
}

.mytheme-mejs-container .mejs-time {
    color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
    background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
    background: #db4e88;
}

/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
    height: 3px;
}

.mytheme-mejs-container .mejs-time-handle-content {
    top: -6px;
}

.mytheme-mejs-container .mejs-time-total {
    margin-top: 8px;
}

.mytheme-mejs-container .mejs-horizontal-volume-total {
    top: 19px;
}

/* WordPress audio playlist styles */

.wp-playlist-light {
    box-shadow: 3px 3px 0 #e2e2e2;
}

/* Captions - Track titles / subtitles, time */
.wp-playlist-light .wp-playlist-caption,
.wp-playlist-light .wp-playlist-item-length {
    color: #787878;
}

/* Captions - Current track */
.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-title {
    font-size: 16px;
}

.wp-playlist-light .wp-playlist-item-album {
    font-style: normal;
}

.wp-playlist-light .wp-playlist-item-artist {
    text-transform: none;
    opacity: .8;
}

/* Playlist items */
.wp-playlist-light .wp-playlist-item {
    padding: 10px 0;
    border-bottom-color: #efefef;
}

.wp-playlist-light .wp-playlist-item:last-child {
    padding-bottom: 0;
}

.wp-playlist-light .wp-playlist-playing {
    font-weight: normal;
    border-bottom-color: #db4e88;
}

.wp-playlist-light .wp-playlist-item-length {
    top: 10px;
}

/*调整优化*/
.mejs-time-float,.mejs-time-float-current,.mejs-time-float-corner{
    border:none ;
    color: #888888; /*设置文字颜色*/
}
.wp-audio-shortcode a,.wp-playlist a{
    border-bottom:none; /*去除主题的a标签全局下划线*/
}

说明:
调整优化部分是我自行添加的,主要是避免和本主题的样式冲突

添加svg播放图标

mejs-controls-dark.svg放置在主题css/images目录下css/images/mejs-controls-dark.svg
下载:
https://d.pr/f/Y83MD
https://pan.baidu.com/s/14P4TOe1StJQfoRHgAmMrkg#提取码: 4pjf

挂载脚本

functions.php适当位置添加css和js加载的钩子


//加载之前新建的my-theme-player.css文件 //判断启用wp-mediaelement才会加载 避免多余的资源请求 add_action( 'wp_footer', 'ci_theme_footer_scripts' ); function ci_theme_footer_scripts() { if ( wp_style_is( 'wp-mediaelement', 'enqueued' ) ) { wp_enqueue_style( 'my-theme-player', get_template_directory_uri() . '/css/my-theme-player.css', array( 'wp-mediaelement', ), '1.0' ); } } //给MediaElementJs播放器添加自定义样式mytheme-mejs-container 用于重写系统自带css /** * Add an HTML class to MediaElement.js container elements to aid styling. * * Extends the core _wpmejsSettings object to add a new feature via the * MediaElement.js plugin API. */ add_action( 'wp_print_footer_scripts', 'mytheme_mejs_add_container_class' ); function mytheme_mejs_add_container_class() { if ( ! wp_script_is( 'mediaelement', 'done' ) ) { return; } ?> <script> (function() { var settings = window._wpmejsSettings || {}; settings.features = settings.features || mejs.MepDefaults.features; settings.features.push( 'exampleclass' ); MediaElementPlayer.prototype.buildexampleclass = function( player ) { player.container.addClass( 'mytheme-mejs-container' ); }; })(); </script> <?php }

PEACE~

参考:
https://www.cssigniter.com/css-style-guide-for-the-default-WordPress-media-player/
https://codex.WordPress.org/Playlist_Shortcode

找相似:
本文固定链接:https://www.hhtjim.com/change-the-default-wordpress-media-player.html
matrix
本文章由 matrix 于2019年03月07日发布在Wordpress, 零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:wordpress修改默认的媒体播放器-HHTjim'S 部落格
关键字:

有1条评论 »

  1. 灰常记忆 灰常记忆 2019-3-8 16:51:35 +0800#1

    就用原装的不折腾了,累……

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

插入图片

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!