美化WordPress主题里的Netease-Music网易云音乐插件

Ourboke
Ourboke
Ourboke
486
文章
130
评论
2021年5月26日00:07:18
评论
52

对于使用WordPress主题的朋友多多少少都会折腾主题,除了让它提高打开速度之外,还会让它看起来更为美观。Netease-Music网易云音乐插件是我至今为止,用的时间最长的一个插件。因为它可以将我在网易云上所收藏喜欢的歌单,直接调用到WordPress平台上进行播放。

Netease-Music音乐插件

美化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 }页面。

文章来源于:行动派博客!

茫茫人海能够相遇便是缘分,但请记住;尊重每一份辛勤的汗水,所以转载请注明出处,谢谢!
Ourboke
  • 本文由 发表于 2021年5月26日00:07:18
  • 转载请务必保留本文链接:https://www.ourboke.com/2538.html
WordPress如何安装网易云音乐Netease Music WordPress

WordPress如何安装网易云音乐Netease Music

虽然目前网易云音乐不死不活的,但让自己的博客安装一个个性音乐还是挺不错的。网易云Netease Music已开发很多年,貌似目前还在维护中。 如果需要注册网易云音乐账号并将ID添加到插件设置中,如果不...
如何为WordPress主题添加文章字数和阅读时间 WordPress

如何为WordPress主题添加文章字数和阅读时间

折腾的路上永不止,很奇怪对于一篇文章内的字数和阅读时间有啥用呢,这我也不知道,也不敢问。不过有朋友说人家的主题里都有,博主你知道怎么加一个吗?说实话我是不知道的,不过在鸟哥这里看到了这个教程,所以今天...
如何修改WordPress用户ID WordPress

如何修改WordPress用户ID

在第一次用WordPress的时候因为不清楚,所以在登录名称选择的时候比较随意,从而选择了默认登录名称,时候才发现不能够修改。 如何修改WordPress用户ID 要想修改最好的办法就是重新创建一个新...
WordPress网站域名实现完美更换操作教程 WordPress

WordPress网站域名实现完美更换操作教程

网站域名变更是屡见不鲜的事情,每个人都会因为某些事情对之前的所作进行推翻,每个程序的更换域名操作方式也不一样。我们就拿WordPress网站域名更换来举个例子,这也是众多WordPress用户经常遇到...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: