对于使用WordPress主题的朋友多多少少都会折腾主题，除了让它提高打开速度之外，还会让它看起来更为美观。Netease-Music网易云音乐插件是我至今为止，用的时间最长的一个插件。因为它可以将我在网易云上所收藏喜欢的歌单，直接调用到WordPress平台上进行播放。
美化WordPress主题里的Netease-Music网易云音乐插件
另外，这款插件是通过网易云音乐的接口进行播放，因此，除了美观之外，还不占用服务器的空间和带宽。但Netease-Music插件的默认样式宽度比较小，且看起来和我主题没那么协调，所以为了增大宽度且更好的融入我的博客，我决定对它进行了一些小幅度的修改。
一、修改Netease-Music的页面宽度
Netease-Music插件的默认宽度是1100px，但是我主题的可视宽度是1100px，为了视觉上保持一致，或者差不多的宽度，首先就要从宽度下手。
①、修改歌单封面图的宽度
找到插件Netease-Music插件buildcss目录下的page.min.css文件。找到以下这段代码：
.nm-container{max-width:1000px;margin:0 auto}然后将max-width的值“1000px”改为“1100px”，如下所示：
.nm-container{max-width:1100px;margin:0 auto}为什么是1030，不是1110呢，因为歌单封面图的左右两侧各有10px的边距，为了抵消这20px的边距，得出：1110+20=1130。
②、修歌单标题的宽度
在page.min.css文件中找到以下代码：
.nm-songs-title{padding-bottom:5px;border-bottom:1px solid #ddd;max-width:1000px;margin:0 auto 15px}将max-width的值“1000px”改为“1100px”，如下所示：
.nm-songs-title{padding-bottom:5px;border-bottom:1px solid #ddd;max-width:1110px;margin:0 auto 15px}③、修改歌单列表宽度
在page.min.css文件中找到以下代码：
.nm-songs-list{position:relative}.album--nice-list,.nm-songs-list{max-width:1000px;margin:0 auto}将max-width的值“1000px”改为“1100px”，如下所示：
.nm-songs-list{position:relative}.album--nice-list,.nm-songs-list{max-width:1110px;margin:0 auto}这时候，整个插件页面的宽度就和主题的默认宽度就会保持一致了，当然，因为我的WP主题宽度是1110px，这个宽度要根据自己的主题宽度来做修改。
另外，有个更为快捷的修改方法，就是打开page.min.css文件，在代码编辑器中直接搜索“1000px”，然后然后全部替换为1100px”。
接着，再单独搜索 “.nm-copyright“，将max-width的值“1000px”改为“1030px”。
二、隐藏 Netease-Music 歌单里的页面标题
因为博客栏目里已经有标题，加上Netease-Music里的歌单标题不好看还占位置，着实显得特别累赘。
而且在手机上，这个页面标题占用了很大高度，显得页面看起来不太协调，所以觉得很有必要隐藏页面标题。可以在page.min.css文件中找到以下这段代码：
.nm-page-title{font-size:24px}然后替换为下面这段代码，即让该元素不可见：
.nm-page-title{display:none;}三、将歌单列表的背景设为透明
Netease-Music插件只有当你鼠标点击歌单封面时，才会展开歌曲列表，而歌曲列表是带有”#f0f0f0“的灰色背景的。如果你主题的页面背景颜色和这种颜色相近时，便可很好的融合在一起，反之则很别扭。
另外，当我把主题切换成深色模式的时候，这个”#f0f0f0“的灰色背景没有转换为深色，但是歌单列表的文字却转换为 “#ffffff“的白色了。这就会导致文字看不清楚。所以，这时候便可把它的背景透明度设为“0”。
在page.min.css文件中找到以下代码：
.nm-songs{background-color:#f0f0f0;padding:20px 0}然后替换成以下代码，即将背景设为#fff白色，而且透明度为0。
.nm-songs{background-color:rgba(255,255,255,0.0);padding:20px 0}四、修改封面标题的字体颜色
封面的字体标题的默认颜色换深色模式时，不会跟随深色模式而进行变化。但是它的背景却跟随深色模式由白色变成了黑色，这就会导致深色模式下字体不可见，所以还是得该，我们可以将字体颜色修改成了“#808080”灰色。
在page.min.css文件中找到以下代码：
.music-info{color:#333;display:block;font-size:12px;line-height:1.5;overflow:hidden;padding:3px 0;text-align:center;text-overflow:ellipsis;white-space:nowrap}将color值由“#333”改为“#808080”，如下所示：
.music-info{color:#808080;display:block;font-size:12px;line-height:1.5;overflow:hidden;padding:3px 0;text-align:center;text-overflow:ellipsis;white-space:nowrap}到这Netease-Music插件的样式就全部修改完毕，怎么样，修改完成之后看起来是不是和主题比较搭。可能光说会难以想象，具体效果可以看本站右上角顶部导航栏的 { Music }页面。
文章来源于：行动派博客！
