वर्डप्रेस जावास्क्रिप्ट को सही तरीके से कैसे पेश करता है?जेएस और सीएसएस फाइलों की कस्टम लोडिंग

वेबसाइट बनाने के लिए वर्डप्रेस का उपयोग करने वाले प्रोग्रामर वर्डप्रेस प्लगइन विकसित करते समय या वर्डप्रेस थीम को अनुकूलित करते समय कुछ जावास्क्रिप्ट और सीएसएस स्क्रिप्ट संसाधनों का संदर्भ लेंगे।

• आमतौर पर लोग सीधे HTML के लिए लिंक, स्क्रिप्ट टैग का उपयोग करते हैं।
• वास्तव में, वर्डप्रेस में स्क्रिप्ट को संदर्भित करने के लिए अंतर्निहित परिष्कृत कार्य और विधियां हैं।
• इसलिए, वर्डप्रेस के बिल्ट-इन मेथड रेफरेंस का उपयोग करना अधिक पेशेवर और अधिक एक्स्टेंसिबल है।

त्रुटिपूर्ण उद्धरण विधि

दो सामान्य उद्धरण विधियां हैं, यह ठीक है, यह बिल्कुल सही या उचित नहीं है।

विधि 1: लिंक टैग का उपयोग करके CSS फ़ाइल को संदर्भित करना

• स्क्रिप्ट टैग जेएस फाइलों को लागू करते हैं।यहाँ विस्तृत नहीं है।

विधि 2: wp_head फ़ंक्शन का उपयोग करें

• wp_head फ़ंक्शन का उपयोग कुछ कस्टम या सिस्टम-परिभाषित सामग्री को आउटपुट करने के लिए किया जाता है।
• हम कभी-कभी इस फ़ाइल को संदर्भित करने के लिए निम्न कोड का उपयोग करते हैं:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• संबंधित फ़ाइलों को संदर्भित करने के लिए उपरोक्त कोड को functions.php फ़ाइल में कॉपी करें।

वर्डप्रेस एनक्यू लिपियों संसाधन तंत्र

जैसा कि हम सभी जानते हैं कि वर्डप्रेस में बहुत सारे प्लगइन्स हैं:

• लगभग हर प्लगइन कुछ संसाधन फ़ाइल का संदर्भ देता है।
• अनिवार्य रूप से, दो प्लगइन्स द्वारा संदर्भित संसाधनों के बीच संघर्ष होगा, जो अस्थिर हो जाएगा और दक्षता को प्रभावित कर सकता है।

wp_enqueue_script फ़ंक्शन का उपयोग करें

• वर्डप्रेस में एक संसाधन को संदर्भित करने के लिए आपको उपयोग करना चाहिएwp_enqueue_scriptएक फ़ंक्शन जिसमें कतारबद्ध या सॉर्ट किए गए फ़ंक्शन के नाम पर एनक्यू शब्द होता है।
• संसाधनों को कतारबद्ध करने के वर्डप्रेस के तरीके (एनक्यू स्क्रिप्ट) के साथ, संदर्भ संबंधित फाइलों और कोर कोड से अलग हो जाते हैं।
• यदि उपयोगकर्ता संसाधन को अक्षम करना चाहता है, तो वह इसे कोर कोड से संशोधित किए बिना हटा सकता है, संशोधित कर सकता है और टिप्पणी कर सकता है।

इसके अलावा, कुछ सामान्य रूप से उपयोग की जाने वाली लाइब्रेरी जैसे jQuery, jQuery UI, आदि को वर्डप्रेस में बनाया गया है।

हम अंतर्निहित लाइब्रेरी को सीधे कॉल करने के लिए wp_enqueue_script फ़ंक्शन का उपयोग कर सकते हैं, जो कोड और एक स्पष्ट विनिर्देश बचाता है।

