Chủ đề WordPress âm thanh được ghim

Dấu thời gian: ngày 18 tháng 2021 năm 3 14:XNUMX chiều
Nút nguồn: 1853521

Tôi e rằng tôi phải bắt đầu điều này với toàn bộ câu chuyện cốt truyện, vì cuộc hành trình ở đây là điểm chính chứ không phải là chủ đề.

Cách đây không lâu, một anh chàng đã viết thư cho tôi để phác thảo tình huống mà anh ấy đang gặp phải. Công ty của anh ấy có một loạt trang web WordPress dành cho đài phát thanh công cộng, nhiều trang trong số đó về cơ bản là nơi lưu trữ podcast. Có một chức năng cụ thể mà anh ấy nghĩ sẽ lý tưởng cho tất cả họ: có một trình phát âm thanh “được ghim”. Giống như bạn có thể phát một podcast, sau đó tiếp tục điều hướng xung quanh trang web mà podcast đó không dừng lại.

Điều này hơi khó thực hiện trong WordPress, vì WordPress thực hiện tải lại toàn bộ trang giống như bất kỳ trang web thông thường nào khác và không thực hiện bất kỳ điều gì đặc biệt với việc xử lý liên kết hoặc thao tác lịch sử. Khi một trang tải lại, mọi âm thanh trên trang sẽ ngừng phát. Đó chỉ là cách hoạt động của web.

Vậy làm thế nào bạn có thể thực hiện nó trên một trang web WordPress? Chà, bạn có thể biến nó thành một trang web WordPress không có giao diện người dùng và xây dựng lại toàn bộ giao diện người dùng dưới dạng Ứng dụng một trang. Nghe có vẻ thú vị với tôi, nhưng tôi lại do dự khi thực hiện cuộc gọi đó chỉ cho điều này một Điều.

Bạn có thể làm điều gì khác? Bạn có thể tìm cách làm cho trang không bao giờ tải lại. Tôi nhớ đã làm điều này trên một trang web tĩnh 10 năm trước, nhưng đó không phải là một trang web WordPress hoàn chỉnh và lúc đó tôi thậm chí còn không buồn cập nhật URL.

Điều gì sẽ xảy ra nếu bạn làm điều này…

  1. Chặn các nhấp chuột vào liên kết nội bộ
  2. Ajax có nội dung từ URL đó
  3. Đã thay thế nội dung trên trang bằng nội dung mới đó

Tôi sẽ làm điều này nhanh chóng trong jQuery cho bạn:

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

Điều đó không còn xa nữa so với chức năng theo nghĩa đen. Bạn sẽ muốn xem a popstate sự kiện để xử lý nút quay lại, nhưng đó chỉ là một vài dòng nữa.

Trong thế giới giả định này, bạn sẽ bố trí trang web như sau:

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

Vì vậy tất cả những điều đó <main> nội dung bị hoán đổi, URL thay đổi, nhưng <audio> người chơi được ở một mình để tiếp tục chơi trong hòa bình. Bạn sẽ viết thêm JavaScript để cung cấp cho mọi người cách cập nhật podcast đang phát và những thứ tương tự.

Hóa ra có nhiều điều để suy nghĩ ở đây. Có bất kỳ tập lệnh nội tuyến nào trên nội dung sẽ chạy không? Còn việc cập nhật thì sao <title> cũng vậy? Có đủ những mối lo ngại mà bạn có thể sẽ cảm thấy khó chịu khi giải quyết nó.

Tôi muốn thử nghiệm nội dung này, vì vậy tôi đã tổng hợp một chủ đề WordPress và tìm đến Turbo thay vì viết tay một cái gì đó. Turbo (phiên bản mới của Turbolinks) được thiết kế dành riêng cho việc này. Đó là thư viện JavaScript mà bạn thả trên trang (không có quá trình xây dựng, không có cấu hình) và nó chỉ hoạt động. Nó chặn các nhấp chuột vào liên kết nội bộ, chặn nội dung mới của Ajax, v.v. Nhưng nó có tính năng thú vị này nếu bạn đặt một data-turbo-permanent thuộc tính trên một phần tử HTML, nó sẽ tồn tại trong suốt quá trình tải lại đó. Vì vậy tôi đã làm điều đó cho trình phát âm thanh ở đây.

Đây là điều mặc dù.

Tôi chỉ không có thời gian để hoàn thành dự án này một cách đúng đắn. Thật là vui khi được chơi, nhưng sự hứng thú của tôi đối với nó đã giảm dần. Vì vậy, bây giờ tôi sẽ để nó một mình:

It gần như hoạt động, trừ một lỗi rõ ràng là âm thanh ngừng phát ở điều hướng đầu tiên, rồi hoạt động sau đó. Tôi chắc chắn rằng nó có thể sửa được, nhưng tôi không có nhiều kiến ​​thức trong trò chơi này. Tôi nghĩ rằng tôi sẽ cúi đầu và để lại mã này cho ai đó nhận nếu nó hữu ích cho họ.

Một điều nữa ở đây là Turbo đến từ Basecamp và Basecamp có khá nổ tung gần đây khiến tôi cảm thấy không thoải mái khi sử dụng phần mềm của họ. Trầm trọng hơn bởi sự thật là Sam Stephenson đã viết 75% Turbo và đã nói rằng anh ấy sẽ không chạm vào nó (hoặc các dự án liên quan khác) trừ khi phần mềm được chuyển sang nền tảng riêng của nó. Turbo đã ở trong tình trạng không ổn định vì có vẻ như lỗi so với Turbolinks và hiện đã bật rất mặt đất gồ ghề.

Nguồn: https://css-tricks.com/pinned-audio-wordpress-theme/

Dấu thời gian:

Thêm từ Thủ thuật CSS