Tema WordPress Audio yang Disematkan

Diterbitkan Ulang Oleh Plato

Followers: 0

Saya khawatir saya harus memulai ini dengan keseluruhan cerita latar, karena perjalanan di sini adalah intinya, bukan temanya.

Seorang teman menulis kepada saya beberapa waktu lalu dengan menguraikan situasi yang dia hadapi. Perusahaannya memiliki banyak situs WordPress untuk radio publik, banyak di antaranya pada dasarnya adalah rumah untuk podcast. Ada satu fungsi tertentu yang menurutnya akan ideal untuk mereka semua: memiliki pemutar audio yang "disematkan". Seperti Anda dapat memutar podcast, lalu melanjutkan navigasi di sekitar situs tanpa menghentikan podcast itu.

Ini agak sulit dilakukan di WordPress, karena WordPress memuat ulang halaman penuh seperti situs web biasa lainnya yang tidak melakukan sesuatu yang khusus dengan penanganan tautan atau manipulasi riwayat. Saat halaman dimuat ulang, audio apa pun di halaman tersebut berhenti diputar. Begitulah cara kerja web.

Jadi, bagaimana Anda melakukannya di situs WordPress? Nah, Anda bisa menjadikannya situs WordPress tanpa kepala dan membangun kembali seluruh front-end sebagai Aplikasi Halaman Tunggal. Kedengarannya menyenangkan bagi saya, tetapi saya ragu-ragu untuk menelepon hanya untuk ini satu benda.

Apa lagi yang bisa kamu lakukan? Anda dapat menemukan cara untuk membuat halaman tidak pernah dimuat ulang. Saya ingat melakukan ini situs statis kecil 10 tahun yang lalu, tapi itu bukan situs WordPress yang lengkap dan saya bahkan tidak repot-repot memperbarui URL saat itu.

Bagaimana jika Anda melakukan ini…

Hentikan klik tautan internal
Ajax konten dari URL itu
Mengganti konten pada halaman dengan konten baru tersebut

Saya akan melakukan ini di jQuery dengan cepat untuk Anda:

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

Itu tidak jauh dari fungsinya secara harfiah. Anda ingin menonton a popstate peristiwa berurusan dengan tombol kembali, tapi itu hanya beberapa baris lagi.

Di dunia hipotetis ini, Anda akan menata situs seperti:

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

Jadi semua itu <main> konten ditukar, URL berubah, tetapi file <audio> pemain dibiarkan sendiri untuk terus bermain dengan damai. Anda akan menulis lebih banyak JavaScript untuk memberi orang cara memperbarui podcast apa yang sedang diputar dan semacamnya.

Ternyata masih banyak yang harus dipikirkan di sini. Apakah ada skrip sebaris pada konten yang akan dijalankan? Bagaimana dengan memperbarui <title> terlalu? Ada cukup banyak kekhawatiran yang mungkin membuat Anda kesal menghadapinya.

Saya ingin bermain-main dengan hal ini, jadi saya menyusun tema WordPress dan meraihnya Turbo alih-alih menulis sesuatu dengan tangan. Turbo (versi baru Turbolinks) dirancang hanya untuk ini. Ini adalah pustaka JavaScript yang Anda letakkan di halaman (tanpa proses pembuatan, tanpa konfigurasi) dan berfungsi begitu saja. Ini mencegat klik tautan internal, Ajax untuk konten baru, dll. Tetapi memiliki fitur menarik ini di mana jika Anda meletakkan data-turbo-permanent atribut pada elemen HTML, itu akan mempertahankannya selama pemuatan ulang itu. Jadi saya melakukan itu untuk pemutar audio di sini.

Inilah masalahnya.

Saya hanya tidak punya waktu untuk menyelesaikan proyek ini dengan benar. Sangat menyenangkan untuk bermain, tapi ketertarikan saya pada itu sudah agak surut. Jadi saya akan membiarkannya sendiri untuk saat ini:

It hampir berfungsi, minus satu bug mencolok sehingga audio berhenti diputar pada navigasi pertama, lalu berfungsi setelah itu. Saya yakin itu bisa diperbaiki, tapi saya tidak punya banyak kulit dalam game ini. Saya pikir saya hanya akan mundur dan meninggalkan kode ini untuk diambil seseorang jika itu berguna bagi mereka.

Hal lain yang berperan di sini adalah Turbo dari Basecamp, dan Basecamp memilikinya agak meledak baru-baru ini membuatnya tidak merasa senang menggunakan perangkat lunak mereka. Diperburuk dengan fakta bahwa Sam Stephenson menulis 75% dari Turbo dan mengatakan dia tidak akan menyentuhnya (atau proyek terkait lainnya) kecuali perangkat lunak dipindahkan ke yayasannya sendiri. Turbo sudah berada di tempat yang goyah sejak kelihatannya kereta dibandingkan dengan Turbolinks, dan sekarang aktif sangat tanah keriput.

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

Stempel Waktu: 18 Mei 2021