1. 首页
  2. css

CSS固定音频WordPress主题

恐怕我得从一个完整的背景故事开始,因为这里的旅程才是重点,与其说是主题,不如说是主题。
前段时间一个家伙给我写信,概述了他当时的处境。他的公司有一堆公共广播的WordPress网站,其中许多基本上是podcast的家。有一个特定的功能,他认为将是他们所有的理想:有一个\”固定\”的音频播放器。就像你可以播放一个播客,然后继续在网站上导航而不停止播客一样。
这在WordPress中有点棘手,因为WordPress像其他常规网站一样进行整版重新加载,没有任何特殊的链接处理或历史操作。重新加载页面时,页面上的所有音频都将停止播放。网络就是这样运作的。那你怎么才能在WordPress网站上成功呢?好吧,你可以把它变成一个无标题的WordPress站点,然后把整个前端重建成一个单页应用程序。听起来很有趣,但我会犹豫是否要打这个电话仅仅是为了这件事。你还能做什么?你可以找到一种方法让页面永远不会重新加载。我记得10年前在一个静态的小网站上做过这件事,但那不是一个成熟的WordPress网站,那时我甚至都懒得更新网址。
如果您这样做了怎么办…
1. 拦截内部链接点击
2. Ajax\”d来自该URL的内容
3. 将页面上的内容替换为新内容
我将在jQuery quick for ya中执行此操作:
$(\”a\”).on(\”click\”, = $(this).attr(\”href\”);$.get(url + \” main\”,>
That\”s not far off from being literally functional. You\”d wanna watch for a popstate事件来处理\”后退\”按钮,但这只剩下几行。
在这个假想的世界里,你会把网站布局成这样:

So all that 内容被交换出去,URL改变,但是你的播放器被留下来保持安静。你应该编写更多的JavaScript,让人们能够更新podcast正在播放的内容等等。
不过,这里还有更多值得思考的地方。内容上有内联脚本要运行吗?把也更新一下怎么样?有足够多的边缘问题,你可能会生气处理它。
我想玩一下这个东西,所以我把一个WordPress主题放在一起,用Turbo代替手写。Turbo(Turbolinks的新版本)就是为此而设计的。它是一个JavaScript库,你可以把它放在页面上(没有构建过程,没有配置),它可以正常工作。它拦截内部链接点击、新内容的Ajax等等,但是它有一个有趣的特性,如果你在HTML元素上加上一个data-turbo-permanent属性,它会在重载过程中保持它。所以我在这里做了音频播放器。但事情是这样的。我只是没有时间好好完成这个项目。演一出戏很有趣,但我对它的兴趣已经渐渐消失了。所以我现在就不谈了:实时演示

CSS固定音频WordPress主题 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%9b%ba%e5%ae%9a%e9%9f%b3%e9%a2%91wordpress%e4%b8%bb%e9%a2%98/