पाद लेख में एनक्यूयू कोर jQuery?


22

मेरी functions.phpफ़ाइल में यह है और मुझे पाद लेख में लोड करने के लिए jQuery नहीं मिल सकता है। includesपाद लेख ठीक में फ़ाइल लोड है, हालांकि। मुझे और क्या करने की जरूरत है?

function starter_scripts() {
    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );

    wp_enqueue_script( 'jquery', '', '', '', true );

    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

यदि आप प्रदर्शन कारणों से ऐसा कर रहे हैं, तो आप deferइसके बजाय अपने स्क्रिप्ट टैग में जोड़ने पर विचार कर सकते हैं : matthewhorne.me/defer-async-wordpress-scripts
diachedelic

WP देव यहाँ, मैंने इससे निपटने के लिए एक प्लगइन बनाया: wordpress.org/plugins/jquery-manager
Remzi Cavdar

जवाबों:


23

ऐसा करने के लिए आपको पहले अपनी jQuery स्क्रिप्ट को डीरजिस्टर करना होगा और फिर से रजिस्टर करना होगा। यदि आप jQuery का उपयोग वर्डप्रेस के साथ करते हैं तो निम्नलिखित वह फंक्शन है जिसकी आपको तलाश है।

function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

यदि आप Google CDN होस्टेड संस्करण jQuery का उपयोग करते हैं तो मुझे बताएं कि मैं इस कोड को Google CDN URL के लिए संशोधित करूंगा।


5
क्या मतलब? समाधान jQuery को पाद लेख तक ले जाने के बारे में है।
राबर्ट ह्यू ने

2
आपको बैकएंड jQuery में परिवर्तन करने से बचने के लिए is_admin () की जांच करने की आवश्यकता हो सकती है, आखिरकार हमें केवल हमारी साइटों के दृश्य को अनुकूलित करने की आवश्यकता है :)
टिम मेलोन

1
@TimMalone - वास्तव में, आप नहीं - wp_enqueue_scriptsकेवल फ्रंट एंड पर admin_enqueue_scriptsउपयोग किया जाता है जबकि बैक एंड के लिए उपयोग किया जाता है
dev_masta

1
मुझे लगता है कि यह समाधान वास्तव में भयानक है। क्या इसके साथ संस्करण टैग हटा दिए गए हैं। यह स्टार्टर शैली क्या है और इसमें यह शामिल है ।min.js और jQuery के साथ इसका क्या संबंध है।
NextGenThemes

2
@redanimalwar स्टार्टर-शैली और फ़ाइलें शामिल हैं सीधे सवाल से।
तेहलवी

43

यहां एक और विकल्प दिया गया है, जो डी-रजिस्टर और री-रजिस्टर होने से बचता है:

/**
 * Move jQuery to the footer. 
 */
