• 欢迎访问I2C网站,这里有编程信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏I2C吧

WordPress如何在文章和侧栏添加音乐播放器

Wordpress插件 I2C编辑 623次浏览 1个评论

I2C技术博客温馨提示:
本文只是一些基础知识,我在学习过程中看见许多人有需要,所以将学习过程中的一些东西整理出来,供大家参考(大牛请绕道)。在这里你能够了解到网易云音乐1,WP-Player2插件两个工具的使用。
1. 在wordpress文章中插入音乐播放器。
2. 在wordpress侧边栏插入音乐播放器。


Part1:网易云音乐部分

Step1.1:首先打开网易云音乐页面,搜索/查找你需要放到网站上的歌曲或者歌单,如图1所示:

Wordpress如何在文章和侧栏添加音乐播放器

图1

Step1.2:在专辑封面下有一个超链接“生成外链播放器”,进入后如图2:

Wordpress如何在文章和侧栏添加音乐播放器

图2

Step1.3:这里有两种类型的插件,iframe(html5)和flash的,推荐使用iframe插件,点击复制代码后,进入wordpress后台。

Wordpress如何在文章和侧栏添加音乐播放器

图3

Step1.4:在文章和侧边栏插入代码。

Step1.4.1:编辑需要插入音乐的文章,切换到文本选项卡,粘贴刚刚复制的代码:

Wordpress如何在文章和侧栏添加音乐播放器

图4

播放器默认的是居左,由于I2C站长是个强迫症,所以播放器怎么能不居中?!只需要将复制的代码放入‘div’标签中,即以下两行代码中:

<div align="center">
复制的代码
</div>

并且,播放器的长高都是可以调节的,我这里令width=360,各位可以自行调节,具体效果如图5所示。
Wordpress如何在文章和侧栏添加音乐播放器

图5

Step1.4.2在侧边栏插入播放器,首先进入仪表盘,找到:外观小工具文本,如图6:

Wordpress如何在文章和侧栏添加音乐播放器

图6

添加到侧边栏,将复制的代码粘贴入内容中,标题可不填(其实填了会影响美观,可自行尝试),并根据自己的侧边栏宽度调节width的值以最好适应,效果如图7所示。
Wordpress如何在文章和侧栏添加音乐播放器

图7

网易云音乐部分到此结束。
演示网站:微美摘


Part2:WP-Player部分

Step2.1首先安装WP-Player插件,具体方法参见其官网教程。

Step2.2在文章或侧边栏插入播放器

Step2.2.1在文章中插入播放器只需要在文章中适当位置插入以下代码即可:

[player autoplay=”1″]

Step2.2.2在侧边栏插入播放器,同样是在仪表盘中找到外观>小工具>文本,添加到侧边栏,在内容用粘贴以下代码:

<!--wp-player start-->

<div class="wp-player" data-wp-player="wp-player" data-source="xiami" data-autoplay="1" data-type="collect" data-xiami="38826707" data-title="" data-author="" data-address="" data-thumb="http://webjyh.com/wp-content/plugins/wp-player/images/default.png|" data-lyric="open">

<div class="wp-player-box"><div class="wp-player-thumb">

<img src="http://webjyh.com/wp-content/plugins/wp-player/images/default.png" width="90" height="90" alt="" />

<div class="wp-player-playing">

<span>

</span>

</div>

</div>

<div class="wp-player-panel">

<div class="wp-player-title">

</div>

<div class="wp-player-author">

</div>

<div class="wp-player-progress">

<div class="wp-player-seek-bar">

<div class="wp-player-play-bar">

<span class="wp-player-play-current">

</span>

</div>

</div>

</div>

<div class="wp-player-controls-holder">

<div class="wp-player-time">

</div>

<div class="wp-player-controls">

<a href="javascript:;" class="wp-player-previous" title="上一首"></a>

<a href="javascript:;" class="wp-player-play" title="播放"></a>

<a href="javascript:;" class="wp-player-stop" title="暂停"></a>

<a href="javascript:;" class="wp-player-next" title="下一首"></a>

</div>

<div class="wp-player-lyrics-btn" title="歌词">

</div>

<div class="wp-player-list-btn" title="歌单">

</div>

</div>

</div>

</div>

<div class="wp-player-main">

<div class="wp-player-list">

<ul></ul>

</div>

<div class="wp-player-lyrics">

<ul></ul>

</div>

</div>

</div>

<!--wp-player end-->

几点说明:

data-xiami=”38826707″为虾米ID,通过更改此ID定制你想要的歌曲。
data-autoplay=”1″表示自动播放,data-autoplay=”0″表示不自动播放。
data-thumb为默认缩略图,可按需自行更改。
侧边栏具体效果如图8:
Wordpress如何在文章和侧栏添加音乐播放器

图8

好了,本文到这就结束了,有问题大家多讨论,共同进步。


参考文献:
[1] http://music.163.com/
[2] http://webjyh.com/wp-player/


I2C , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress如何在文章和侧栏添加音乐播放器
喜欢 (18)or分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 正好需要,谢谢。
    微美摘2015-11-12 05:31 回复