यदि आप इस फ़ंक्शन का उपयोग अपनी स्वयं की JS और CSS फ़ाइलों को संदर्भित करने के लिए करते हैं, तो आपको उपयोग करने की आवश्यकता हैwp_register_scriptफ़ंक्शन एक पहचानकर्ता (हैंडल) को पंजीकृत करता है और फिर उपयोग करता हैwp_enqueue_scriptफ़ंक्शन इस ध्वज के अनुरूप संसाधन को कॉल करता है।

वर्डप्रेस में जेएस और सीएसएस फाइलों को ठीक से कैसे आयात करें?

वर्डप्रेस जेएस और सीएसएस विधियों के लिए समझदार आयात विधियां प्रदान करता है।

प्लगइन में प्लगइन.css फ़ाइल आयात करने के लिए आप निम्न कोड का उपयोग कर सकते हैं

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

उपरोक्त पहचानकर्ता प्लगइन_स्टाइलशीट के साथ संसाधन बनाने के लिए wp_register_script फ़ंक्शन का उपयोग करता है।

फिर, इसके कतारबद्ध अनुरोधों को इसमें जोड़ेंwp_enqueue_scriptsकार्रवाई चल रही है।

हालांकि फ़ंक्शन नाम एक स्क्रिप्ट है, इसका संसाधन फ़ाइल के प्रकार से कोई लेना-देना नहीं है और यह CSS और JS दोनों के लिए मान्य है।

wp_register_script फ़ंक्शन वास्तव में इतना आसान नहीं है, इसमें पांच पैरामीटर हो सकते हैं:

1) $हैंडल: संसाधन पहचानकर्ता।

• 由wp_enqueue_scriptस्थानांतरण करना।

2) $src: संसाधन का स्थान।

• सापेक्ष या पूर्ण पते, पते आदि प्राप्त करने के लिए वर्डप्रेस बिल्ट-इन फ़ंक्शंस का उपयोग करते हैं।
• सामान्यपोजिशनिंगसमारोह हैplugins_url,get_template_directory_uri等।

3) $deps: निर्भरता.

• यदि आप jQuery प्लगइन का जिक्र कर रहे हैं और निर्माण के लिए jQuery पर भरोसा करने की आवश्यकता है, तो आपको jQuery भरना होगा।
• ध्यान दें कि इसे एक सरणी के रूप में पारित किया गया है।

4) $ver: संसाधन संस्करण, वैकल्पिक।

5) $in_footer: क्या इसे सबसे नीचे रखा जाना चाहिए?

• आम तौर पर, जेएस फाइलों को पृष्ठ के निचले भाग में रखा जाना चाहिए, आप इस पैरामीटर को सही पर सेट कर सकते हैं, इसे शीर्ष पर आउटपुट के लिए खाली या गलत छोड़ सकते हैं।

आइए एक अधिक संपूर्ण JavaScript फ़ाइल संदर्भ उदाहरण देखें

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

वर्डप्रेस थीम संसाधनों को आयात करने के लिए wp_enqueue_script का उपयोग करती हैं

वर्डप्रेस थीम डेवलपमेंट में प्रोग्रामर, उपयोगwp_enqueue_scriptसंसाधन आयात करें।

• उपरोक्त उदाहरण वर्डप्रेस प्लगइन विकास के लिए संदर्भित संसाधनों के उदाहरण हैं।
• विषय में संदर्भित विधि समान है।

मुख्य अंतर थीम के तहत संसाधन फ़ाइल पता प्राप्त करने के लिए थीम निर्देशिका प्राप्त करने के लिए संबंधित फ़ंक्शन का उपयोग करना है।

आप उपयोग कर सकते हैंget_template_directory_uriवर्तमान विषय निर्देशिका प्राप्त करने के लिए कार्य करें।

यदि आप चाइल्ड थीम का उपयोग कर रहे हैं, तो आपको उपयोग करने की आवश्यकता होगीget_stylesheet_directory_uriफ़ंक्शन को संबंधित संसाधन प्राप्त करने के लिए मूल विषय की निर्देशिका मिलती है।