给网站加个音乐播放器，让网站更有温度

给网站加个音乐播放器

最近在折腾网站的时候，突然想给站点加个背景音乐功能。毕竟有时候写文章写累了，能听听歌放松一下也挺好的。但是找了一圈，要么是那种花里胡哨的播放器，要么就是和子比主题的风格完全不搭。

试了几个现成的音乐插件，结果都不太理想。有的界面太老气，有的功能太复杂，还有的直接就和主题冲突了。索性自己动手，花了点时间做了个轻量级的音乐播放器插件，专门适配子比主题。

为什么要自己做

说实话，一开始我也觉得没必要重复造轮子。但用了几个现成的方案后，发现问题还真不少：

1. 样式不统一：现成的播放器大多有自己的UI风格，放到子比主题里就像”外来户”

2. 功能太重：很多播放器为了通用性，加了一大堆用不上的功能

3. 性能问题：有些插件加载了一堆额外的库，拖慢了页面速度

既然如此，那就做个简单实用的，只保留核心功能，样式完全跟随主题，这样看起来才像”原生”的。

核心功能

这个插件的定位很明确：轻量、好看、够用。具体功能包括：

1. 音乐源支持

支持网易云音乐和QQ音乐两大平台。填个歌单ID或者单曲ID就能用，不需要复杂的配置。我自己一般就建个网易云歌单，把喜欢的歌都丢进去，然后填上歌单ID就搞定了。

2. 浮动按钮

在页面右侧会显示一个音乐图标的浮动按钮，点击就能打开播放列表。这个按钮完全融入子比主题的侧边栏系统，看起来就像主题自带的一样。

最重要的是，这个按钮可以自定义：

– 想显示文字就显示，不想显示就只留图标

– 图标可以换成任何Font Awesome图标

– 颜色可以自己调，也可以跟随主题

3. 弹窗播放器

点击浮动按钮后，会弹出一个播放列表窗口。

– 圆角、阴影、动画，都和主题保持一致

– 支持亮色/暗色模式自动切换

– 简洁的歌曲列表，封面、歌名、歌手，该有的都有

4. 歌词显示

播放时会在页面底部显示当前播放的歌词。这个功能可以选择性开启，PC端和移动端分别控制。歌词的背景色、文字颜色、透明度都能自定义。

配置超简单

基础设置

– 选择音乐源（网易云或QQ音乐）

– 填写歌单ID或单曲ID

– 勾选PC/移动端是否显示

按钮样式

– 自定义图标（默认是音符图标）

– 可选填写按钮文字（我一般留空，只显示图标）

– 调整按钮颜色（留空就用主题默认色）

歌词样式

– 背景色和文字颜色

– 透明度调节

使用体验

不足：

– 页面切换时音乐会中断（这个是技术限制，InstantClick和播放器不兼容）

关于音乐中断的问题，因为和主题的InstantClick冲突导致页面功能失效。

一些小建议

## 技术实现

这个插件基于WordPress开发，核心技术栈包括：

– 原生JavaScript（没有引入jQuery等重量级库）

– CSS变量（跟随主题的配色系统）

– WordPress REST API（获取歌曲列表）

– 祁杰API（音乐数据接口）

代码结构很简单：

– `music.php`：插件主文件

– `assets/js/music-player.js`：播放器逻辑

– `assets/css/music-player.css`：样式文件

如果你懂点PHP和JavaScript，可以根据自己的需求修改。

写在最后

做这个插件的初衷很简单：让网站多一点”人情味”。虽然功能不多，但每个细节都是实际使用中打磨出来的。

如果你也在用子比主题，也想给网站加个音乐播放器，不妨试试这个。虽然不是完美的，但至少是用心做的。

有问题欢迎留言，我看到会回复~

—

插件特点总结：

✅ 专为子比主题设计  

✅ 样式完美适配，支持亮暗模式  

✅ 轻量级，不影响性能  

✅ 配置简单，5分钟上手  

✅ 支持网易云/QQ音乐  

✅ 可自定义按钮和歌词样式  

下载地址：

使用教程：

1. 上传插件到`wp-content/plugins/`目录

2. 后台启用插件

3. 进入”设置 → 站点音乐”配置

4. 完成！

—

P.S. 有能力的朋友可以自己修改。如果觉得有用，欢迎分享给其他子比用户~