为主页添加音乐播放器
演示:https://0142536.xyz/

1.下载Aplayer https://github.com/DIYgod/APlayer
2.提取 APlayer.min.js APlayer.min.css 至对应文件夹
/wordpress/wp-content/themes/主题名/assets/css
/wordpress/wp-content/themes/主题名/assets/js

3.上传音乐文件至 wordpress/wp-content/uploads/***.mp3

4.编辑/wordpress/wp-content/themes/主题名 文件夹中找到footer.php 文件 添加以下代码

<!-- APlayer -->
<link rel="stylesheet" href="wp-content/themes/主题名/assets/css/APlayer.min.css">
<script src="wp-content/themes/主题名/assets/js/APlayer.min.js"></script>
<div id='aplayer'></div>
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
        showlrc: false,         <!-- 歌词 -->
        fixed: true,            <!-- 固定 -->
        mini: true,         <!-- 迷你模式 -->
        volume: 0.5,            <!-- 音量 -->
        listFolded: false,      <!-- 列表默认折叠 -->
        order: 'random'           <!-- 音频循环顺序 -->
        preload: 'none',          <!-- 预加载 -->
        audio: [
        {
            title: '搁浅',
            author: '周杰伦',
            url: 'https://0142536.xyz/wp-content/uploads/2023/02/搁浅.mp3',
            pic: 'https://0142536.xyz/wp-content/uploads/2023/02/music.jpg'
        },
        {
            title: '搁浅',
            author: '周杰伦',
            url: 'https://0142536.xyz/wp-content/uploads/2023/02/搁浅.mp3',
            pic: 'https://0142536.xyz/wp-content/uploads/2023/02/music.jpg'
        },    <!-- 这后面 -->
               ]
    });
</script>

5.添加音乐复制以下代码至},后 修改文件名 路径 封面

        {
            title: '搁浅',     <!--音乐名-->
            author: '周杰伦',  <!--歌手-->
            url: 'https://0142536.xyz/wp-content/uploads/2023/02/搁浅.mp3',  <!--歌曲路径-->
            pic: 'https://0142536.xyz/wp-content/uploads/2023/02/music.jpg'   <!--封面路径-->
        },

如需调整Aplayer播放器详见项目地址:https://aplayer.js.org/#/zh-Hans/