क्या आप जानना चाहते हैं कि वर्डप्रेस में जावास्क्रिप्ट और सीएसएस स्टाइलशीट को ठीक से कैसे जोड़ दिया जाए? कई DIY उपयोगकर्ता अक्सर प्लगइन्स और थीम में अपनी स्क्रिप्ट और स्टाइलशीट को सीधे कॉल करने की गलती करते हैं। इस आलेख में, हम आपको दिखाएंगे कि वर्डप्रेस में जावास्क्रिप्ट और स्टाइलशीट को ठीक से कैसे जोड़ दिया जाए। यह उन लोगों के लिए विशेष रूप से उपयोगी होगा जो सिर्फ वर्डप्रेस थीम और प्लगइन विकास सीखना शुरू कर रहे हैं।
सामान्य गलती जब वर्डप्रेस में लिपियों और स्टाइलशीट्स को जोड़ना
कई नए वर्डप्रेस प्लगइन्स और थीम डेवलपर्स अपने स्क्रिप्ट्स को जोड़ने या इनलाइन सीएसएस को अपने प्लग इन और थीम में गलती करते हैं।
कुछ गलती से इस का उपयोग करें wp_head उनकी स्क्रिप्ट और स्टाइलशीट लोड करने के लिए फ़ंक्शन
जबकि उपरोक्त कोड आसान लग सकता है, वर्डप्रेस में स्क्रिप्ट जोड़ने का यह गलत तरीका है, और यह भविष्य में और अधिक संघर्ष की ओर जाता है।
उदाहरण के लिए, यदि आप jQuery को मैन्युअल रूप से लोड करते हैं और किसी अन्य प्लगइन को jQuery को उचित विधि के माध्यम से भारित करते हैं, तो आपको jQuery दो बार लोड किया जा रहा है। यदि यह प्रत्येक पृष्ठ पर लोड होता है, तो यह वर्डप्रेस की गति और प्रदर्शन को नकारात्मक रूप से प्रभावित करेगा।
यह भी संभव है कि दोनों अलग-अलग संस्करण हैं जो संघर्ष भी कर सकते हैं।
कहा जा रहा है, चलो स्क्रिप्ट और स्टाइलशीट जोड़ने के सही तरीके पर एक नज़र डालें।
क्यों वर्डप्रेस में लिपियों और शैलियों घुमावदार?
वर्डप्रेस में एक मजबूत डेवलपर समुदाय है। दुनियाभर के हजारों लोग वर्डप्रेस के लिए थीम और प्लगइन्स विकसित करते हैं।
यह सुनिश्चित करने के लिए कि सबकुछ ठीक से काम करता है, और कोई भी दूसरे के पैर की उंगलियों पर कदम नहीं उठा रहा है, वर्डप्रेस में एक एन्क्यूवेइंग सिस्टम है यह प्रणाली जावालायन और सीएसएस स्टाइलशीट लोड करने का एक प्रोग्राम योग्य तरीका प्रदान करती है।
Wp_enqueue_script और wp_enqueue_style फ़ंक्शंस का उपयोग करके, आप वर्डप्रेस को बताते हैं कि जब कोई फाइल लोड होती है, जहां उसे लोड किया जाता है, और इसकी निर्भरता क्या है
यह प्रणाली डेवलपर्स को अंतर्निहित जावास्क्रिप्ट पुस्तकालयों का उपयोग करने की भी अनुमति देती है जो वही तृतीय-पक्ष स्क्रिप्ट कई बार लोड करने की बजाय WordPress के साथ बंडल आती है। इससे पृष्ठ लोड समय कम हो जाता है और अन्य थीम और प्लगिन के साथ टकराव से बचने में मदद मिलती है।
कैसे वर्डप्रेस में लिपियों को ठीक से चिपकाने के लिए?
वर्डप्रेस में स्क्रिप्ट को ठीक से लोड करना बहुत आसान है नीचे एक उदाहरण कोड है कि आप वर्डप्रेस में स्क्रिप्ट को ठीक से लोड करने के लिए अपनी प्लग इन फाइल में या अपने विषय के फ़ंक्शंस। Php फ़ाइल में पेस्ट करेंगे।
? php
फ़ंक्शन wpb_adding_scripts () {
wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), सरणी ('jquery'), '1.1', सत्य);
wp_enqueue_script ( 'my_amazing_script');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');
?>
स्पष्टीकरण:
हमने अपनी स्क्रिप्ट को पंजीकरण के द्वारा शुरू कर दिया wp_register_script () समारोह। यह फ़ंक्शन 5 मानकों को स्वीकार करता है:
- $ संभाल – हैंडल आपकी स्क्रिप्ट का अनूठा नाम है हमारा “my_amazing_script” कहा जाता है
- $ src – src आपकी स्क्रिप्ट का स्थान है हम plugins_url फ़ंक्शन का प्रयोग कर रहे हैं ताकि हमारे प्लगइन्स फ़ोल्डर का उचित यूआरएल मिल सके। एक बार वर्डप्रेस खोजता है, तो वह उस फ़ोल्डर में हमारे फ़ाइल नाम amazing_script.js को देखेगा।
- $ deps – डिप्टी निर्भरता के लिए है चूंकि हमारी स्क्रिप्ट jQuery का उपयोग करती है, इसलिए हमने निर्भरता क्षेत्र में jQuery जोड़ा है। यदि साइट पर पहले ही लोड नहीं किया जा रहा है तो वर्डप्रेस स्वचालित रूप से jQuery लोड हो जाएगा।
- $ ver – यह हमारी स्क्रिप्ट का संस्करण संख्या है यह पैरामीटर आवश्यक नहीं है
- $ in_footer – हम पाद लेख में हमारी स्क्रिप्ट को लोड करना चाहते हैं, इसलिए हमने सही होने के लिए मूल्य निर्धारित किया है। यदि आप शीर्षलेख में स्क्रिप्ट को लोड करना चाहते हैं, तो आप इसे गलत बना देंगे।
इन सभी पैरामीटर को प्रदान करने के बाद wp_register_script , हम बस में स्क्रिप्ट कॉल कर सकते हैं wp_enqueue_script () जो सब कुछ घटता है
वास्तव में स्क्रिप्ट लोड करने के लिए wp_enqueue_scripts कार्रवाई हुक का उपयोग करने के लिए अंतिम चरण है चूंकि यह एक उदाहरण कोड है, हमने जो कुछ भी नीचे दिया है वह सब कुछ नीचे है।
यदि आप इसे अपनी थीम या प्लगइन में जोड़ रहे थे, तो आप इस एक्शन हुक को जगह ले सकते हैं जहां स्क्रिप्ट वास्तव में आवश्यक है। यह आपको आपके प्लगइन के स्मृति पदचिह्न को कम करने की अनुमति देता है।
अब कुछ लोग सोचते हैं कि हम पहले स्क्रिप्ट को पंजीकृत करने और फिर इसे संलग्न करने के लिए अतिरिक्त कदम क्यों उठा रहे हैं? ठीक है, यह अन्य साइट स्वामियों को आपके प्लगइन के मुख्य कोड को संशोधित किए बिना अपनी स्क्रिप्ट को रद्द करने की अनुमति देता है।
वर्डप्रेस में उचित रूप से एन्क्यू शैलियाँ
बस स्क्रिप्ट की तरह, आप भी अपनी स्टाइलशीट एन्क्वाय कर सकते हैं। नीचे दिए गए उदाहरण को देखें:
के बजाय का उपयोग करने का wp_enqueue_script , हम अब उपयोग कर रहे हैं wp_enqueue_style हमारी स्टाइलशीट जोड़ने के लिए
ध्यान दें कि हमने उपयोग किया है wp_enqueue_scripts शैलियों और स्क्रिप्ट दोनों के लिए कार्रवाई हुक नाम के बावजूद, यह समारोह दोनों के लिए काम करता है।
उपरोक्त उदाहरणों में, हमने उपयोग किया है plugins_url स्क्रिप्ट या शैली के स्थान को इंगित करने के लिए फ़ंक्शन, जिसे हम एन्क्यू करना चाहते थे।
हालांकि, यदि आप अपने विषय में एन्क्यू स्क्रिप्ट फ़ंक्शन का उपयोग कर रहे हैं, तो बस का उपयोग करें get_template_directory_uri () बजाय। यदि आप बाल विषय के साथ काम कर रहे हैं, तो उपयोग करें get_stylesheet_directory_uri () ।
नीचे एक उदाहरण कोड है: