WordPress 默认音频播放器美化教程

因为对一些小部件的美化追求，所以有时候就需要对小部件进行个性化的修改，并通过尝试提供统一的用户体验来将它们与WordPress生态系统相结合，以达到最佳程度。由于WordPress带有自己的小部件，短代码和其他组件，因此任何主题都必须考虑它们并根据其外观和感觉设置样式。

WordPress的大多数原生组件（即小部件或短代码）没有自己预定义的样式（即图库短代码），但其他组件（特别是基于JavaScript的）会这样做（即音频播放器）。在这篇文章中，我们将看到如何直观地自定义默认的 WordPress 媒体播放器，并让它在我们的主题上感到宾至如归

WordPress媒体播放器

WordPress媒体播放器是MediaElement.js之上的包装器，MediaElement是一款功能强大，可定制的音频和视频播放器，由HTML5功能提供支持。默认情况下，在WordPress中，它看起来像这样：

我们将在本教程中实现的是为播放器生成一组预定义的选择器（以及 WordPress 的音频播放列表），并更好地将其与我们的主题匹配。以下是我们将首先实现的目标：

首先，我们会将玩家转换为浅色皮肤主题，适用于更多已经处于白底深色模式的主题。

添加样式文件

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

说明：
调整优化部分是我自行添加的，主要是避免和一些主题的样式冲突

添加svg播放图标

mejs-controls-dark.svg放置在主题css/images目录下css/images/mejs-controls-dark.svg

挂载脚本

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

完成