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

Question

मैं इसे अभी निम्न कोड के साथ कर रहा हूँ:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

यह काम करता है, लेकिन क्या मुझे हर किसी के लिए ऐसा करना चाहिए, इस तरह से, या सभी के लिए लेकिन व्यवस्थापक (ताकि बैकएंड वर्डप्रेस संस्करण का उपयोग करता है?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

यह संस्करण वास्तव में काम नहीं करता है, मुझे वर्डप्रेस jQuery- संस्करण मिलता है और Google नहीं।

इसलिए, क्या मुझे वर्डप्रेस में शामिल किए गए jQuery को बिल्कुल अलग करना चाहिए?

इसके अलावा, मैं अपनी खुद की स्क्रिप्ट (स्लाइडर स्क्रिप्ट, मॉडर्निज़र और अपने खुद के custom.js) को सही तरीके से कैसे जोड़ूं? मुझे लगता है कि मुझे इसे फ़ंक्शन के माध्यम से करना चाहिए। ठीक है और हेडर में नहीं जैसे मैं अभी कर रहा हूं, लेकिन मैं अनिश्चित हूं कि मैं ऐसा कैसे करूंगा।

Answer 1

अंगूठे का पहला नियम: कोर-बंडल लिपियों को न हटाएं और अन्य संस्करणों के साथ बदलें , जब तक कि आप पूरी तरह से निश्चित न हों कि संस्करण बदलने के कारण कोई थीम, प्लगइन्स या कोर खुद नहीं टूटेगा। वास्तव में, जब तक आपको कोर-बंडल वाली स्क्रिप्ट के वैकल्पिक संस्करण की आवश्यकता नहीं होती है, तब तक केवल कोर के साथ बंडल का उपयोग करें।

दूसरा, मैं wp_enqueue_scriptsस्क्रिप्ट रजिस्टरिंग और एन्क्यूइंग के बजाय हुकिंग की जोरदार सलाह देता हूं init। (यह काम करता है init, लेकिन अन्य लोगों के नजरिए से, यह सबसे बेहतर रूप से सही हुक का उपयोग करने के लिए सबसे अच्छा है।)

तीसरा, अपनी स्वयं की कस्टम स्क्रिप्ट को समझने के लिए, आप ऊपर दिए गए तरीकों का उपयोग करें:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

बस आपको जो भी स्क्रिप्ट की आवश्यकता है उसे जोड़ना है।

Comments

+1 बिल्कुल जरूरत पर ! बहुत सारे (आमतौर पर 'प्रीमियम') थीम jQuery के पुराने संस्करण को पंजीकृत करते हैं। यह प्लग-इन को तोड़ता है।

— स्टीफन हैरिस

इस स्क्रिप्ट को मेरी फ़ंक्शंस फ़ाइल में जोड़ना (php घोषणाओं के बिना क्योंकि वे पहले से ही वहां हैं) मुझे 'Http-error 500 (आंतरिक सर्वर त्रुटि)' देता है। कहीं कोई त्रुटि है?

— जोहान डाहल

हाँ; wp_enqueue_script()कॉल में एक सिंटैक्स त्रुटि थी ।

— चिप बेनेट

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

— जोहान डाहल

आप निश्चित रूप से पाद लेख में विचार कर सकते हैं। बस $in_footerअपने कॉल में सही करने के लिए पैरामीटर सेट करें wp_enqueue_script()।

— चिप बेनेट

Answer 2

आशा है कि यह मदद करता है, wp_enqueue_scriptsअधिक जानकारी के लिए कोडेक्स देखें।

1. न का उपयोग initकरने के लिए कतारबद्ध करें । wp_enqueue_scriptsफ्रंट-एंड सामान के लिए और admin_enqueue_scriptsव्यवस्थापक पक्ष के लिए उपयोग करें । आप स्क्रिप्ट initको पंजीकृत करने के लिए उपयोग कर सकते हैं ।
2. हुक wp_enqueue_scriptsकेवल फ्रंट-एंड पर फायर करता है (और लॉग-इन पेज पर नहीं) - इसलिए आपको जांचने की आवश्यकता नहीं है is_admin()।

3. जब तक आपके पास अन्यथा करने के लिए कोई विशिष्ट कारण नहीं है, तब तक मैं लिपियों का उपयोग करके पंजीकरण और कतारबद्ध करने का सुझाव दूंगा functions.php के लिए विषयों प्लग-इन अन्यथा या एक में। आप बस डाल:

    function myprefix_load_scripts() {
      // Load scripts here
    }
    add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );

4. यदि उद्देश्य किसी स्क्रिप्ट का शोर्ट -कोड का उपयोग करने के लिए है, तो आप wp_enqueue_scriptशोर्ट-कॉलबैक में उपयोग करने की इच्छा कर सकते हैं, इसे केवल तब ही कतार में लगाने की जरूरत है (यह 3.3 के बाद से पाद में प्रिंट करेगा )।

5. आपको व्यवस्थापक पक्ष पर मौजूदा jQuery को फिर से पंजीकृत नहीं करना चाहिए। आप कुछ तोड़ सकते हैं: डी।

6. प्लग-इन को मौजूदा jQuery को फिर से पंजीकृत नहीं करना चाहिए ।

7. आपको jQuery को फिर से पंजीकृत करने के पेशेवरों और विपक्षों का वजन करना चाहिए। उदाहरण के लिए, यदि आप एक पुराने संस्करण को पंजीकृत करते हैं तो कुछ प्लग-इन को तोड़ सकते हैं (शायद अभी नहीं, लेकिन भविष्य में ...)

Comments

