vieu4.5主题添加High一下功能，其他wordpress主题按理通用。 附相关源代码下载

转载自：https://blog.ccswust.org/

High一下功能在两年前知道君用过，蛮不错的，但是后来在换主题的过程中丢了。
昨天帮一个朋友安装大前端的时候，他说他想加一个很炫酷的功能，我就想到了这个。今天也就再拿出来给大家讲一下怎么玩儿。
有兴趣的站长朋友也可以为自己的网站添加这一功能，初级站长可以直接使用我们提供的资源即可。

对于有能力改进CSS样式表和JavaScript的站长朋友，可以自行修改对应的代码来满足自己的需求。

本文分为完整的操作指南和VIEU4.5主题快捷使用版，如果你懒得修改文件内容就直接跳转到结尾看VIEU版。

PS：知道君的oss全面启用HTTPS，懒人版也支持HTTPS版网站！

进阶版

下载相关源代码：（打开并右键另存到本地即可）

https://aliyun.ccswust.org/1/high/bgm_2.mp3

https://aliyun.ccswust.org/1/high/high.css

https://aliyun.ccswust.org/1/high/high.js

文件功能说明：

1、bgm_2.mp3是播放的背景音乐，可以自定义任何音频格式内容，这个音频文件在high.js中引入；

2、high.css是本功能的核心样式表，这个文件在high.js样式表中引入；

3、high.js是本功能的核心脚本，该文件需要在网站中引入；

进阶版版操作指南

（HTTP版理论上支持任何类型的站点包括wordpress不限于wordpress）

1、首先逐条打开上述四个URL地址将对应的文件另存为到本地进行保存；

2、将bgm_2.mp3、high.css上传至你的服务器或者是其他地址上进行调用；

3、以本教程为例，上述三个文件的上传地址为https://aliyun.ccswust.org/1/high/目录；

4、打开high.js文件转到227行和237行（分别是音频调用地址和CSS调用地址）；

5、将227行的地址修改为你自己MP3存储的地址，例如夏末浅笑调用的地址是：

https://aliyun.ccswust.org/1/high/bgm_2.mp3

6、将237行的地址修改为你自己high.css存储的地址，例如夏末浅笑调用的地址是：

https://aliyun.ccswust.org/1/high/high.css

7、在网站头部引入high.js文件后上传至网站服务器：

 type="text/javascript" src="https://aliyun.ccswust.org/1/high/high.js">

8、在网站任意位置引入以下内容作为触发功能的按钮：

<button class="btn btn-link" type="button">High一下吧

9、至此你的网站已经成功添加了High功能，如果无法使用的话请先检查每一个四个调用的文件是否可以正常打开，任何一个无法加载都会导致功能无法使用，其他问题请在评论中留言。

VIEU主题操作指南

如果你懒得动手改文件的话可以使用这个方法，所有资源直接从夏末浅笑的服务器调用。

直接在网站头部引入high.js上传至网站服务器：

 type="text/javascript" src="https://aliyun.ccswust.org/1/high/high.js">

VIEU主题直接在外观–主题设置–自定义代码–自定义JS代码引用代码这份代码

然后在网站任意位置添加触发按钮即可：

<button class="btn btn-link" type="button">High一下吧

知道君放在侧栏小工具的

注意事项：

1、本方法支持HTTP、HTTPS版的网站，知道君已经开通了HTTPS访问；

2、若遇到下载高峰时，会影响该功能的反应时间，例如点击按钮后几秒才会播放；

3、一般来说上述资源的链接不会失效，但不排除哪一天关闭了，那么你的功能就无法使用了。

添加好的效果