整合HTML5 WordPress音乐播放器和设置页面

整合HTML5 WordPress音乐播放器和设置页面

我将展示如何将 HTML 5 音乐播放器集成到 WordPress 中。之后,我们将添加一个设置页面(“主题选项”),以便您可以轻松自定义播放器!

这款音乐播放器终于登陆 WP 了!该设计最初是由 Orman Clark 创建的,之后来自 Codebase Hero 的 Saleem 创建了一个 jQuery 插件。

今天我将把这个插件集成到 WP 中。我想指出的是,我不是高级 WP 开发人员,我将使用的代码是从网络上的各种教程编译而来的。我只想与大家分享我是如何做到的。另外,我不会解释 Saleem 创建的 jQuery 插件代码,我可以帮助回答任何问题,但最好的办法是转到插件页面并浏览文档。您可以下载源文件并根据您的喜好进行自定义。好吧,让我们开火吧..

我们要做的事情

希望在本教程结束时,您将能够:

  • 将 HTML5 音乐播放器集成到 WP
  • 创建自定义帖子类型 + 自定义元框
  • 为您的音乐播放器创建设置页面

第 1 步下载源文件

首先下载所需的源文件,并将名为“blank”的文件夹复制到所有主题所在的 wp-content/themes/ 文件夹中。您将需要这些文件来完成本教程!

您的目录应如下所示:wp-content/themes/blank。

好的,从现在开始,我们将在您的“空白”主题文件夹中工作。

步骤 2 创建其他文件夹和文件

转到您下载的源文件文件夹并将播放列表文件夹复制到您的主题文件夹中。该文件夹包含 3 个文件夹 css、images 和 js。

这些文件夹包含 HTML5 音乐播放器附带的所有文件和图像,我们不会编辑它们。

让我们创建更多文件。在播放列表文件夹内创建 2 个文件 playlist.php 和 playlist-post-type.php。现在打开css文件夹并创建一个文件playlist-style.css。

查看下面的文件夹结构图像,确保您拥有所有正确的文件。

整合HTML5 WordPress音乐播放器和设置页面

第 3 步自定义帖子类型 - 播放列表

让我们创建名为播放列表的帖子类型。有关自定义帖子类型的更多信息,请参见 WP Codex。打开playlist-post-type.php文件。

登录后复制