固定音頻WordPress主題

I’m afraid I have to start this with a whole backstory, as the journey here is the point, not so much the theme.

A fella wrote to me a while back outlining a situation he was in. His company has a bunch of WordPress sites for public radio, many of which are essentially homes for podcasts. There is one specific bit of functionality he thought would be ideal for them all: to have a “pinned” audio player. Like you could play a podcast, then continue navigating around the site without that podcast stopping.

This is somewhat tricky to pull off in WordPress, because WordPress does full page reloads like any other regular website not doing anything special with link handling or history manipulation. When a page reloads, any audio on the page stops playing. That’s just how the web works.

So how would you pull it off on a WordPress site? Well, you could make it a headless WordPress site and rebuild the entire front-end as a Single Page App. Sounds fun to me, but I’d be hesitant to make that call just for this one thing.

What else could you do? You could find a way to make the page never reload. I remember doing this on a little static site 10 years ago, but that wasn’t a full blown WordPress site and I didn’t even bother updating the URL back then.

What if you did this…

1. Intercept internal link clicks
2. Ajax’d the content from that URL
3. Replaced the content on the page with that new content

I’ll do this in jQuery quick for ya:

$("a").on("click", () => {
  const url = $(this).attr("href");
  $.get(url + " main", (data) => {
    $("main").html(data);
    history.pushState({}, "", url);
  });
});

That’s not far off from being literally functional. You’d wanna watch for a popstate event to deal with the back button, but that’s only a few more lines.

In this hypothetical world, you’d lay out the site like:

<!-- ... -->


   <main></main>
   <audio src="" controls ...></audio>

So all that

content gets swapped out, the URL changes, but your

Turns out there is more to think about here though. Are any inline scripts on the content going to run? What about updating the

以上是固定音頻WordPress主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！