WordPress ले जाभास्क्रिप्टलाई कसरी राम्रोसँग परिचय गराउँछ?JS र CSS फाइलहरूको अनुकूलन लोडिङ

प्रयोग गर्नुहोस्WordPress वेबसाइटप्रोग्रामरहरू, विकास गर्दैWordPress प्लगइनवा WordPress विषयवस्तु अनुकूलन गर्दा, केही JavaScript र CSS स्क्रिप्टिङ स्रोतहरू सन्दर्भ गरिन्छ।

• सामान्यतया, मानिसहरूले HTML को लागि सीधा लिङ्क, स्क्रिप्ट ट्यागहरू प्रयोग गर्छन्।
• वास्तवमा, WordPress मा निर्मित परिष्कृत प्रकार्यहरू र लिपिहरू सन्दर्भ गर्न विधिहरू छन्।
• त्यसोभए, WordPress को निर्मित विधि सन्दर्भहरू प्रयोग गरेर अधिक व्यावसायिक र अधिक विस्तारयोग्य छ।

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

त्यहाँ दुई सामान्य उद्धरण विधिहरू छन्, यो ठीक छ, यो केवल सही वा उचित छैन।

प्रकार १:लिङ्क ट्यागहरूले CSS फाइलहरूलाई सन्दर्भ गर्दछ

• स्क्रिप्ट ट्यागले JS फाइलहरू लागू गर्दछ।यहाँ विस्तृत छैन।

प्रकार १:wp_head प्रकार्य प्रयोग गर्नुहोस्

• wp_head प्रकार्य केहि अनुकूलन वा प्रणाली-परिभाषित सामग्री आउटपुट गर्न प्रयोग गरिन्छ।
• हामी कहिलेकाहीँ यो फाइल सन्दर्भ गर्न निम्न कोड प्रयोग गर्छौं:

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

• सम्बन्धित फाइलहरू सन्दर्भ गर्न माथिको कोड functions.php फाइलमा प्रतिलिपि गर्नुहोस्।

WordPress Enqueue Scripts संसाधन संयन्त्र

हामी सबैलाई थाहा छ, WordPress मा धेरै प्लगइनहरू छन्:

• लगभग हरेक प्लगइनले केहि स्रोत फाइललाई सन्दर्भ गर्दछ।
• अनिवार्य रूपमा, त्यहाँ दुई प्लगइनहरू द्वारा सन्दर्भित स्रोतहरू बीच विवाद हुनेछ, जुन अस्थिर हुनेछ र दक्षतालाई असर गर्न सक्छ।

wp_enqueue_script प्रकार्य प्रयोग गर्नुहोस्

• WordPress मा एक स्रोत सन्दर्भ गर्न तपाईंले प्रयोग गर्नुपर्छwp_enqueue_scriptपङ्क्तिबद्ध वा क्रमबद्ध प्रकार्यको नाममा enqueue शब्द भएको प्रकार्य।
• स्रोतहरू (Enqueue Scripts) इन्क्युइङ गर्ने WordPress तरिकाको साथ, सन्दर्भहरूलाई सम्बन्धित फाइलहरू र कोर कोडबाट अलग गरिएको छ।
• यदि प्रयोगकर्ताले स्रोत असक्षम गर्न चाहन्छ भने, उसले मूल कोडबाट परिमार्जन नगरी यसलाई मेटाउन, परिमार्जन गर्न र टिप्पणी गर्न सक्छ।

साथै, jQuery, jQuery UI, आदि जस्ता सामान्य रूपमा प्रयोग हुने पुस्तकालयहरू WordPress मा निर्मित हुन्छन्।

हामी wp_enqueue_script प्रकार्य प्रयोग गर्न सक्छौं सिधै निर्मित पुस्तकालयलाई कल गर्न, जसले कोड र स्पष्ट विवरण बचत गर्छ।

