对于使用WordPress主题的朋友多多少少都会折腾主题,除了让它提高打开速度之外,还会让它看起来更为美观。Netease-Music网易云音乐插件是我至今为止,用的时间最长的一个插件。因为它可以将我在网易云上所收藏喜欢的歌单,直接调用到WordPress平台上进行播放。
![Netease-Music音乐插件](/wp-content/uploads/2021/05/2021051611190931.jpg)
美化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 }页面。
文章来源于:行动派博客!