热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

html5显示多个cue,WordPress添加超酷html5音乐播放器Cue

文件引用、加载下载之后解压可得cue-html5musicplayer文件夹,打开它你会看到functions.cue.php和cue文件夹两个个东东。1、将func

文件引用、加载

下载之后解压可得cue-html5musicplayer文件夹,

打开它 你会看到functions.cue.php 和 cue文件夹 两个个东东。

1、将functions.cue.php里面的代码复制到你主题的functions.php里面,或者在functions.php中使用include ("functions.cue.php");引用;

2、将cue文件夹复制到主题根目录下

添加歌曲

完成以上1、2步就算成功99%了。剩下的就是新建专辑-添加歌曲链接和名称

a45010f69f5995390abefe24d3f7cae4.png

最后一步,在WP后台-外观-小工具上可以看到Playlist小工具,将Playlist添加到你的侧栏,填写标题和选择专辑-保存。如此一来,播放器就会在网站显示了,见下图。

1168ae052932dfa8fc92d5d16758f0ed.png

当然,若你不想放在小工具,可以使用 来进行任意位置的调用,其中$id表示专辑id。

为什么播放器不显示或无效?

按上面的步骤添加之后如果网站没有显示播放器可能有以下几种原因:

1、你的主题没有加载jquery库,考虑到99%的主题都会加载jquery库,所以我就把插件中的相关代码精简掉了。如果没有加载jquery库 请自行添加。

2、添加小工具时没有选择音乐专辑。新建专辑之后在侧栏小工具添加时不要忘了选择刚才你新建的专辑名称-然后保存,否则播放器也会不显示。

3、网站加载慢。由于该播放器的js被强制放在了footer.php最后加载,所以如果前面你的网站没有加载完毕(比如;gravatar头像没有加载出来)那么就会影响播放器的加载。

4、在Chromium浏览器(非Chrome)、Mxnitro等类似内核的浏览器下只显示灰色一块无法使用时,请把mediaelement-and-player.min.js单独拿出来在cue.min.js前加载。使用 wp_enqueue_script( 'media', '/wp-includes/js/mediaelement/mediaelement-and-player.min.js' , array(), '', true); 来实现,因为上面的文件js把两者合并在了一起,如果你不介意可以不理会。



推荐阅读
  • 在HTML5应用中,Accordion(手风琴,又称抽屉)效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果,通过层次结构优化信息展示和页面布局,提升用户体验。这些效果不仅增强了视觉效果,还提高了内容的可访问性和互动性。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
  • C++ 开发实战:实用技巧与经验分享
    C++ 开发实战:实用技巧与经验分享 ... [详细]
  • Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析 ... [详细]
  • 本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用,本文提供了实用的代码示例和最佳实践,帮助开发者解决跨域请求中的常见问题。 ... [详细]
  • 在使用 jQuery 的 `html()` 方法时,我发现了一个奇怪的现象:该方法无法完整地插入指定的字符串内容。具体来说,当尝试插入较长或包含特殊字符的字符串时,部分内容可能会被截断或丢失。这一问题可能与 jQuery 对字符串的处理方式有关,建议在实际应用中进行充分测试以确保数据完整性。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
author-avatar
nw3344_575
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有