यदि तपाइँ तपाइँको आफ्नै JS र CSS फाइलहरू सन्दर्भ गर्न यो प्रकार्य प्रयोग गर्नुहुन्छ भने, तपाइँ प्रयोग गर्न आवश्यक छwp_register_scriptप्रकार्यले पहिचानकर्ता (ह्यान्डल) दर्ता गर्दछ र त्यसपछि प्रयोग गर्दछwp_enqueue_scriptप्रकार्यले यस झण्डासँग सम्बन्धित स्रोतलाई कल गर्छ।

WordPress मा JS र CSS फाइलहरू कसरी आयात गर्ने?

WordPress ले JS र CSS विधिहरूको लागि समझदार आयात विधिहरू प्रदान गर्दछ।

तपाईँले प्लगइन ▼ मा plugin.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 प्रकार्य प्रयोग गर्दछ पहिचानकर्ता plugin_stylesheet सँग स्रोत सिर्जना गर्न।

त्यसपछि, यसको लामबद्ध अनुरोधहरू थप्नुहोस्wp_enqueue_scriptsकार्यहरू सञ्चालनमा छन्।

जबकि प्रकार्य नाम एक स्क्रिप्ट हो, यो संसाधन फाइल को प्रकार संग केहि गर्न को लागी छैन र दुबै CSS र JS को लागी मान्य छ।

wp_register_script प्रकार्य वास्तवमा त्यति सरल छैन, यसमा पाँच प्यारामिटरहरू हुन सक्छन्:

1) $handle:स्रोत पहिचानकर्ता।

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

2) $src:स्रोतको स्थान।

• सापेक्ष वा निरपेक्ष ठेगानाहरूले ठेगानाहरू प्राप्त गर्नका लागि WordPress निर्मित प्रकार्यहरू प्रयोग गर्दछ, आदि।
• सामान्यपोजिशनिंगसमारोह छplugins_url,get_template_directory_uriप्रतीक्षा गर्नुहोस्।

३) $deps:भर पर्नु।

• यदि तपाइँ jQuery प्लगइनलाई सन्दर्भ गर्दै हुनुहुन्छ र jQuery निर्माणमा भर पर्नु आवश्यक छ भने, तपाइँले jQuery भर्नु पर्छ।
• ध्यान दिनुहोस् कि यो array को रूपमा पारित गरिएको छ।

४) $ver:स्रोत संस्करण, वैकल्पिक।

५) $in_footer:के तपाइँ यसलाई तल राख्नुहुन्छ?

• सामान्यतया, JS फाइलहरू पृष्ठको फेदमा राख्नुपर्छ, तपाईंले यो प्यारामिटरलाई True मा सेट गर्न सक्नुहुन्छ, यसलाई खाली छोड्नुहोस् वा False माथि आउटपुट गर्न सक्नुहुन्छ।

थप पूर्ण 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' ); 
?>

WordPress विषयवस्तुहरूले स्रोतहरू आयात गर्न wp_enqueue_script प्रयोग गर्छन्

WordPress विषयवस्तु विकासमा प्रोग्रामरहरू, प्रयोग गर्नुहोस्wp_enqueue_scriptस्रोतहरू आयात गर्नुहोस्।

• माथिका उदाहरणहरू WordPress प्लगइन विकासको लागि सन्दर्भित स्रोतहरूको उदाहरण हुन्।
• विषय मा उल्लेख गरिएको विधि समान छ।

मुख्य भिन्नता विषयवस्तु अन्तर्गत स्रोत फाइल ठेगाना प्राप्त गर्न विषयवस्तु डाइरेक्टरी प्राप्त गर्न सम्बन्धित प्रकार्य प्रयोग गर्नु हो।

तिमी प्रयोग गर्नसक्छौget_template_directory_uriहालको थिम डाइरेक्टरी प्राप्त गर्न प्रकार्य।

यदि तपाइँ बाल विषयवस्तु प्रयोग गर्दै हुनुहुन्छ भने, तपाइँ प्रयोग गर्न आवश्यक छget_stylesheet_directory_uriप्रकार्यले सम्बन्धित स्रोतहरू प्राप्त गर्न अभिभावक विषयवस्तुको डाइरेक्टरी प्राप्त गर्दछ।