पिन किया गया ऑडियो वर्डप्रेस थीम

प्लेटो द्वारा पुनर्प्रकाशित

अनुयायियों: 0

मुझे डर है कि मुझे इसे पूरी पिछली कहानी से शुरू करना होगा, क्योंकि यहां यात्रा ही मुद्दा है, विषयवस्तु नहीं।

कुछ समय पहले एक व्यक्ति ने मुझे उस स्थिति के बारे में बताते हुए लिखा था जिसमें वह था। उसकी कंपनी के पास सार्वजनिक रेडियो के लिए वर्डप्रेस साइटों का एक समूह है, जिनमें से कई अनिवार्य रूप से पॉडकास्ट के लिए घर हैं। उन्होंने सोचा कि कार्यक्षमता का एक विशिष्ट हिस्सा उन सभी के लिए आदर्श होगा: एक "पिन किया हुआ" ऑडियो प्लेयर होना। जैसे कि आप एक पॉडकास्ट चला सकते हैं, फिर उस पॉडकास्ट को रोके बिना साइट के चारों ओर नेविगेट करना जारी रखें।

वर्डप्रेस में इसे पूरा करना कुछ हद तक मुश्किल है, क्योंकि वर्डप्रेस किसी भी अन्य नियमित वेबसाइट की तरह पूरे पेज को पुनः लोड करता है, लिंक हैंडलिंग या इतिहास में हेरफेर के साथ कुछ खास नहीं करता है। जब कोई पृष्ठ पुनः लोड होता है, तो पृष्ठ पर कोई भी ऑडियो चलना बंद हो जाता है। वेब इसी तरह काम करता है।

तो आप इसे वर्डप्रेस साइट पर कैसे लागू करेंगे? ठीक है, आप इसे एक हेडलेस वर्डप्रेस साइट बना सकते हैं और पूरे फ्रंट-एंड को सिंगल पेज ऐप के रूप में फिर से बना सकते हैं। यह मुझे मज़ेदार लगता है, लेकिन मुझे वह कॉल करने में झिझक होगी केवल इस के लिए एक चीज़।

आप और क्या कर सकते हैं? आप ऐसा कोई तरीका ढूंढ सकते हैं जिससे पेज दोबारा कभी लोड न हो। मुझे ऐसा करना याद है 10 साल पहले एक छोटी सी स्थिर साइट, लेकिन वह पूर्ण विकसित वर्डप्रेस साइट नहीं थी और मैंने तब यूआरएल को अपडेट करने की जहमत भी नहीं उठाई।

अगर आपने ऐसा किया तो क्या होगा...

आंतरिक लिंक क्लिक को रोकें
उस यूआरएल से सामग्री को अजाक्स किया
पृष्ठ की सामग्री को उस नई सामग्री से बदल दिया गया

मैं आपके लिए इसे 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> बहुत? ऐसी काफ़ी चिंताएँ हैं जिनसे निपटते समय आप शायद परेशान हो जाएँगे।

मैं इस चीज़ के साथ खेलना चाहता था, इसलिए मैंने एक वर्डप्रेस थीम तैयार की और उस तक पहुंच गया टर्बो कुछ हाथ से लिखने के बजाय। टर्बो (टर्बोलिंक्स का नया संस्करण) सिर्फ इसी के लिए डिज़ाइन किया गया है। यह एक जावास्क्रिप्ट लाइब्रेरी है जिसे आप पृष्ठ पर छोड़ते हैं (कोई निर्माण प्रक्रिया नहीं, कोई कॉन्फ़िगरेशन नहीं) और यह बस काम करता है। यह आंतरिक लिंक क्लिक, नई सामग्री के लिए अजाक्स आदि को रोकता है, लेकिन इसमें यह दिलचस्प सुविधा है कि यदि आप एक डालते हैं data-turbo-permanent एक HTML तत्व पर विशेषता, यह इसे उस पुनः लोड पर जारी रखेगी। इसलिए मैं यहां ऑडियो प्लेयर के लिए ऐसा किया.

हालाँकि बात यह है।

मेरे पास इस प्रोजेक्ट को ठीक से पूरा करने का समय नहीं है। नाटक करना मज़ेदार था, लेकिन इसमें मेरी रुचि कम हो गई है। इसलिए मैं इसे अभी के लिए अकेला छोड़ दूँगा:

It लगभग काम करता है, एक भयावह बग के बिना कि ऑडियो पहले नेविगेशन पर चलना बंद कर देता है, फिर उसके बाद काम करता है। मुझे यकीन है कि इसे ठीक किया जा सकता है, लेकिन इस गेम में मेरी ज्यादा क्षमता नहीं है। मुझे लगता है कि अगर यह कोड उनके लिए उपयोगी है तो मैं इसे छोड़ दूंगा और इसे किसी के पास ले जाने के लिए छोड़ दूंगा।

यहां खेल में एक और बात यह है कि टर्बो बेसकैंप से है, और बेसकैंप है बल्कि फट गया हाल ही में उनके सॉफ़्टवेयर का उपयोग करना अच्छा नहीं लग रहा है। इस तथ्य से और अधिक उत्तेजित हुआ कि सैम स्टीफेंसन टर्बो का 75% लिखा और कहा है कि वह इसे (या अन्य संबंधित परियोजनाओं को) तब तक नहीं छूएंगे जब तक कि सॉफ्टवेयर को अपनी नींव में स्थानांतरित नहीं किया जाता है। ऐसा लग रहा था कि टर्बो पहले से ही अस्थिर स्थिति में था छोटी गाड़ी टर्बोलिंक्स की तुलना में, और अब चालू है बहुत घिसी-पिटी ज़मीन।

स्रोत: https://css-tricks.com/pinned-audio-wordpress-theme/

समय टिकट: 18 मई 2021