Fäst WordPress-tema för ljud

Tidsstämpel: 18 maj 2021 3:14
Källnod: 1853521

Jag är rädd att jag måste börja det här med en hel bakgrundshistoria, eftersom resan hit är poängen, inte så mycket temat.

En kille skrev till mig för ett tag sedan och beskrev en situation han befann sig i. Hans företag har ett gäng WordPress-sajter för offentlig radio, av vilka många i huvudsak är hem för podcaster. Det finns en specifik funktionalitet som han trodde skulle vara idealisk för dem alla: att ha en "nålad" ljudspelare. Som att du kunde spela en podcast och sedan fortsätta navigera runt på webbplatsen utan att podden slutar.

Detta är lite knepigt att genomföra i WordPress, eftersom WordPress laddar om helsidor som vilken annan vanlig webbplats som helst utan att göra något speciellt med länkhantering eller historikmanipulation. När en sida laddas om, slutar allt ljud på sidan att spelas upp. Det är bara så webben fungerar.

Så hur skulle du göra det på en WordPress-webbplats? Tja, du kan göra det till en huvudlös WordPress-webbplats och bygga om hela front-end som en Single Page App. Låter kul för mig, men jag skulle vara tveksam till att ringa det samtalet bara för detta ett sak.

Vad mer kan du göra? Du kan hitta ett sätt att göra att sidan aldrig laddas om. Jag minns att jag gjorde det här en liten statisk sida för 10 år sedan, men det var inte en komplett WordPress-sida och jag brydde mig inte ens om att uppdatera webbadressen då.

Tänk om du gjorde det här...

  1. Fånga interna länkklick
  2. Ajax tog innehållet från den webbadressen
  3. Ersatte innehållet på sidan med det nya innehållet

Jag gör det här i jQuery snabbt för dig:

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

Det är inte långt ifrån att vara bokstavligen funktionellt. Du skulle vilja titta efter a popstate händelse att ta itu med bakåtknappen, men det är bara några rader till.

I denna hypotetiska värld skulle du lägga upp sajten så här:

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

Alltså allt det där <main> innehåll byts ut, webbadressen ändras, men din <audio> spelaren lämnas ensam för att fortsätta spela i fred. Du skulle skriva mer JavaScript för att ge folk ett sätt att uppdatera vilken podcast som spelas och så.

Det visar sig dock att det finns mer att tänka på här. Kommer några inline-skript på innehållet att köras? Vad sägs om att uppdatera <title> för? Det finns tillräckligt med kantbekymmer som du förmodligen kommer att bli irriterad på att ta itu med.

Jag ville leka med det här, så jag slängde ihop ett WordPress-tema och sträckte mig efter Turbo istället för att skriva något för hand. Turbo (den nya versionen av Turbolinks) är designad just för detta. Det är ett JavaScript-bibliotek du släpper på sidan (ingen byggprocess, ingen konfiguration) och det bara fungerar. Den fångar upp interna länkklick, Ajax för nytt innehåll etc. Men den har den här intressanta funktionen där om du lägger en data-turbo-permanent attribut på ett HTML-element, kommer det att bevara det under den omladdningen. Så jag gjorde det för ljudspelaren här.

Men här är saken.

Jag har helt enkelt inte tid att avsluta det här projektet ordentligt. Det var kul att ha en pjäs, men mitt intresse för den har liksom tappats. Så jag låter det vara ifred nu:

It nästan fungerar, minus en påfallande bugg att ljudet slutar spela vid den första navigeringen och sedan fungerar efter det. Jag är säker på att det går att fixa, men jag har helt enkelt inte mycket hud i det här spelet. Jag tror att jag bara ska buga och lämna den här koden för någon att hämta om den är användbar för dem.

En annan sak som spelar här är att Turbo är från Basecamp, och det har Basecamp snarare imploderade nyligen vilket gör att det inte känns bra att använda deras programvara. Förvärras av att Sam Stephenson skrev 75% av Turbo och har sagt att han inte kommer att röra det (eller andra relaterade projekt) om inte programvaran flyttas till sin egen grund. Turbo var redan på en skakig plats sedan det verkade buggy jämfört med Turbolinks, och nu är på mycket knotig mald.

Källa: https://css-tricks.com/pinned-audio-wordpress-theme/

Tidsstämpel:

Mer från CSS-tricks