Fastgjort lyd WordPress-tema

Tidsstempel: 18. maj 2021 kl. 3
Kildeknude: 1853521

Jeg er bange for, at jeg skal starte det her med en hel baggrundshistorie, da rejsen her er pointen, ikke så meget temaet.

En fyr skrev til mig for et stykke tid tilbage og beskrev en situation, han befandt sig i. Hans firma har en masse WordPress-websteder til offentlig radio, hvoraf mange hovedsageligt er hjem for podcasts. Der er en specifik funktionalitet, han mente ville være ideel for dem alle: at have en "fastgjort" lydafspiller. Ligesom du kunne afspille en podcast og derefter fortsætte med at navigere rundt på webstedet, uden at podcasten stopper.

Dette er noget vanskeligt at gennemføre i WordPress, fordi WordPress genindlæser hele sider som enhver anden almindelig hjemmeside, der ikke gør noget særligt med linkhåndtering eller historikmanipulation. Når en side genindlæses, stopper al lyd på siden med at spille. Sådan fungerer nettet bare.

Så hvordan ville du trække det ud på et WordPress-websted? Nå, du kunne gøre det til et hovedløst WordPress-websted og genopbygge hele frontend som en enkeltside-app. Det lyder sjovt for mig, men jeg ville være tøvende med at foretage det opkald lige for dette en ting.

Hvad kunne du ellers gøre? Du kunne finde en måde at få siden til aldrig at genindlæse. Jeg kan huske, at jeg gjorde det her en lille statisk side for 10 år siden, men det var ikke et komplet WordPress-sted, og jeg gad ikke engang opdatere URL'en dengang.

Hvad hvis du gjorde dette...

  1. Opsnappe interne linkklik
  2. Ajax'ede indholdet fra den URL
  3. Erstattet indholdet på siden med det nye indhold

Jeg vil gøre dette i jQuery hurtigt for dig:

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

Det er ikke langt fra at være bogstaveligt funktionelt. Du vil se efter a popstate begivenhed at håndtere tilbage-knappen, men det er kun et par linjer mere.

I denne hypotetiske verden ville du udforme webstedet som:

<html>
<!-- ... --> <body> <main></main> <audio src="" controls ...></audio>
</body>
</html>

Så alt det <main> indhold bliver byttet ud, URL'en ændres, men din <audio> spilleren efterlades alene for at blive ved med at spille i fred. Du ville skrive mere JavaScript for at give folk en måde at opdatere, hvilken podcast der afspilles og sådan.

Det viser sig dog, at der er mere at tænke på her. Er der inline-scripts på indholdet, der kører? Hvad med at opdatere <title> også? Der er nok kantbekymringer, du sandsynligvis vil blive irriteret over at håndtere det.

Jeg ville gerne lege med det her, så jeg smed et WordPress-tema sammen og nåede ud efter Turbo i stedet for at skrive noget i hånden. Turbo (den nye version af Turbolinks) er designet netop til dette. Det er et JavaScript-bibliotek, du slipper på siden (ingen byggeproces, ingen konfiguration), og det virker bare. Den opsnapper interne linkklik, Ajax'er for nyt indhold osv. Men den har denne interessante funktion, hvor hvis du sætter en data-turbo-permanent attribut på et HTML-element, vil det vedblive det på tværs af den genindlæsning. Så jeg gjorde det for lydafspilleren her.

Her er sagen dog.

Jeg har bare ikke tid til at afslutte dette projekt ordentligt. Det var sjovt at have et teaterstykke, men min interesse for det er forsvundet. Så jeg lader det ligge indtil videre:

It næsten virker, minus en iøjnefaldende fejl, at lyden stopper med at spille ved den første navigation, og derefter virker efter det. Jeg er sikker på, at det kan repareres, men jeg har bare ikke meget hud i dette spil. Jeg regner med, at jeg bare vil bøje mig og efterlade denne kode, så nogen kan hente den, hvis den er nyttig for dem.

En anden ting, der spiller ind her, er, at Turbo er fra Basecamp, og det har Basecamp temmelig imploderet for nylig, hvilket gør det ikke godt at bruge deres software. Forværret af det faktum, at Sam Stephenson skrev 75% af Turbo og har sagt, at han ikke vil røre ved det (eller andre relaterede projekter), medmindre softwaren flyttes til sit eget fundament. Turbo var allerede et rystende sted, siden det så ud til buggy sammenlignet med Turbolinks, og nu er tændt meget knudret jord.

Kilde: https://css-tricks.com/pinned-audio-wordpress-theme/

Tidsstempel:

Mere fra CSS-tricks