I’m afraid I’ve to start out this with a complete backstory, because the journey right here is the purpose, not a lot the theme.
A fella wrote to me some time again outlining a scenario he was in. His firm has a bunch of WordPress websites for public radio, lots of that are basically properties for podcasts. There’s one particular little bit of performance he thought could be supreme for all of them: to have a “pinned” audio participant. Like you can play a podcast, then proceed navigating across the web site with out that podcast stopping.
That is considerably tough to tug off in WordPress, as a result of WordPress does full web page reloads like some other common web site not doing something particular with hyperlink dealing with or historical past manipulation. When a web page reloads, any audio on the web page stops enjoying. That’s simply how the online works.
So how would you pull it off on a WordPress web site? Effectively, you can make it a headless WordPress web site and rebuild the whole front-end as a Single Web page App. Sounds enjoyable to me, however I’d be hesitant to make that decision simply for this one factor.
What else may you do? You can discover a method to make the web page by no means reload. I keep in mind doing this on somewhat static web site 10 years in the past, however that wasn’t a full blown WordPress web site and I didn’t even trouble updating the URL again then.
What for those who did this…
Intercept inner hyperlink clicksAjax’d the content material from that URLReplaced the content material on the web page with that new content material
I’ll do that in jQuery fast for ya:
$(“a”).on(“click on”, () => {
const url = $(this).attr(“href”);
$.get(url + ” major”, (knowledge) => {
$(“major”).html(knowledge);
historical past.pushState({}, “”, url);
});
});
That’s not far off from being actually useful. You’d wanna look ahead to a popstate occasion to cope with the again button, however that’s only some extra strains.
On this hypothetical world, you’d lay out the location like:
<html>
<!– … –>
<physique>
<major></major>
<audio src=”” controls …></audio>
</physique>
</html>
So all that <major> content material will get swapped out, the URL modifications, however your <audio> participant is left alone to maintain enjoying in peace. You’d write extra JavaScript to provide individuals a method to replace what podcast is enjoying and such.
Seems there may be extra to consider right here although. Are any inline scripts on the content material going to run? What about updating the <title> too? There are sufficient edge issues you most likely will get irritated coping with it.
I wished to have a play with these items, so I tossed collectively a WordPress theme and reached for Turbo as a substitute of hand-writing one thing. Turbo (the brand new model of Turbolinks) is designed only for this. It’s a JavaScript library you drop on the web page (no construct course of, no config) and it simply works. It intercepts inner hyperlink clicks, Ajax’s for brand new content material, and so on. Nevertheless it has this attention-grabbing function the place for those who put a data-turbo-permanent attribute on an HTML component, it’ll persist it throughout that reload. So I did that for the audio participant right here.
Right here’s the factor although.
I simply don’t have time to complete this undertaking correctly. It was enjoyable to have a play, however my curiosity in it has kinda petered out. So I’ll go away it alone for now:
It nearly works, minus one obtrusive bug that the audio stops enjoying on the primary navigation, then works after that. I’m positive it’s fixable, however I simply don’t have a lot pores and skin on this recreation. I determine I’ll simply bow out and go away this code round for somebody to select up if it’s helpful for them.
One other factor at play right here is that Turbo is from Basecamp, and Basecamp has somewhat imploded lately making it not really feel nice to be utilizing their software program. Exacerbated by the truth that Sam Stephenson wrote 75% of Turbo and has mentioned he gained’t be touching it (or different associated initiatives) until the software program is moved to its personal basis. Turbo was already in a shaky place because it appeared buggy in comparison with Turbolinks, and now’s on very gnarly floor.
The submit Pinned Audio WordPress Theme appeared first on CSS-Methods.
You possibly can assist CSS-Methods by being an MVP Supporter.
0
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!