WordPress添加独立音乐/音悦台页面

少羽.
少羽.
少羽.
1844
文章
92
评论
2019年1月4日16:30:35 38 15.4K 1155字阅读3分51秒

前言

今天起来突然想到WordPress都添加了心情说说页面为什么不能搞个音乐页面,于是就是一番研究,在百度、谷歌也找了一番均没有结果,于是自己动手开始一番骚操作。

正文

最后的样子大概是这个样子,我直接放预览图了。

PC端效果图

WordPress添加独立音乐/音悦台页面

WordPress添加独立音乐/音悦台页面

手机端效果图

WordPress添加独立音乐/音悦台页面

WordPress添加独立音乐/音悦台页面

介绍

总体来说自适应效果还是挺好的,就是pc端引入太多有点看,你们可以更换一下应该就会好很多。

操作

当然有很多人问了怎么操作呢!别急我这就来给你们说O(∩_∩)O哈哈~

首先是创建一个页面,和之前的说说页面差不多,我直接放代码了。

<?php /*
    Template Name: 随心音悦台
    author: 少羽
    url: https://www.lurbk.com
    */
get_header(); 
?> 
<iframe src="https://www.lurbk.com/musict/" scrolling="no" frameborder="2" height="1002px" id="mainFrame" width="100%" onload='IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");'></iframe> 
<?php get_footer(); ?>

这可能又会有很多人问,代码是什么意思。哈哈,我现在给你们一个一个解释一下意思

前6行是为这个页面命名为 music 并添加主题页头文件。

<iframe src="https://www.lurbk.com/musict/” 指定IFRAME调用的文件,网址代表的就是酷狗电台的网页版,如果你喜欢其他音乐应用,你可以换成自己喜欢的,上面代码是百度随心听的,延伸说下,它还可以调用图片等(html,htm,gif,jepg,jpg,png,txt,*.*)

scrolling=”no” 是否有滚动条(yes代表有,no代表没有)

frameborder=”0″ 设置边框是不否为3维(0代表否,1代表是)

height=”550px” id=”mainFrame” width=”100%” onload=’IFrameReSize(“mainFrame”);IFrameReSizeWidth(“mainFrame”) 这代表把这音乐应用高度设置为550像素,不是代表页面高度啊,这个高度需要自己调试,宽度是根据主题自适应的。

<?php get_footer(); ?> 是把主题页脚加上去。

如果你还是看不懂那我就没办法了

最后我分享一下我的IFRAME调用的源码


此处为隐藏的内容!
发表评论并刷新,方可查看

总结

如果还有什么不懂可以评论出来

本文为原创内容,转载请标明版权,谢谢合作。

 

少羽.
  • 本文由 发表于 2019年1月4日16:30:35
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
禁用 WordPress 5.5 图片延迟加载功能 WordPress

禁用 WordPress 5.5 图片延迟加载功能

WordPress 5.5除了不断优化修改区块编辑器之外,还增加了几个新功能,其中的图片延迟加载功能,经本人测试,除了在火狐下有效果,在Chromium内核的浏览器中无效,难道是开发人员也和我一样只用...
WordPress纯代码实现独立相册功能 WordPress

WordPress纯代码实现独立相册功能

其实,这篇文章很早准备发了,一直拖,拖,拖硬生生拖到了现在,今天整合闲着,就更新一下博客吧! 想到这个文章,我忘记发了,今天就补上 hhh 正文 思路是前段时间写模板琢磨出来的,模板写废了,也不准备写...
广告也精彩
匿名

发表评论

匿名网友 填写信息

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

评论:38   其中:访客  38   博主  0
    • ty ty 1

      支持

      • 少羽 少羽 6

        测试邮件

        • 少羽 少羽 6

          测试…

          • 天赐 天赐 0

            评论一下

            • 血吸虫 血吸虫 0

              发v吃吃吃蹭饭吃

              • 污雲 污雲 1

                emmm,和我一样,之前一直测试邮件服务

                • 看着还不错 看着还不错 0

                  看着还不错

                  • 支持 支持 0

                    支持

                    • amoureux amoureux 0

                      测试

                      • 我爱代挂 我爱代挂 0

                        我就看看不说话

                        • 莲夜 莲夜 0

                          前排支持一下 :mrgreen:

                          • 大漠苍狼 大漠苍狼 0

                            支持一下,好东西必须收藏

                            • djdjd djdjd 0

                              那些年你的呢

                              • QSY QSY 0

                                挺好用的

                                • 随风 随风 0

                                  很棒

                                  • yuban yuban 0

                                    很支持一下,仰望大佬

                                    • TIPN TIPN 0

                                      测试

                                      • 七月 七月 2

                                        最美好主动租户

                                        • 人生彼岸 人生彼岸 1

                                          正需要,感谢分享

                                          • i很快就会 i很快就会 1

                                            支持一下

                                            • 青海分享 青海分享 0

                                              试下吧 …………………….

                                              • 东哥 东哥 0

                                                支持

                                                • 627219 627219 0

                                                  看一下怎么弄

                                                  • 撒大声地 撒大声地 0

                                                    支持

                                                    • 瓶盖 瓶盖 0

                                                      感谢分享

                                                      • chenmo chenmo 2

                                                        看看。。

                                                        • 新秀 新秀 0

                                                          来学习了

                                                          • 被水淹死的鱼ankey 被水淹死的鱼ankey 0

                                                            看看

                                                            • 胡歌 胡歌 0

                                                              还不错

                                                              • 额额 额额 0

                                                                问问

                                                                • 似最初 似最初 1

                                                                  感谢分享内容

                                                                  • 梁生 梁生 0

                                                                    看看