7b2主题改造之添加网易云歌单iframe播放器

释放双眼,带上耳机,听听看~!
倒腾了一个晚上,把7b2主题的右侧边栏添加了个网易云iframe播放器,浏览之余可以播放下音乐,美哉!

7b2主题

方法/步骤

此次用到functions-templates.phpstyle.cssmobile.css三个文件,functions-templates.php在主题seven/inc目录下,后两个文件在主题根目录

functions-templates.php

第482行div id=”go-top” class=”go-top” :style=”‘z-index:’+index”>下添加以下代码:

  1. <div id=“go-top” class=“go-top” :style=“‘z-index:’+index”>
  2.     <div class=“pos-r tool-button style-change”>
  3.         <button class=“text”><i class=“iconfont iconfont zrz-icon-font-gonggao”></i><span>Music</span></button>
  4.         <div class=“music”>
  5.         </div>
  6.     </div>

其中网易云的iframe代码需要自己去网易云获取,把iframe代码粘贴到div class=”music”>代码粘贴处/div>
PS:由于完整贴代码导致页面错乱故把:<去掉

style.css

文本末端添加以下样式:

  1. .tool-button .music {
  2.     displaynone;
  3. }
  4. .tool-button:hover .music {
  5.     displayblock;
  6.     positionabsolute;
  7.     rightright: 80%;
  8.     top: -490%;
  9. }

mobile.css

搜索@media screen and (max-width:670px){大概90行左右,在下面添加以下代码:

  1. .pos-r.tool-button.style-change {
  2.     displaynone;
  3. }

人已赞赏
WordPress教程

柒比贰主题启用后提示SWOOLEC Loader ext not installed

2019-2-18 20:39:07

WordPress教程

WordPress教程:WordPress引入阿里巴巴矢量图标库彩色图标

2019-4-4 20:31:15

3 条回复 A文章作者 M管理员
  1. 感觉好复杂的

  2. 大神腻害~我也在折腾7B2~

    • 加油!

有新消息 消息中心
搜索