Kiinnitetty ääni WordPress-teema

Aikaleima: 18. toukokuuta 2021 3
Lähdesolmu: 1853521

Pelkään, että minun on aloitettava tämä koko taustatarinalla, koska matka täällä on pointti, ei niinkään teema.

Eräs kaveri kirjoitti minulle jokin aika sitten kertoakseen tilanteesta, jossa hän oli. Hänen yrityksellään on joukko WordPress-sivustoja julkiselle radiolle, joista monet ovat pohjimmiltaan podcasteja. On yksi tietty toiminnallisuus, jonka hän ajatteli olevan ihanteellinen heille kaikille: "kiinnitetty" äänisoitin. Kuten voisit toistaa podcastin ja jatkaa sitten navigointia sivustolla ilman, että podcast pysähtyy.

Tämä on hieman hankala toteuttaa WordPressissä, koska WordPress lataa koko sivun uudelleen kuten mikä tahansa muu tavallinen verkkosivusto, joka ei tee mitään erityistä linkkien käsittelyssä tai historian käsittelyssä. Kun sivu latautuu uudelleen, sivulla olevan äänen toisto lakkaa. Juuri näin netti toimii.

Joten miten onnistuisit WordPress-sivustolla? No, voit tehdä siitä päättömän WordPress-sivuston ja rakentaa koko käyttöliittymän uudelleen yhden sivun sovellukseksi. Kuulostaa hauskalta, mutta en epäröi soittaa sitä vain Tämän yksi asia.

Mitä muuta voisit tehdä? Voit löytää tavan, jolla sivu ei koskaan lataudu uudelleen. Muistan tehneeni tämän pieni staattinen sivusto 10 vuotta sitten, mutta se ei ollut täysi WordPress-sivusto, enkä edes vaivautunut päivittämään URL-osoitetta silloin.

Mitä jos tekisit tämän…

  1. Sieppaa sisäisen linkin napsautukset
  2. Ajax lisäsi sisällön kyseisestä URL-osoitteesta
  3. Sivun sisältö on korvattu uudella sisällöllä

Teen tämän sinulle nopeasti jQueryssa:

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

Se ei ole kaukana siitä, että se olisi kirjaimellisesti toimiva. Haluaisitko tarkkailla a popstate tapahtumaa varten käsitellä takaisin-painiketta, mutta se on vain muutama rivi lisää.

Tässä hypoteettisessa maailmassa asettaisit sivuston seuraavasti:

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

Joten kaikki se <main> sisältö vaihdetaan, URL-osoite muuttuu, mutta sinun <audio> pelaaja jätetään yksin jatkamaan pelaamista rauhassa. Kirjoittaisit enemmän JavaScriptiä, jotta ihmiset voivat päivittää podcastin soivan ja niin edelleen.

Tässä on kuitenkin muutakin ajateltavaa. Ajetaanko sisällön sisäisiä skriptejä? Entä päivittäminen <title> liian? On olemassa tarpeeksi reunahuoleja, joita todennäköisesti ärsyyntyy käsittelemään sitä.

Halusin leikkiä näillä aineilla, joten heitin yhteen WordPress-teeman ja tartuin siihen turbo sen sijaan, että kirjoittaisit jotain käsin. Turbo (Turbolinkien uusi versio) on suunniteltu juuri tätä varten. Se on JavaScript-kirjasto, jonka pudotat sivulle (ei rakennusprosessia, ei konfiguraatiota) ja se vain toimii. Se sieppaa sisäisen linkin napsautukset, Ajaxin uutta sisältöä varten jne. Mutta siinä on tämä mielenkiintoinen ominaisuus, johon jos laitat data-turbo-permanent attribuuttia HTML-elementissä, se säilyttää sen koko uudelleenlatauksen ajan. Niin minä tein sen tässä soittimessa.

Tässä kuitenkin juttu.

Minulla ei vain ole aikaa saada tätä projektia kunnolla päätökseen. Näytelmä oli hauskaa, mutta kiinnostukseni sitä kohtaan on hiipunut. Joten jätän sen nyt rauhaan:

It melkein toimii, miinus yksi räikeä virhe, että ääni lakkaa toistamasta ensimmäisellä navigaatiolla ja toimii sen jälkeen. Olen varma, että se on korjattavissa, mutta minulla ei vain ole paljon ihoa tässä pelissä. Taidan vain kumartaa ja jättää tämän koodin jonkun poimia varten, jos siitä on hyötyä.

Toinen asia tässä pelissä on, että Turbo on Basecampista, ja Basecampilla on melko räjähtänyt äskettäin heidän ohjelmistonsa käyttäminen ei tuntunut hyvältä. Sitä pahentaa se, että Sam Stephenson kirjoitti 75% Turbosta ja on sanonut, ettei hän koske siihen (tai muihin vastaaviin projekteihin), ellei ohjelmistoa siirretä omalle perustalleen. Turbo oli jo hämärässä paikassa, koska se näytti viallisista verrattuna Turbolinkkeihin, ja se on nyt käytössä hyvin pörröinen maaperä.

Lähde: https://css-tricks.com/pinned-audio-wordpress-theme/

Aikaleima:

Lisää aiheesta CSS-temppuja