function wpse_173601_enqueue_scripts() {
    wp_scripts()->add_data( 'jquery', 'group', 1 );
    wp_scripts()->add_data( 'jquery-core', 'group', 1 );
    wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_enqueue_scripts', 'wpse_173601_enqueue_scripts' );

यह समाधान की नकल करता है वर्डप्रेस कोर की स्थापना द्वारा groupकरने के लिए 1है, जो है कैसे वर्डप्रेस निर्धारित करता है कि एक स्क्रिप्ट पाद लेख में या नहीं होना चाहिए (मैं के लिए तर्क के बारे में पता नहीं कर रहा हूँ 1, के रूप में टिप्पणी में उल्लेख किया @jgraup यह थोड़ा मनमाने ढंग से लगता है)।


1
दिलचस्प। यह स्क्रिप्ट को पाद लेख में ले जाने के लिए wp_register_scriptउपयोग की तरह दिखता है add_data( $handle, 'group', 1 )core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… - क्या आप इस बात का विस्तार कर सकते हैं कि ऐसा क्यों है? आपके कोड को देखकर, 'समूह' थोड़ा मनमाना लगता है। लेकिन मैं core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… में देख सकता हूं कि WP_Scripts-> do_itemबाद में इसका उपयोग कैसे किया जाता है । किसी भी तरह से, यह सबसे कम विनाशकारी जवाब प्रतीत होगा।
जगप

2
मुझे आशा है कि कोई व्यक्ति इन तीन उत्कीर्ण उत्तरों पर आगे टिप्पणी कर सकता है। सभी अलग हैं और WP के कुछ ज्ञान की आवश्यकता है। क्योंकि Google को इन लिपियों को तह से नीचे होना चाहिए, यह एक महत्वपूर्ण विषय है।
ssaltman

2
सबसे बढ़िया उत्तर! नोट : यह वर्डप्रेस 4.2.0 के बाद से काम करता है और इसे functions.php में हुक 'wp_enqueue_scripts' कॉलबैक में उपयोग करता है
realmag777

नमस्ते, मैंने उपरोक्त दृष्टिकोण की कोशिश की, लेकिन यह काम नहीं किया। क्या कोई मदद कर सकता है?
इयुमाया

1
यह बहुत बढ़िया है! बहुत बहुत धन्यवाद। लेकिन, ध्यान देने योग्य बात यह है कि @tehlivi के अनुसार - WP jQuery के पुराने संस्करण का उपयोग करता है - एक नए संस्करण को deregistering और पंजीकृत करने पर विचार करें।
स्कोलिंड

18

एक बेहतर समाधान:

add_action( 'wp_default_scripts', 'move_jquery_into_footer' );

function move_jquery_into_footer( $wp_scripts ) {

    if( is_admin() ) {
        return;
    }

    $wp_scripts->add_data( 'jquery', 'group', 1 );
    $wp_scripts->add_data( 'jquery-core', 'group', 1 );
    $wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
}

क्यों इसका बेहतर है तो स्वीकृत जवाब IMO

  1. बाद के चरण में नहीं बल्कि अन्य चीजों में पहले से ही गड़बड़ हो सकती है।
  2. संस्करण स्ट्रिंग इसे जगह में रखा गया और हटाया नहीं गया!
  3. यह एक स्क्रिप्ट को अपंजीकृत और पुनर्व्यवस्थित नहीं करता है, लेकिन यह केवल समूह मान को सेट करता है जो अनिवार्य रूप से उसी तरह है जैसे कि स्क्रिप्ट के साथ पंजीकृत किया जाएगा $footer = true

व्यवस्थापक को ऐसा नहीं करने के बारे में

यदि प्लग-इन wp_head में इनलाइन jquery जोड़ते हैं, तो यह विफल हो जाएगा जब उस बिंदु पर jquery लोड नहीं होता है, इसलिए मेरा सुझाव है कि जब तक आप अपनी साइट को लाखों संपादित नहीं करते और आप अपने व्यवस्थापक को अनुकूलित करने का प्रयास करते हैं। यह फ्रंटएंड के लिए सही है और साथ ही आपको खराब कोडेड थीम या प्लगइन्स के लिए भी देखना चाहिए जो इनलाइन jQuery कोड का उपयोग करके सिर में jquery ग्रहण करते हैं। WP और प्लगइन्स अन्य स्क्रिप्ट को डिपार्टमेंट में jquery के साथ एडमिन हेड में रजिस्टर करते हैं, इसलिए यह वैसे भी काम नहीं करेगा जैसा मुझे लगता है।

इसके बारे में काम नहीं कर रहा है

आपको यह ध्यान रखने की आवश्यकता है कि यदि किसी अन्य स्क्रिप्ट को उस सिर पर लोड किया गया है जिसकी निर्भरता में jQuery है, तो यह स्वयं से ठीक पहले सिर में jQuery लोड भी करेगा। और यह अच्छी और अपेक्षित है, इसका कारण wp_enqueue प्रणाली है। इसका मतलब है कि आप जल्द ही सीखेंगे यदि आप कुछ प्लगइन्स का उपयोग करते हैं जो उनमें से एक के लिए सिर पर jquery की आवश्यकता होगी। यह दुखद स्क्रिप्ट के लिए डिफ़ॉल्ट रूप से दुख की बात है।

कट्टरपंथी समाधान

मुझे लगता है कि यह jquery मानती है कि किसी भी इनलाइन जेएस ब्रेक होगा, लेकिन यह दुर्लभ होना चाहिए। यह सभी स्क्रिप्ट्स को पाद लेख के लिए बाध्य करेगा , भले ही वे किस प्रकार संलग्न हों।

add_action( 'wp_enqueue_scripts', 'js_to_footer' );

function js_to_footer() {
  remove_action( 'wp_head', 'wp_print_scripts' );
  remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
  remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
}

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

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

4
अन्य उत्तरों में दूसरों के बारे में कुछ भी नहीं बताया गया है जो jQuery को सिर के लिए मजबूर करते हैं, वास्तव में मेरा जवाब उन लोगों से भ्रम को दूर करता है जो यह नहीं जानते कि इसका काम क्यों नहीं हो रहा है। दूसरों में से कोई भी उत्तर संभावित जोखिमों का उल्लेख नहीं करता है ...
NextGenThemes

इस कोड (उपरोक्त उत्तर के कोड के रूप में) ने मुझे 500 त्रुटि दी। मेरे पास वर्डप्रेस 4.9.9 है
मार्को पानिची

यह विश्वास करना मुश्किल है कि यह कोड 500 का कारण बन रहा है, आपने शायद इसे अपने कोड में लागू करने में गलती की है। यह वास्तव में पूछने के लिए सही जगह नहीं है और आपका पुराना WP संस्करण शायद ही पर्याप्त जानकारी है।
NextGenThemes

2

मैंने इस विशिष्ट समस्या के लिए एक प्लगइन विकसित किया है। यह प्लगइन WordPress jQuery के साथ गड़बड़ नहीं करता है क्योंकि यह केवल फ्रंट-एंड में लोड होता है। देखें: वर्डप्रेस के लिए jQuery प्रबंधक

क्यों अभी तक एक और jQuery के अपडेटर / प्रबंधक / डेवलपर / डिबगिंग उपकरण?

क्योंकि कोई भी डेवलपर टूल आपको jQuery और / या jQuery माइग्रेट के एक विशिष्ट संस्करण का चयन करने की अनुमति नहीं देता है। संपीड़ित / उत्पादन और असम्पीडित / विकास संस्करण दोनों प्रदान करना। नीचे देखें सुविधाएँ!

✅ केवल फ्रंट-एंड में निष्पादित, वर्डप्रेस व्यवस्थापक / बैकएंड और WP कस्टमाइज़र (संगतता कारणों के लिए) के साथ हस्तक्षेप नहीं करता है देखें: https://core.trac.wordpress.org/ticket/45130 और https: // core। trac.wordpress.org/ticket/37110

Query jQuery और / या jQuery के माइग्रेट को चालू / बंद करें

Ate jQuery और / या jQuery के माइग्रेट के एक विशिष्ट संस्करण को सक्रिय करें

और भी बहुत कुछ! कोड खुला स्रोत है, इसलिए आप इसका अध्ययन कर सकते हैं, इससे सीख सकते हैं और योगदान कर सकते हैं।


लगभग हर कोई गलत हैंडल का उपयोग करता है

वर्डप्रेस वास्तव में jquery- कोर हैंडल का उपयोग करता है, jquery का नहीं:

https://github.com/WordPress/WordPress/blob/f84ab5e19f0038a3abec71821c9b8f47a4272942/wp-includes/script-loader.php#L1017

// jQuery
$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
$scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
$scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

JQuery संभाल लोड करने के लिए सिर्फ एक उपनाम है jQuery कोर के साथ jQuery-विस्थापित

उपनाम के बारे में अधिक जानकारी देखें: wp_register_script एकाधिक पहचानकर्ताओं?

इसे करने का सही तरीका

नीचे मेरे उदाहरण में मैं https://code.jquery.com पर आधिकारिक jQuery CDN का उपयोग करता हूं। मैं script_loader_tag का भी उपयोग करता हूं ताकि मैं कुछ CDN विशेषताओं को जोड़ सकूं
आप निम्नलिखित कोड का उपयोग कर सकते हैं:

// Front-end not excuted in the wp admin and the wp customizer (for compatibility reasons)
// See: https://core.trac.wordpress.org/ticket/45130 and https://core.trac.wordpress.org/ticket/37110
function wp_jquery_manager_plugin_front_end_scripts() {
    $wp_admin = is_admin();
    $wp_customizer = is_customize_preview();

    // jQuery
    if ( $wp_admin || $wp_customizer ) {
        // echo 'We are in the WP Admin or in the WP Customizer';
        return;
    }
    else {
        // Deregister WP core jQuery, see https://github.com/Remzi1993/wp-jquery-manager/issues/2 and https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
        wp_deregister_script( 'jquery' ); // the jquery handle is just an alias to load jquery-core with jquery-migrate
        // Deregister WP jQuery
        wp_deregister_script( 'jquery-core' );
        // Deregister WP jQuery Migrate
        wp_deregister_script( 'jquery-migrate' );

        // Register jQuery in the head
        wp_register_script( 'jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), null, false );

        /**
         * Register jquery using jquery-core as a dependency, so other scripts could use the jquery handle
         * see /wordpress/283828/wp-register-script-multiple-identifiers
         * We first register the script and afther that we enqueue it, see why:
         * /wordpress/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * /programming/39653993/what-is-diffrence-between-wp-enqueue-script-and-wp-register-script
         */
        wp_register_script( 'jquery', false, array( 'jquery-core' ), null, false );
        wp_enqueue_script( 'jquery' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_jquery_manager_plugin_front_end_scripts' );


function add_jquery_attributes( $tag, $handle ) {
    if ( 'jquery-core' === $handle ) {
        return str_replace( "type='text/javascript'", "type='text/javascript' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_jquery_attributes', 10, 2 );

0
add_action("wp_enqueue_scripts", "myscripts");

function myscripts() { 
   wp_enqueue_script( 'jquery' , '', array(), true); //true for footer
   wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true );
}

-3

अरे केवल इस तरह से अपना कोड बदलें

function starter_scripts() {
        wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
        wp_enqueue_script('jquery');
        wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'starter_scripts' );

मुझे लगता है कि यह ठीक काम करता है

इस पंक्तियों को अपने फ़ंक्शंस में जोड़ें

remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 5);

फिर यह पाद लेख में स्क्रिप्ट जोड़ता है


यह सिर में jQuery डालता है। मुझे पाद लेख में इसकी आवश्यकता है।
देसी

हे देसी कृपया संपादित उत्तर की जाँच करें मुझे लगता है कि यह आपकी मदद करता है
अमित मिश्रा

6
मुझे पूरा यकीन है कि यह एक भयानक विचार है - आपने हेडर में लिपियों को लोड करने से प्रभावी रूप से रोका है , न कि केवल jQuery, और डबल-एनकाउंटरिंग स्क्रिप्ट हो सकता है (यह गहराई से नहीं देखा है)। वास्तव में, आपको शायद केवल remove_action/ add_actionभाग की आवश्यकता है यदि आप इसे इस तरह से करने जा रहे हैं।
२०

1
वास्तव में भयानक विचार, यह मत करो!
NextGenThemes
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.