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

avatar 2019年1月4日16:30:35 28 5,537

前言

今天起来突然想到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调用的源码

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

总结

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

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

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

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

目前评论:28   其中:访客  20   博主  8

    • avatar ty 1

      支持

      • avatar 少羽 Admin

        测试邮件

        • avatar 少羽 Admin

          测试…

          • avatar 天赐 0

            评论一下

            • avatar 血吸虫 0

              发v吃吃吃蹭饭吃

              • avatar 污雲 1

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

                  • avatar 少羽. Admin

                    @污雲 哈哈哈,有效期友情链接吗?

                    • avatar 少羽. Admin

                      @污雲 兴趣 这输入法有毒…

                    • avatar 看着还不错 0

                      看着还不错

                      • avatar 支持 0

                        支持

                        • avatar amoureux 0

                          测试

                          • avatar 我爱代挂 0

                            我就看看不说话

                            • avatar 莲夜 0

                              前排支持一下 :mrgreen:

                              • avatar 大漠苍狼 0

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

                                • avatar djdjd 0

                                  那些年你的呢

                                  • avatar QSY 0

                                    挺好用的

                                    • avatar 随风 0

                                      很棒

                                      • avatar yuban 0

                                        很支持一下,仰望大佬

                                        • avatar TIPN 0

                                          测试

                                          • avatar 七月 1

                                            最美好主动租户

                                            • avatar 人生彼岸 1

                                              正需要,感谢分享

                                              • avatar i很快就会 1

                                                支持一下

                                                • avatar 青海分享 0

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

                                                  • avatar 东哥 0

                                                    支持