WordPress添加独立音乐页面

梦飞扬现在的博客就添加了这个页面,大家可以点击“在线音乐”(https://www.dreamfy.com/music)来试试我的页面效果,如果你感觉还不错,就继续看教程,感觉不好看什么的,就……算了吧,呵呵!以防万一我删除了这个页面,就看下图把~

wordpress_baidu_music

实现原理:利用 iframe 套用现在比较流行的音乐应用,如酷狗电台,百度随心听,豆瓣电台,酷我音乐等。我现在用的是百度随心听,音乐从各个方面感觉都很不错。

新建页面,切换到文本形式,复制下面代码到文本编辑器里,然后在点回可视化编辑器,在点发布。

<?php
/*
template name: music
*/
get_header();
?>
<iframe src="http://fm.baidu.com" scrolling="no" frameborder="0" height="550px" id="mainFrame" width="100%" onload='IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");'></iframe>
<?php get_footer(); ?>

WordPress添加独立音乐页面代码说明

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

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

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

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

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

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

展开评论