Vastgezet audio WordPress-thema

Heruitgegeven door Plato

volgers: 0

Ik ben bang dat ik dit moet beginnen met een heel achtergrondverhaal, aangezien de reis hierheen het punt is, en niet zozeer het thema.

Een kerel schreef me een tijdje geleden waarin hij een situatie schetste waarin hij zich bevond. Zijn bedrijf heeft een aantal WordPress-sites voor de openbare radio, waarvan er vele in wezen dienen als thuisbasis voor podcasts. Er is één specifiek stukje functionaliteit waarvan hij dacht dat het ideaal zou zijn voor allemaal: een “vastgezette” audiospeler. Alsof je een podcast kunt afspelen en vervolgens door de site kunt blijven navigeren zonder dat de podcast stopt.

Dit is enigszins lastig uit te voeren in WordPress, omdat WordPress de volledige pagina herlaadt zoals elke andere reguliere website en niets speciaals doet met het verwerken van links of het manipuleren van de geschiedenis. Wanneer een pagina opnieuw wordt geladen, stopt alle audio op de pagina met spelen. Dat is gewoon hoe het internet werkt.

Dus hoe zou je het doen op een WordPress-site? Nou, je zou er een headless WordPress-site van kunnen maken en de hele front-end opnieuw kunnen opbouwen als een Single Page App. Klinkt leuk, maar ik zou aarzelen om dat telefoontje te plegen voor slechts hiervoor een ding.

Wat zou je nog meer kunnen doen? U kunt een manier vinden om ervoor te zorgen dat de pagina nooit opnieuw wordt geladen. Ik weet nog dat ik dit deed een kleine statische site 10 jaar geleden, maar dat was geen volwaardige WordPress-site en ik nam toen niet eens de moeite om de URL bij te werken.

Wat als je dit zou doen...

Onderschep interne linkklikken
Ajax heeft de inhoud van die URL overgenomen
De inhoud op de pagina vervangen door die nieuwe inhoud

Ik zal dit snel voor je doen in jQuery:

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

Dat is niet ver verwijderd van letterlijk functioneel zijn. Je zou willen kijken a popstate gebeurtenis om met de terugknop om te gaan, maar dat zijn nog maar een paar regels.

In deze hypothetische wereld zou je de site als volgt indelen:

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

Dus dat allemaal <main> inhoud wordt uitgewisseld, de URL verandert, maar uw <audio> speler wordt met rust gelaten om in alle rust te blijven spelen. Je zou meer JavaScript schrijven om mensen een manier te geven om bij te werken welke podcast wordt afgespeeld en dergelijke.

Het blijkt dat er hier echter nog meer is om over na te denken. Worden er inline-scripts voor de inhoud uitgevoerd? Hoe zit het met het updaten van de <title> te? Er zijn genoeg randproblemen waar je waarschijnlijk geïrriteerd door zult raken.

Ik wilde hiermee spelen, dus gooide ik een WordPress-thema bij elkaar en pakte het Turbo in plaats van iets met de hand te schrijven. Turbo (de nieuwe versie van Turbolinks) is speciaal hiervoor ontworpen. Het is een JavaScript-bibliotheek die je op de pagina neerzet (geen bouwproces, geen configuratie) en het werkt gewoon. Het onderschept interne klikken op links, die van Ajax voor nieuwe inhoud, enz. Maar het heeft een interessante functie: als je een data-turbo-permanent attribuut op een HTML-element, zal het tijdens het herladen behouden blijven. Dus ik deed dat hier voor de audiospeler.

Maar hier gaat het om.

Ik heb gewoon geen tijd om dit project goed af te ronden. Het was leuk om een toneelstuk te spelen, maar mijn interesse ervoor is een beetje verdwenen. Ik laat het dus voorlopig met rust:

It bijna werkt, minus één flagrante bug dat de audio stopt met spelen bij de eerste navigatie en daarna weer werkt. Ik weet zeker dat het te repareren is, maar ik heb gewoon niet veel skin in dit spel. Ik denk dat ik me er maar bij neerleg en deze code achterlaat zodat iemand deze kan ophalen als het nuttig voor hem of haar is.

Een ander ding dat hier speelt, is dat Turbo van Basecamp komt, en Basecamp ook eerder geïmplodeerd onlangs waardoor het niet geweldig voelt om hun software te gebruiken. Verergerd door het feit dat Sam Stephenson schreef 75% van Turbo en heeft gezegd dat hij het (of andere gerelateerde projecten) niet zal aanraken tenzij de software naar een eigen stichting wordt verplaatst. Turbo stond al op een wankele plek, zo leek het buggy vergeleken met Turbolinks, en nu is het zover zeer knoestige grond.

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

Tijdstempel: 18 mei 2021