javascript - 如何在单个wordpress页面上嵌入HTML5/CSS + js音乐播放器？

Question

我有一个 html 5、css 和 javascript 音频播放器，我正在尝试将其添加到我的 WordPress 网站上的一个页面中。

我尝试将 html 粘贴到页面的文本编辑器中，同时在子主题文件夹中安装播放器的 JS 和 CSS 文件夹，但这不起作用。

我尝试将播放器样式的 CSS 放置在我的子主题 CSS 文件中，但这不起作用。我还尝试从 header.php 文件链接到样式表和 js 脚本，但这对我不起作用。

我的第一个想法是，因为 html 按其应有的方式显示，所以 css 和 JS 文件没有被调用。那么我只需要弄清楚wordpress如何创建页面的路径结构就可以了？但我知道 WordPress 使用数据库做了一些事情来显示页面？

我看到了一些关于使用的文档，我认为它是 php 或 JS 函数来调用脚本或其他东西，但我对这些语言的了解还不够，无法理解它。

我仍在与我的开发人员合作，但他比我早了 7 个小时并且正在 sleep 。我现在只想将播放器的硬编码版本和几首歌曲放在我的网站上，以便我可以进行一些测试/看看它的外观。

我希望这个问题符合 SO 要求。我尝试自己搜索，我知道答案就在那里，只是我还不够了解。努力抢占先机

Answer 1

子主题文件夹的路径应为“/wp-content/themes/主题名称/”。您可以在 header 中使用它来从您将文件放置在子主题文件夹中的任何位置调用这些文件。

要硬编码 HTML，将其粘贴到 WordPress 页面编辑器中应该可以正常工作，除非有另一个 JS 调用或发生一些奇怪的 iFraming。如果是这种情况，您可以简单地创建一个页面模板 ( https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use )并将代码粘贴到那里。您可能只想从主题中复制现有页面模板，取出内部循环，然后将其替换为视频代码。

将链接添加到“header.php”文件将被认为是不好的做法。您需要在子主题中创建一个“functions.php”文件，并从那里调用 JS/CSS。您还可以在 WordPress 代码库中找到此内容(它们实际上给出了您可以复制/粘贴和更改文件名的示例)。