Przypięty motyw audio WordPress

Opublikowane ponownie przez Plato

Obserwuje: 0

Obawiam się, że muszę zacząć od całej historii, ponieważ podróż jest tutaj celem, a nie tematem.

Jakiś czas temu napisał do mnie pewien facet, opisując swoją sytuację. Jego firma ma kilka witryn WordPress dla radia publicznego, z których wiele to w zasadzie miejsca na podcasty. Jest jedna specyficzna funkcjonalność, która jego zdaniem będzie idealna dla nich wszystkich: posiadanie „przypiętego” odtwarzacza audio. Tak jakbyś mógł odtworzyć podcast, a następnie kontynuować poruszanie się po witrynie bez zatrzymywania podcastu.

Jest to dość trudne do wykonania w WordPressie, ponieważ WordPress ładuje całą stronę jak każda inna zwykła witryna internetowa, nie robiąc nic specjalnego z obsługą linków ani manipulacją historią. Po ponownym załadowaniu strony dźwięk na stronie przestaje być odtwarzany. Tak właśnie działa sieć.

Jak więc zrobić to na stronie WordPress? Cóż, możesz zrobić z niej bezgłową witrynę WordPress i przebudować cały interfejs jako aplikację jednostronicową. Wydaje mi się to zabawne, ale wahałbym się przed wykonaniem tego telefonu właśnie dla tego pierwszej rzecz.

Co jeszcze możesz zrobić? Możesz znaleźć sposób, aby strona nigdy się nie ładowała ponownie. Pamiętam, że to robiłem mała statyczna witryna 10 lat temu, ale to nie była w pełni rozwinięta witryna WordPress i nawet nie zawracałem sobie wtedy głowy aktualizacją adresu URL.

A co by było, gdybyś to zrobił…

Przechwytuj kliknięcia linków wewnętrznych
Ajax pobrał treść z tego adresu URL
Zastąpiłem treść strony nową treścią

Zrobię to szybko w jQuery:

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

Nie jest to dalekie od dosłownej funkcjonalności. Chciałbyś obejrzeć a popstate wydarzenie aby poradzić sobie z przyciskiem Wstecz, ale to tylko kilka dodatkowych linii.

W tym hipotetycznym świecie witrynę zaprojektowałbyś w następujący sposób:

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

Więc to wszystko <main> treść zostaje zamieniona, adres URL się zmienia, ale Twój <audio> gracz zostaje sam i może dalej grać w spokoju. Napisałbyś więcej JavaScriptu, aby dać ludziom możliwość aktualizowania odtwarzanego podcastu i tym podobnych.

Okazuje się jednak, że jest tu o czym więcej myśleć. Czy zostaną uruchomione jakieś skrypty wbudowane w treść? A co z aktualizacją <title> zbyt? Jest wystarczająco dużo problemów związanych z krawędziami, którymi prawdopodobnie będziesz się denerwować.

Chciałem się tym pobawić, więc stworzyłem motyw WordPress i sięgnąłem po niego Turbo zamiast pisać coś odręcznie. Turbo (nowa wersja Turbolinks) jest przeznaczona właśnie do tego. To biblioteka JavaScript, którą upuszczasz na stronę (bez procesu kompilacji, bez konfiguracji) i po prostu działa. Przechwytuje kliknięcia linków wewnętrznych, kliknięcia Ajax w przypadku nowej zawartości itp. Ma jednak tę interesującą funkcję, która polega na tym, że jeśli umieścisz data-turbo-permanent atrybut na elemencie HTML, utrwali go podczas ponownego ładowania. Więc ja zrobiłem to dla odtwarzacza audio tutaj.

Oto rzecz.

Po prostu nie mam czasu, żeby porządnie dokończyć ten projekt. Zabawa była świetna, ale moje zainteresowanie nią osłabło. Więc na razie zostawię to w spokoju:

It prawie działa, minus jeden rażący błąd polegający na tym, że dźwięk przestaje być odtwarzany przy pierwszej nawigacji, a potem działa. Jestem pewien, że da się to naprawić, ale po prostu nie mam zbyt wiele doświadczenia w tej grze. Myślę, że po prostu się wycofam i zostawię ten kod komuś, kto może go odebrać, jeśli będzie dla niego przydatny.

Kolejną ważną rzeczą jest to, że Turbo pochodzi z Basecamp, a Basecamp tak raczej implodował ostatnio sprawiło, że korzystanie z ich oprogramowania nie było zbyt przyjemne. Zaostrza fakt, że Sam Stephenson napisał 75% Turbo i powiedział, że nie będzie go dotykał (ani innych powiązanych projektów), chyba że oprogramowanie zostanie przeniesione na własne podłoże. Turbo było już w niepewnym miejscu, ponieważ wydawało się buggy w porównaniu do Turbolinks i teraz jest włączony początku. grząska ziemia.

Źródło: https://css-tricks.com/pinned-audio-wordpress-theme/

Znak czasu: 18 maja 2021 r.