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

@西城知道

知道君想做你的男闺蜜,和你聊聊情感、风月、人间事,以及生活的一点趣致...

前往微博
首页 » CMS教程 » 正文 » 阅读模式

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文件后上传至网站服务器:

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

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

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

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

VIEU主题操作指南

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

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

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

VIEU主题直接在外观–主题设置–自定义代码–自定义JS代码引用代码这份代码
vieu4.5主题添加High一下功能,其他wordpress主题按理通用。

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

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

知道君放在侧栏小工具的
vieu4.5主题添加High一下功能,其他wordpress主题按理通用。

注意事项:

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

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

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

添加好的效果

 

未经允许不得转载:作者:知道君, 转载或复制请以 超链接形式 并注明出处 夏末浅笑
原文地址:《vieu4.5主题添加High一下功能,其他wordpress主题按理通用。》 发布于2019-12-20

分享到:
赞(1) 喝一杯咖啡

评论 2

评论前必须登录!

  注册

  1. #2

    楼主,请教一下vieu主题的鼠标怎么去掉,还是喜欢默认的

    xuheng12个月前 (12-23)
  2. #1
    qq_avatar

    来看看~

    月色12个月前 (12-20)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

下载说明
评论下载是需要人工审核后才能下载的!!!建议QQ授权登录后再评论。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册