विज्ञापन 5) फिर से पंजीकरण करना वास्तव में मायने नहीं रखता है। इसीलिए हमें एनक्यू और रजिस्टर फंक्शन्स मिले। :)

— केसर

Answer 3

निष्पक्ष चेतावनी: आपके स्वयं के पक्ष में jQuery के पैकेज्ड संस्करण को deregistering करने से समस्याएँ पैदा हो सकती हैं, खासकर यदि आप यह सुनिश्चित करने के लिए अतिरिक्त सावधानी नहीं बरतते हैं कि आप उस संस्करण को बदल दें, जब भी आप WP के संस्करण को अद्यतन करते हैं। यह प्लगइन्स के लिए दोगुना हो जाता है, जो अक्सर (या अक्सर, कम से कम) अपने प्लगइन्स को jQuery के WP संस्करण के साथ अधिकतम संगतता के लिए लिखते हैं।

उस ने कहा, आपका पहला संस्करण सही है - यह करने के लिए आदी है wp_enqueue_scripts। आपके दूसरे फ़ंक्शन को झुका दिया गया हैinit , जिसके कारण यह ठीक से काम नहीं कर रहा है।

अपनी स्वयं की स्क्रिप्ट को समान तरीके से जोड़ें:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

मैं यहाँ मान रहा हूँ कि आप jsअपनी वर्तमान विषय निर्देशिका में एक निर्देशिका से स्क्रिप्ट लोड कर रहे हैं ; URI पैरामीटर बदलें अगर यह सच नहीं है। तीसरा पैरामीटर array( 'jquery' )कहता है कि bbg-scriptsनिर्भर करता है jquery, और इसलिए बाद में लोड किया जाना चाहिए। अधिक विवरण के लिए https://codex.wordpress.org/Function_Reference/wp_enqueue_script देखें ।

Answer 4

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

यह कुछ भी नहीं करने जा रहा है ... मुझे संदेह है कि आप का मतलब है

if (!function_exists('load_my_scripts')) {

आपका उदाहरण केवल फ़ंक्शन load_my_scripts लोड करेगा यदि यह पहले से मौजूद है (जो ऐसा नहीं करता है, तो यह नहीं होगा और अगर उसने ऐसा किया है तो यह एक त्रुटि पैदा करेगा)

Answer 5

यदि, प्रदर्शन कारणों से, आप CDN से jquery और अन्य कोर js-files को लोड करना चाहते हैं, तो सुनिश्चित करें कि आप कोर और प्लगइन फंक्शंस के साथ होने वाली खराब चीजों को रोकने के लिए एक ही संस्करण लोड कर रहे हैं। ऐशे ही:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');

Answer 6

Jquery लोड करने के लिए सभी अलग-अलग तरीकों की जाँच करने के बाद (न केवल इस पोस्ट पर), मैंने महसूस किया कि उनमें से कोई भी इन सभी को नहीं करता है:

1. एक फ़ंक्शन का उपयोग करके रजिस्टर करें (और शायद एन्क्यू), इसलिए इसे प्लगइन्स द्वारा उपयोग किया जा सकता है।
2. इसे प्रोटोकॉल सापेक्ष url के साथ Google CDN से लोड करें।
3. यदि Google ऑफ़लाइन है, तो स्थानीय प्रतिलिपि में वापसी करें।

सूची में इनमें से कुछ करने के लिए बहुत सारे वैकल्पिक संस्करण हैं, लेकिन सभी नहीं, इसलिए मैंने अपने संस्करण को पहले से ही उपलब्ध कुछ तरीकों से मिलाया और संशोधित किया। यह रहा:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

बैंडविड्थ को बचाने के लिए और Google को हर बार पृष्ठ को फिर से लोड नहीं करने के लिए, यह याद रखता है कि क्या Google CDN ऑनलाइन है या 5 मिनट के लिए Wordpress Transient API का उपयोग कर रहा है।

Comments

सिफारिश नहीं की गई।अब आपको प्रत्येक वर्डप्रेस अपडेट के बाद स्क्रिप्ट को अपडेट करना होगा जो कि सटीक jQuery के संस्करण से मेल खा रहा है। साथ ही, Google कुछ मामलों में लाइब्रेरी को संकुचित करने में विफल रहता है, इसलिए आपका पेज अब धीमा हो रहा है।

— FUXIA

मैं वर्डप्रेस jquery का उपयोग नहीं कर रहा हूं। कृपया कोड पढ़ें। मैं थीम के संस्करण का उपयोग कर रहा हूं। और अगर आपको google पसंद नहीं है, तो आप दूसरे cdn का उपयोग कर सकते हैं।

— नॉटिलस 7

लेकिन यह बात है: आपको यह सुनिश्चित करने के लिए वर्डप्रेस jQuery का उपयोग करना चाहिए कि संस्करण सही है।

— FUXIA

मैं तुम्हारा पीछा नहीं करता। मुझे Google से जो भी संस्करण चाहिए उसे हड़प लेता हूं और अपनी थीम के साथ उसी संस्करण को बंडल करता हूं। ऐसा हर कोई कर रहा है। Wordpress (एडमिन सेक्शन में) जो भी वर्जन आता है।

— nautilus7

आप जो चाहते हैं jQuery के कभी संस्करण का उपयोग कर सकते हैं, लेकिन यदि आप इसे एक विषय के साथ बंडल कर रहे हैं तो आप अपने उपयोगकर्ताओं पर यह मजबूर कर रहे हैं। अब से कुछ साल बाद जब हर कोई jQuery 1.8.2 का उपयोग कर रहा है, तब तक आपके उपयोगकर्ता पुराने संस्करण पर अटके रहेंगे, जब तक कि वे थीम को अद्यतित नहीं रखते।

— क्रिस_