Festet lyd WordPress-tema

Tidsstempel: 18. mai 2021 3:14
Kilde node: 1853521

Jeg er redd jeg må starte dette med en hel bakhistorie, siden reisen hit er poenget, ikke så mye temaet.

En fyr skrev til meg for en stund tilbake og beskrev en situasjon han var i. Selskapet hans har en haug med WordPress-nettsteder for offentlig radio, hvorav mange i hovedsak er hjem for podcaster. Det er en spesifikk funksjonalitet han mente ville være ideell for dem alle: å ha en "festet" lydspiller. Som om du kan spille av en podcast, og deretter fortsette å navigere rundt på siden uten at podcasten stopper.

Dette er litt vanskelig å få til i WordPress, fordi WordPress laster inn helside på nytt som alle andre vanlige nettsider og ikke gjør noe spesielt med koblingshåndtering eller historiemanipulering. Når en side lastes inn på nytt, slutter all lyd på siden å spille. Det er bare slik nettet fungerer.

Så hvordan ville du fått det til på et WordPress-nettsted? Vel, du kan gjøre det til et hodeløst WordPress-nettsted og gjenoppbygge hele front-end som en enkeltsideapp. Høres gøy ut for meg, men jeg vil være nølende med å ringe bare for dette en ting.

Hva annet kan du gjøre? Du kan finne en måte å få siden til å aldri lastes inn på nytt. Jeg husker at jeg gjorde dette et lite statisk nettsted for 10 år siden, men det var ikke en fullverdig WordPress-side, og jeg gadd ikke engang å oppdatere URL-en den gang.

Hva om du gjorde dette...

  1. Avskjær interne lenkeklikk
  2. Ajax hentet innholdet fra den nettadressen
  3. Erstattet innholdet på siden med det nye innholdet

Jeg vil gjøre dette i jQuery raskt for deg:

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

Det er ikke langt unna å være bokstavelig talt funksjonelt. du vil se etter a popstate hendelse for å håndtere tilbakeknappen, men det er bare noen få linjer til.

I denne hypotetiske verdenen vil du legge ut nettstedet slik:

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

Så alt det der <main> innhold blir byttet ut, URL-en endres, men din <audio> spilleren blir stående alene for å fortsette å spille i fred. Du ville skrive mer JavaScript for å gi folk en måte å oppdatere hvilken podcast som spilles og slikt.

Det viser seg at det er mer å tenke på her. Kommer noen innebygde skript på innholdet til å kjøre? Hva med å oppdatere <title> også? Det er nok kantbekymringer du sannsynligvis vil bli irritert av å håndtere det.

Jeg ønsket å leke med disse tingene, så jeg slengte sammen et WordPress-tema og strakte meg etter Turbo i stedet for å skrive noe for hånd. Turbo (den nye versjonen av Turbolinks) er designet nettopp for dette. Det er et JavaScript-bibliotek du slipper på siden (ingen byggeprosess, ingen konfigurasjon), og det fungerer bare. Den fanger opp interne lenkeklikk, Ajax's for nytt innhold osv. Men den har denne interessante funksjonen der hvis du legger en data-turbo-permanent attributtet på et HTML-element, vil det vedvare i den gjenopplastingen. Så jeg gjorde det for lydspilleren her.

Men her er saken.

Jeg har bare ikke tid til å fullføre dette prosjektet ordentlig. Det var morsomt å ha et skuespill, men interessen min for det har avtatt. Så jeg lar det være foreløpig:

It nesten fungerer, minus en skarp feil at lyden slutter å spille på den første navigasjonen, så fungerer etter det. Jeg er sikker på at det kan fikses, men jeg har bare ikke mye hud i dette spillet. Jeg regner med at jeg bare vil bøye meg og la denne koden ligge slik at noen kan hente den hvis den er nyttig for dem.

En annen ting som spiller inn her er at Turbo er fra Basecamp, og det har Basecamp heller implodert nylig gjør det ikke føles bra å bruke programvaren deres. Forverret av det faktum at Sam Stephenson skrev 75% av Turbo og har sagt at han ikke kommer til å berøre det (eller andre relaterte prosjekter) med mindre programvaren flyttes til sitt eget grunnlag. Turbo var allerede på et skjelven sted siden det så ut til buggy sammenlignet med Turbolinks, og er nå på veldig knudrete bakken.

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

Tidstempel:

Mer fra CSS triks