قالب صوتی وردپرس پین شده

بازنشر افلاطون

دنبال: 0

می ترسم این را با یک داستان کامل شروع کنم، زیرا سفر در اینجا نکته اصلی است، نه خیلی موضوع.

یکی از دوستان مدتی قبل برای من نامه نوشت و وضعیتی را که در آن قرار داشت شرح داد. شرکت او تعداد زیادی سایت وردپرس برای رادیو عمومی دارد که بسیاری از آنها اساساً خانه هایی برای پادکست هستند. یک ویژگی خاص وجود دارد که او فکر می کرد برای همه آنها ایده آل است: داشتن یک پخش کننده صوتی "پین شده". مانند اینکه می توانید یک پادکست پخش کنید، سپس بدون توقف آن پادکست به گشت و گذار در سایت ادامه دهید.

انجام این کار در وردپرس تا حدودی مشکل است، زیرا وردپرس مانند هر وب‌سایت معمولی دیگری، صفحه کامل را بارگذاری مجدد می‌کند، بدون اینکه کار خاصی با مدیریت پیوند یا دستکاری تاریخچه انجام دهد. وقتی صفحه ای دوباره بارگیری می شود، هر صدایی در صفحه پخش نمی شود. وب دقیقاً اینگونه کار می کند.

بنابراین چگونه می توانید آن را در یک سایت وردپرس انجام دهید؟ خوب، شما می توانید آن را به یک سایت وردپرس بدون سر تبدیل کنید و کل قسمت جلویی را به عنوان یک برنامه صفحه واحد بازسازی کنید. برای من جالب به نظر می رسد، اما برای برقراری آن تماس تردید دارم تنها برای این یک چیز.

دیگه چه کارهایی می توانی انجام بدهی؟ می توانید راهی پیدا کنید که صفحه را هرگز دوباره بارگیری نکنید. یادم می آید که این کار را انجام دادم یک سایت استاتیک کوچک 10 سال پیش، اما این یک سایت وردپرس کامل نبود و من حتی در آن زمان حوصله به روز رسانی 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> بازیکن تنها می ماند تا در آرامش به بازی ادامه دهد. شما می توانید جاوا اسکریپت بیشتری بنویسید تا به مردم راهی برای به روز رسانی پادکست هایی که در حال پخش است و مواردی از این دست ارائه دهید.

به نظر می رسد در اینجا چیزهای بیشتری برای فکر کردن وجود دارد. آیا اسکریپت های درون خطی روی محتوا قرار است اجرا شوند؟ چه در مورد به روز رسانی <title> هم؟ به اندازه کافی نگرانی های لبه وجود دارد که احتمالاً از برخورد با آن ناراحت خواهید شد.

من می خواستم با این چیزها بازی کنم، بنابراین یک تم وردپرس را کنار هم گذاشتم و به آن رسیدم توربو به جای دست نوشتن چیزی Turbo (نسخه جدید Turbolinks) فقط برای این طراحی شده است. این یک کتابخانه جاوا اسکریپتی است که شما در صفحه می اندازید (بدون فرآیند ساخت، بدون پیکربندی) و فقط کار می کند. کلیک‌های لینک داخلی، Ajax برای محتوای جدید و غیره را رهگیری می‌کند. اما این ویژگی جالب را دارد که اگر یک data-turbo-permanent ویژگی یک عنصر HTML، آن را در سراسر بارگذاری مجدد حفظ می کند. پس من این کار را برای پخش کننده صوتی اینجا انجام داد.

هرچند موضوع اینجاست.

فقط وقت ندارم این پروژه را به درستی تمام کنم. داشتن یک نمایش جالب بود، اما علاقه من به آن به نوعی کاهش یافته است. بنابراین فعلا آن را به حال خود رها می کنم:

It تقریبا کار می کند، منهای یک اشکال آشکار که صدا در اولین پیمایش متوقف می شود، سپس بعد از آن کار می کند. من مطمئن هستم که قابل رفع است، اما من فقط پوسته زیادی در این بازی ندارم. فکر می‌کنم فقط تعظیم می‌کنم و این کد را در اطراف می‌گذارم تا کسی اگر برایش مفید است، آن را بگیرد.

نکته دیگری که در اینجا وجود دارد این است که Turbo از Basecamp است و Basecamp دارد بلکه منفجر شده اخیراً باعث شده که استفاده از نرم افزار آنها احساس خوبی نداشته باشد. با این واقعیت که سام استفنسون 75% توربو را نوشت و گفته است که به آن (یا سایر پروژه های مرتبط) دست نخواهد زد مگر اینکه نرم افزار به پایه خودش منتقل شود. از آنجایی که به نظر می رسید توربو قبلاً در یک مکان متزلزل بود حشره دار در مقایسه با Turbolinks، و اکنون فعال است بسیار سنگ زنی

منبع: https://css-tricks.com/pinned-audio-wordpress-theme/

تمبر زمان: ممکن است 18، 2021