我恐怕不得不从整个背景故事开始，因为这里的重点在于这个过程，而不是主题本身。
不久前，一位朋友写信给我，概述了他遇到的情况。他的公司为公共广播电台创建了许多 WordPress 网站，其中许多网站本质上是播客的平台。他认为，其中一项特定的功能对所有网站来说都是理想的：拥有一个“固定”的音频播放器。就像您可以播放一个播客，然后继续浏览网站而不会停止该播客的播放。
在 WordPress 中实现这一点有些棘手，因为 WordPress 与任何其他没有对链接处理或历史记录操作进行特殊处理的普通网站一样，执行完整的页面重新加载。当页面重新加载时，页面上的任何音频都会停止播放。这只是网络的工作方式。
那么如何在 WordPress 网站上实现它呢？好吧，您可以将其制作成一个无头 WordPress 网站，并将整个前端重建为单页应用程序。对我来说听起来很有趣，但我会犹豫是否仅仅为了这一件事而做出这个决定。
您还可以做什么？您可以找到一种方法使页面永远不会重新加载。我记得在10 年前的一个小静态网站上做过这个，但那不是一个完整的 WordPress 网站，而且我当时甚至没有费心更新 URL。
如果您这样做会怎么样……
- 拦截内部链接点击
- 使用 Ajax 从该 URL 获取内容
- 用新内容替换页面上的内容
我将很快用 jQuery 为您实现这一点
$("a").on("click", () => {
const url = $(this).attr("href");
$.get(url + " main", (data) => {
$("main").html(data);
history.pushState({}, "", url);
});
});这离真正实现功能不远了。您需要监视popstate 事件以处理后退按钮，但这只需要几行代码。
在这个假设的世界中，您将像这样布局网站
<html>
<!-- ... -->
<body>
<main></main>
<audio src="" controls ...></audio>
</body>
</html>因此，所有<main>内容都会被交换出来，URL 会发生变化，但您的<audio>播放器将保持不变，以便继续播放。您将编写更多 JavaScript 代码，以便用户可以更新正在播放的播客等。
不过，事实证明这里还有更多需要考虑的事情。内容中的任何内联脚本是否会运行？更新<title>也是否需要考虑？边缘情况足够多，您可能会厌倦处理它。
我想玩一下这些东西，所以我拼凑了一个 WordPress 主题，并选择了Turbo 而不是手动编写代码。Turbo（Turbolinks 的新版本）就是为此而设计的。它是一个您可以在页面上放置的 JavaScript 库（无需构建过程，无需配置），它就可以工作。它会拦截内部链接点击，使用 Ajax 获取新内容等。但它有一个有趣的特性，如果您在 HTML 元素上放置一个data-turbo-permanent属性，它将在该重新加载过程中保留该元素。所以我在这里对音频播放器做了这件事。
不过，事情是这样的。
我目前没有时间正确完成这个项目。玩起来很有趣，但我的兴趣已经减退了。所以我暂时先放一放。
它几乎可以工作，但缺少一个明显的错误，即音频在第一次导航时停止播放，然后在之后才工作。我相信它是可以修复的，但我对这个项目投入不多。我想我只会退出，并将这段代码保留下来，以便其他人如果觉得有用的话可以继续使用。
这里另一个需要注意的是，Turbo 来自 Basecamp，而 Basecamp 最近出现了问题，这使得使用他们的软件感觉不太好。更糟糕的是，Sam Stephenson编写了 Turbo 的 75%，并表示除非该软件迁移到自己的基金会，否则他不会再碰它（或其他相关项目）。Turbo 已经处于一个不稳定的状态，因为它似乎存在很多错误，与 Turbolinks 相比，现在正处于非常不稳定的境地。
我用 GitHub 上的 pjax 做了完全一样的事情（现在也看起来被放弃了）。
您可以指定要替换页面的区域，而不是替换所有内容。
我认为主要问题是导航到与他们着陆页面具有不同脚本的页面。
我们在 changelog.com 上使用 Turbolinks（旧版本，而不是新的 Turbo 版本）实现了这一点。我写了一篇关于我们做出这个决定的理由的文章
https://changelog.com/posts/why-we-chose-turbolinks
并且我们网站的源代码是开源的，因此您可以了解我们如何将所有内容整合在一起
https://github.com/thechangelog/changelog.com