موضوع ووردبريس للصوت المثبت

الطابع الزمني: 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) خصيصًا لهذا الغرض. إنها مكتبة جافا سكريبت تقوم بإسقاطها على الصفحة (لا توجد عملية بناء، ولا تكوين) وهي تعمل فقط. إنه يعترض نقرات الارتباط الداخلي، ونقرات Ajax للمحتوى الجديد، وما إلى ذلك. ولكنه يحتوي على هذه الميزة المثيرة للاهتمام حيث إذا قمت بوضع data-turbo-permanent السمة الموجودة على عنصر HTML، فإنها ستستمر خلال عملية إعادة التحميل هذه. لذا أنا فعلت ذلك لمشغل الصوت هنا.

هذا هو الشيء بالرغم من ذلك.

ليس لدي الوقت لإنهاء هذا المشروع بشكل صحيح. لقد كان من الممتع أن أحظى بمسرحية، لكن اهتمامي بها قد تضاءل نوعًا ما. لذلك سأترك الأمر بمفرده الآن:

It تقريبا يعمل، باستثناء خطأ واحد صارخ حيث يتوقف تشغيل الصوت عند التنقل الأول، ثم يعمل بعد ذلك. أنا متأكد من أنه قابل للإصلاح، ولكن ليس لدي الكثير من الجلد في هذه اللعبة. أعتقد أنني سأنسحب وأترك ​​هذا الرمز ليلتقطه شخص ما إذا كان مفيدًا له.

شيء آخر يلعب هنا هو أن Turbo من Basecamp، وBasecamp لديه انفجرت إلى حد ما مما جعل مؤخرًا استخدام برامجهم أمرًا لا يشعر بالارتياح. ومما زاد الأمر سوءًا حقيقة أن سام ستيفنسون كتب 75٪ من توربو وقال إنه لن يتطرق إليه (أو المشاريع الأخرى ذات الصلة) ما لم يتم نقل البرنامج إلى مؤسسته الخاصة. كان توربو بالفعل في مكان مهتز منذ بدا الأمر عربات التي تجرها الدواب بالمقارنة مع Turbolinks، والآن قيد التشغيل جدا أرض شائكة.

المصدر: https://css-tricks.com/pinned-audio-wordpress-theme/

الطابع الزمني:

اكثر من الخدع المغلق