Тема WordPress с закрепленным аудио

Отметка времени: 18 мая 2021 г., 3:14
Исходный узел: 1853521

Боюсь, мне придется начать с целой предыстории, так как путешествие здесь — это смысл, а не столько тема.

Некоторое время назад мне написал один парень, описывающий ситуацию, в которой он оказался. У его компании есть несколько сайтов WordPress для общественного радио, многие из которых, по сути, являются домом для подкастов. Есть одна конкретная функция, которая, по его мнению, была бы идеальной для всех: иметь «закрепленный» аудиоплеер. Например, вы можете воспроизвести подкаст, а затем продолжить навигацию по сайту без остановки этого подкаста.

Это несколько сложно реализовать в WordPress, потому что WordPress выполняет полную перезагрузку страницы, как и любой другой обычный веб-сайт, не делая ничего особенного с обработкой ссылок или манипулированием историей. Когда страница перезагружается, любой звук на странице перестает воспроизводиться. Именно так работает сеть.

Итак, как бы вы справились с этим на сайте WordPress? Что ж, вы можете сделать его безголовым сайтом WordPress и перестроить весь интерфейс как одностраничное приложение. Звучит весело для меня, но я бы не решился позвонить всего для этого one вещь.

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

Что, если бы вы сделали это…

  1. Перехватывать клики по внутренним ссылкам
  2. Ajax передал контент с этого URL
  3. Заменил контент на странице этим новым контентом

Я сделаю это в 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% Турбо и сказал, что не будет касаться этого (или других связанных проектов), если программное обеспечение не будет перемещено в его собственный фонд. Турбо уже был в шатком месте, так как казалось багги по сравнению с Turbolinks, и сейчас очень корявая земля.

Источник: https://css-tricks.com/pinned-audio-wordpress-theme/

Отметка времени:

Больше от CSS хитрости