ตรึงธีม WordPress เสียง

ประทับเวลา: 18 พฤษภาคม 2021 3:14 น
โหนดต้นทาง: 1853521

ฉันเกรงว่าจะต้องเริ่มเรื่องนี้ด้วยเรื่องราวความเป็นมาทั้งหมด เนื่องจากการเดินทางที่นี่เป็นประเด็น ไม่ใช่ธีมมากนัก

เพื่อนคนหนึ่งเขียนถึงฉันเมื่อไม่นานมานี้โดยสรุปสถานการณ์ที่เขาเผชิญอยู่ บริษัทของเขามีเว็บไซต์ WordPress มากมายสำหรับวิทยุสาธารณะ ซึ่งหลายแห่งเป็นเว็บไซต์หลักสำหรับพอดแคสต์ มีฟังก์ชันเฉพาะเจาะจงอย่างหนึ่งที่เขาคิดว่าเหมาะสำหรับฟังก์ชันทั้งหมด นั่นก็คือ การมีเครื่องเล่นเสียงแบบ "ปักหมุด" เช่นเดียวกับที่คุณสามารถเล่นพอดแคสต์ จากนั้นสำรวจไซต์ต่อไปโดยที่พอดแคสต์นั้นหยุดไม่ได้

นี่ค่อนข้างยุ่งยากในการดึงออกมาใน WordPress เนื่องจาก WordPress โหลดซ้ำทั้งหน้าเหมือนกับเว็บไซต์ทั่วไปอื่น ๆ ที่ไม่ได้ทำอะไรเป็นพิเศษกับการจัดการลิงก์หรือการจัดการประวัติ เมื่อโหลดหน้าซ้ำ เสียงใดๆ บนหน้าจะหยุดเล่น นั่นเป็นเพียงวิธีการทำงานของเว็บ

แล้วคุณจะดึงมันออกมาบนเว็บไซต์ WordPress ได้อย่างไร? คุณสามารถทำให้มันกลายเป็นไซต์ WordPress ที่ไม่มีหัวและสร้างส่วนหน้าใหม่ทั้งหมดเป็นแอปหน้าเดียวได้ ฟังดูน่าสนุกสำหรับฉัน แต่ฉันลังเลที่จะโทรไป เพียงแค่ นี้ หนึ่ง สิ่ง.

คุณสามารถทำอะไรได้อีก? คุณสามารถหาวิธีทำให้หน้าไม่โหลดซ้ำได้ ฉันจำได้ว่าทำสิ่งนี้อยู่ เว็บไซต์คงที่เล็กน้อยเมื่อ 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 (Turbolinks เวอร์ชันใหม่) ได้รับการออกแบบมาเพื่อสิ่งนี้โดยเฉพาะ เป็นไลบรารี JavaScript ที่คุณวางลงบนเพจ (ไม่มีกระบวนการสร้าง ไม่มีการกำหนดค่า) และใช้งานได้ มันสกัดกั้นการคลิกลิงก์ภายใน Ajax สำหรับเนื้อหาใหม่ ฯลฯ แต่มันมีฟีเจอร์ที่น่าสนใจหากคุณใส่ data-turbo-permanent ในองค์ประกอบ HTML ก็จะคงอยู่ตลอดการโหลดซ้ำนั้น ดังนั้นฉัน ทำอย่างนั้นกับเครื่องเล่นเสียงที่นี่.

นี่คือสิ่งที่แม้ว่า

ฉันไม่มีเวลาที่จะทำโปรเจ็กต์นี้ให้เสร็จเรียบร้อย การเล่นละครก็สนุกดี แต่ความสนใจของฉันกลับลดน้อยลง ดังนั้นฉันจะทิ้งมันไว้คนเดียวในตอนนี้:

It เกือบจะ ใช้งานได้ ลบข้อบกพร่องที่เห็นได้ชัดหนึ่งข้อที่ทำให้เสียงหยุดเล่นในการนำทางครั้งแรก จากนั้นจึงทำงานหลังจากนั้น ฉันแน่ใจว่ามันแก้ไขได้ แต่ฉันแค่มีสกินไม่มากในเกมนี้ ฉันคิดว่าฉันจะยอมก้มหัวและทิ้งโค้ดนี้ไว้ให้ใครสักคนรับไปถ้ามันมีประโยชน์สำหรับพวกเขา

อีกสิ่งหนึ่งที่น่าเล่นคือ Turbo มาจาก Basecamp และ Basecamp มี ค่อนข้างจะระเบิด เมื่อเร็วๆ นี้ทำให้รู้สึกไม่ดีที่จะใช้ซอฟต์แวร์ของตน รุนแรงขึ้นจากข้อเท็จจริงที่ว่าแซม สตีเฟนสัน เขียน 75% ของ Turbo และบอกว่าเขาจะไม่แตะต้องมัน (หรือโครงการอื่น ๆ ที่เกี่ยวข้อง) เว้นแต่ซอฟต์แวร์จะถูกย้ายไปยังรากฐานของตัวเอง เทอร์โบอยู่ในที่ที่สั่นคลอนแล้วตั้งแต่ดูเหมือน รถม้าชนิดเล็ก เปรียบเทียบกับ Turbolinks และตอนนี้เปิดอยู่ มาก พื้นขรุขระ

ที่มา: https://css-tricks.com/pinned-audio-wordpress-theme/

ประทับเวลา:

เพิ่มเติมจาก เคล็ดลับ CSS