Закріплена аудіотема WordPress

Перевидано Платоном

читають: 0

Боюся, що мені доведеться почати це з цілої передісторії, оскільки суть тут у подорожі, а не стільки в темі.

Нещодавно один хлопець написав мені, описуючи ситуацію, у якій він опинився. Його компанія має купу сайтів WordPress для громадського радіо, багато з яких, по суті, є домом для подкастів. Є одна конкретна функція, яка, на його думку, була б ідеальною для них усіх: мати «закріплений» аудіопрогравач. Так само, як ви можете відтворити подкаст, а потім продовжити навігацію сайтом, не припиняючи цей подкаст.

Це дещо складно виконати в WordPress, оскільки WordPress виконує повне перезавантаження сторінок, як і будь-який інший звичайний веб-сайт, не роблячи нічого особливого з обробкою посилань чи маніпулюванням історією. Коли сторінка перезавантажується, будь-який звук на сторінці припиняється. Саме так працює Інтернет.

Отже, як би ви це здійснили на сайті WordPress? Що ж, ви можете зробити це безголовим сайтом WordPress і перебудувати весь інтерфейс як односторінковий додаток. Мені це звучить смішно, але я б вагався, щоб зробити цей дзвінок просто для цього один річ

Що ще можна зробити? Ви можете знайти спосіб, щоб сторінка ніколи не перезавантажувалася. Я пам'ятаю, як робив це маленький статичний сайт 10 років тому, але це не був повноцінний сайт WordPress, і я навіть не потрудився оновити URL-адресу тоді.

Що, якби ти зробив це...

Перехоплення кліків внутрішніх посилань
Ajax отримав вміст із цієї URL-адреси
Замінив вміст на сторінці цим новим вмістом

Я швидко зроблю це в jQuery:

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

Це не далеко від того, щоб бути буквально функціональним. Ви б хотіли спостерігати за a popstate подія щоб розібратися з кнопкою «Назад», але це лише кілька рядків.

У цьому гіпотетичному світі ви б розмістили сайт так:

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

Так все <main> вміст замінюється, URL-адреса змінюється, але ваш <audio> гравець залишається сам, щоб продовжувати грати в спокої. Ви б написали більше JavaScript, щоб дати людям можливість оновлювати, який подкаст відтворюється тощо.

Виявляється, тут є ще над чим подумати. Чи запускатимуться будь-які вбудовані сценарії вмісту? Що щодо оновлення <title> теж? Існує достатньо проблем, пов’язаних із краєм, ви, ймовірно, будете дратуватися, маючи справу з цим.

Мені хотілося пограти з цим, тож я об’єднав тему WordPress і потягнувся до неї Turbo замість того, щоб написати щось від руки. Turbo (нова версія Turbolinks) створена саме для цього. Це бібліотека JavaScript, яку ви скидаєте на сторінку (без процесу створення, без конфігурації), і вона просто працює. Він перехоплює клацання внутрішніх посилань, Ajax для нового вмісту тощо. Але він має таку цікаву функцію, коли ви розмістите data-turbo-permanent елемента HTML, він зберігатиме його під час перезавантаження. Так я зробив це для аудіопрогравача тут.

Ось у чому справа.

У мене просто немає часу завершити цей проект належним чином. Було весело грати п’єсу, але мій інтерес до неї трохи згас. Тож поки що залишу це:

It майже працює, мінус одна яскрава помилка: звук припиняє відтворюватися під час першої навігації, а потім працює. Я впевнений, що це можна виправити, але я просто не маю особливого скіна в цій грі. Я думаю, що я просто вклонюся і залишу цей код, щоб хтось підібрав його, якщо він стане в нагоді.

Інша річ тут полягає в тому, що Turbo походить від Basecamp, а Basecamp має скоріше вибухнув Останнім часом використання їхнього програмного забезпечення стало неприємним. Посилюється тим, що Сем Стівенсон написав 75% Turbo і сказав, що не торкатиметься цього (або інших пов’язаних проектів), якщо програмне забезпечення не буде перенесено на власну основу. Турбо вже було в хиткому місці, оскільки здавалося баггі порівняно з Turbolinks, і зараз увімкнено дуже вузлуватий грунт.

Джерело: https://css-tricks.com/pinned-audio-wordpress-theme/

Часова мітка: Травень 18, 2021