Angepinntes Audio-WordPress-Theme

Neuauflage von Plato

Verfolger: 0

Ich fürchte, ich muss mit einer ganzen Hintergrundgeschichte beginnen, denn hier geht es um die Reise und nicht so sehr um das Thema.

Vor einiger Zeit schrieb mir ein Typ, in dem er eine Situation schilderte, in der er sich befand. Sein Unternehmen verfügt über eine Reihe von WordPress-Seiten für öffentlich-rechtliche Radiosender, von denen viele im Grunde genommen Podcasts enthalten. Es gibt eine bestimmte Funktionalität, die seiner Meinung nach für sie alle ideal wäre: einen „angehefteten“ Audioplayer. Als könnten Sie einen Podcast abspielen und dann weiter auf der Website navigieren, ohne dass der Podcast angehalten wird.

Dies ist in WordPress etwas schwierig zu bewerkstelligen, da WordPress wie jede andere reguläre Website das Neuladen ganzer Seiten durchführt und keine besonderen Maßnahmen bei der Linkverarbeitung oder Verlaufsmanipulation durchführt. Wenn eine Seite neu geladen wird, wird die Audiowiedergabe auf der Seite gestoppt. So funktioniert das Web.

Wie würden Sie es also auf einer WordPress-Site hinbekommen? Nun, Sie könnten daraus eine Headless-WordPress-Site machen und das gesamte Frontend als Single-Page-App neu erstellen. Klingt lustig für mich, aber ich würde zögern, diesen Anruf zu tätigen nur hierfür dank One Ding.

Was könnten Sie sonst noch tun? Sie könnten eine Möglichkeit finden, dafür zu sorgen, dass die Seite nie neu geladen wird. Ich erinnere mich, dass ich das gemacht habe eine kleine statische Seite vor 10 Jahren, aber das war keine vollständige WordPress-Site und ich habe mir damals nicht einmal die Mühe gemacht, die URL zu aktualisieren.

Was wäre, wenn Sie dies tun würden ...

Interne Linkklicks abfangen
Den Inhalt dieser URL per Ajax erstellt
Der Inhalt der Seite wurde durch diesen neuen Inhalt ersetzt

Ich mache das schnell für Sie in jQuery:

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

Das ist nicht weit davon entfernt, im wahrsten Sinne des Wortes funktional zu sein. Darauf sollten Sie achten a popstate Event Ich muss mich mit der Zurück-Taste befassen, aber das sind nur noch ein paar Zeilen.

In dieser hypothetischen Welt würden Sie die Website wie folgt gestalten:

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

Also das alles <main> Der Inhalt wird ausgetauscht, die URL ändert sich, aber Ihr <audio> Der Spieler wird in Ruhe gelassen, um in Ruhe weiterspielen zu können. Sie würden mehr JavaScript schreiben, um den Leuten die Möglichkeit zu geben, zu aktualisieren, welcher Podcast abgespielt wird usw.

Es stellt sich jedoch heraus, dass es hier noch mehr zu bedenken gibt. Werden Inline-Skripte für den Inhalt ausgeführt? Wie wäre es mit der Aktualisierung? <title> zu? Es gibt genug Kantenprobleme, die Sie wahrscheinlich ärgern werden, wenn Sie damit umgehen.

Ich wollte mit diesem Zeug experimentieren, also habe ich ein WordPress-Theme zusammengestellt und danach gegriffen anstatt etwas von Hand zu schreiben. Turbo (die neue Version von Turbolinks) ist genau dafür konzipiert. Es handelt sich um eine JavaScript-Bibliothek, die Sie auf der Seite ablegen (kein Build-Prozess, keine Konfiguration) und die einfach funktioniert. Es fängt interne Linkklicks, Ajax-Klicks für neue Inhalte usw. ab. Aber es hat diese interessante Funktion, wenn Sie eine einfügen data-turbo-permanent Wenn Sie ein Attribut für ein HTML-Element hinzufügen, bleibt es während des erneuten Ladens bestehen. Also ich Habe das hier für den Audioplayer gemacht.

Hier ist das Ding.

Ich habe einfach keine Zeit, dieses Projekt richtig abzuschließen. Es hat Spaß gemacht, ein Stück zu spielen, aber mein Interesse daran ist irgendwie nachgelassen. Deshalb lasse ich es erst einmal in Ruhe:

It fast Funktioniert, abgesehen von einem eklatanten Fehler, dass die Audiowiedergabe bei der ersten Navigation stoppt und danach wieder funktioniert. Ich bin mir sicher, dass es reparierbar ist, aber ich habe einfach nicht viel Skin in diesem Spiel. Ich denke, ich verabschiede mich einfach und lasse diesen Code herumliegen, damit jemand ihn mitnehmen kann, wenn er für ihn nützlich ist.

Eine weitere Sache, die hier eine Rolle spielt, ist, dass Turbo von Basecamp stammt, und Basecamp hat es getan eher implodiert In letzter Zeit habe ich festgestellt, dass es sich nicht gut anfühlt, ihre Software zu verwenden. Erschwerend kommt hinzu, dass Sam Stephenson schrieb 75 % von Turbo und hat gesagt, dass er daran (oder andere verwandte Projekte) nichts ändern wird, es sei denn, die Software wird auf ein eigenes Fundament verschoben. Turbo befand sich, wie es schien, bereits in einer wackeligen Lage Buggy im Vergleich zu Turbolinks, und jetzt ist es eingeschaltet sehr knorriger Boden.

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

Zeitstempel: 18. Mai 2021