Încarcă jQuery în footer?

30 dec. 2014, 21:44:44
Vizualizări: 64.1K
Voturi: 33

Am următorul cod în fișierul functions.php și nu reușesc să încarc jQuery în footer. Fișierul includes se încarcă corect în footer. Ce altceva trebuie să fac?

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' );
2
Comentarii

Dacă faci asta din motive de performanță, poți lua în considerare adăugarea atributului defer la tag-urile tale de script: https://matthewhorne.me/defer-async-wordpress-scripts/

diachedelic diachedelic
25 aug. 2017 07:06:09

Dezvoltator WP aici, am creat un plugin pentru a rezolva această problemă: https://wordpress.org/plugins/jquery-manager/

Remzi Cavdar Remzi Cavdar
4 iul. 2019 12:55:20
Toate răspunsurile la întrebare 6
16
61

Iată o altă opțiune care evită necesitatea de a dezînregistra și reînregistra:

/**
 * Mută jQuery în subsolul paginii.
 */
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' );

Această soluție imită nucleul WordPress prin setarea group la 1, care este modul în care WordPress determină dacă un script ar trebui să fie în subsol sau nu (nu sunt conștient de motivul pentru 1, așa cum a menționat @jgraup în comentarii, pare un pic arbitrar).

7 mai 2016 17:11:29
Comentarii

Interesant. Se pare că wp_register_script folosește add_data( $handle, 'group', 1 ) pentru a muta scripturile în subsol. https://core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/functions.wp-scripts.php#L117 - Poți să explici de ce este așa? Privind codul tău, 'group' pare un pic arbitrar. Dar pot vedea în https://core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/class.wp-scripts.php#L231 cum este folosit mai târziu în WP_Scripts->do_item. În orice caz, aceasta pare să fie cel mai puțin distructiv răspuns.

jgraup jgraup
7 mai 2016 21:37:30

Sper că cineva poate comenta în continuare aceste trei răspunsuri votate. Toate sunt diferite și necesită câteva cunoștințe despre WP. Deoarece Google cere ca aceste scripturi să fie sub linia de pliere, acesta este un subiect important.

ssaltman ssaltman
18 mai 2016 16:32:12

Cel mai bun răspuns! Notă: funcționează începând cu WordPress 4.2.0 și folosește-l în functions.php în callback-ul hook-ului 'wp_enqueue_scripts'

realmag777 realmag777
1 iul. 2016 21:22:28

Bună, am încercat abordarea de mai sus, dar nu a funcționat. Poate cineva să mă ajute?

iSaumya iSaumya
31 aug. 2016 15:13:44

@iSaumya Ar trebui să adaugi niște detalii despre ce nu a funcționat / ce s-a întâmplat. Cererea ta este destul de criptică! Vezi și celălalt răspuns nou și ține cont că acest răspuns încă trebuie încapsulat într-o funcție și un apel de filtru.

Tim Malone Tim Malone
21 oct. 2016 01:08:19

@tim Am încercat asta, dar încă nu mută scriptul în footer. Asta s-a întâmplat.

iSaumya iSaumya
21 oct. 2016 01:10:36

@iSaumya Am adăugat câteva detalii suplimentare pentru tine, sper că te ajută!

Matthew Boynes Matthew Boynes
22 oct. 2016 02:41:27

WordPress folosește o versiune atât de veche de jQuery, încât în acest moment este mai bine să o dezînregistrezi și să înregistrezi cea mai recentă versiune.

tehlivi tehlivi
16 ian. 2018 21:27:33

Acest lucru este atât de bun! Mulțumesc mult. Dar, merită menționat, așa cum precizează @tehlivi - WP folosește o versiune veche de jQuery - ar trebui să iei în considerare dezînregistrarea și înregistrarea unei versiuni mai noi.

skolind skolind
8 mar. 2018 11:24:00

Acest cod mi-a returnat o eroare 500. Am WordPress 4.9.9

Marco Panichi Marco Panichi
8 ian. 2019 11:18:04

@MarcoPanichi poate ai o temă sau un plugin conflictual? Poți încerca pe o instalare nouă de WordPress fără pluginuri adăugate și folosind tema implicită?

Matthew Boynes Matthew Boynes
8 ian. 2019 16:32:38

@MatthewBoynes Cred că ai dreptate. Pe o altă instalare funcționează.

Marco Panichi Marco Panichi
9 ian. 2019 14:36:31

@MatthewBoynes Încă caut mai mulți developeri care doresc să ajute la întreținerea unui proiect open source, vezi: https://wordpress.org/plugins/jquery-manager/ și https://github.com/Remzi1993/jquery-manager acest plugin / proiect ar trebui să ajute utilizatorii să folosească cea mai recentă versiune de jQuery cu un simplu click.

Remzi Cavdar Remzi Cavdar
4 iul. 2019 12:57:46

Funcționează, dar 1 este un "număr magic". Dacă se schimbă, acest cod va ceda. Și din păcate nu știm ce reprezintă, așa că nu putem să-l înlocuim cu o constantă. Știe cineva cu adevărat la ce se referă??

lonix lonix
8 dec. 2019 08:16:22

Parametrul 1 răspunde la întrebarea "Ar trebui să mutăm scriptul în footer?" în funcție - Cred că înseamnă "true".

Simo Patrek Simo Patrek
16 ian. 2020 23:33:53

funcționează destul de bine în WordPress 5.6, mulțumesc omule :)

sorrow poetry sorrow poetry
22 feb. 2021 17:48:30
Arată celelalte 11 comentarii
8
29

Pentru a face acest lucru, va trebui mai întâi să deregistrezi scriptul jQuery și apoi să-l înregistrezi din nou. Dacă folosești jQuery inclus în WordPress, atunci următoarea funcție este cea pe care o cauți.

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' );

Dacă folosești versiunea de jQuery găzduită pe Google CDN, atunci dă-mi de veste și voi modifica acest cod pentru URL-ul Google CDN.

30 dec. 2014 22:23:44
Comentarii

Am încercat asta și încă este în subsol, ai vreo idee de ce?

Toni Michel Caubet Toni Michel Caubet
3 sept. 2015 13:05:06

Ce vrei să spui? Soluția este despre mutarea jQuery în subsol.

Robert hue Robert hue
3 sept. 2015 13:58:17

Poate fi necesar să verifici și is_admin() pentru a evita modificări asupra jQuery din backend, la urma urmei avem nevoie să optimizăm doar partea frontală a site-urilor noastre :)

Tim Malone Tim Malone
21 oct. 2016 01:10:07

@TimMalone - de fapt, nu este necesar - wp_enqueue_scripts este folosit doar pe front-end, în timp ce admin_enqueue_scripts este utilizat pentru back-end

dev_masta dev_masta
4 mar. 2017 19:18:55

Uneori nu funcționează pentru că un plugin își adaugă scriptul cu parametrul "in_footer" setat pe false. Acest lucru determină mutarea scriptului jquery în head.

Pons Pons
8 mar. 2017 15:42:49

Cred că această soluție este de fapt groaznică. Sunt eliminate tag-urile de versiune cu asta. Ce este acest starter-style și ce este acest includes.min.js și ce legătură are cu jQuery.

NextGenThemes NextGenThemes
31 iul. 2017 12:09:46

@redanimalwar fișierele starter-style și includes sunt luate direct din întrebare.

tehlivi tehlivi
16 ian. 2018 20:43:14

@Roberthue încă caut dezvoltatori care doresc să ajute la întreținerea unui proiect open source, vezi: https://wordpress.org/plugins/jquery-manager/ și https://github.com/Remzi1993/jquery-manager acest plugin/proiect ar trebui să ajute utilizatorii să folosească cea mai recentă versiune de jQuery cu un simplu click.

Remzi Cavdar Remzi Cavdar
4 iul. 2019 12:56:32
Arată celelalte 3 comentarii
7
25

O soluție mai bună:

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 );
}

De ce este mai bună decât răspunsul acceptat, în opinia mea

  1. Modifică la nivel de nucleu, nu într-o etapă ulterioară unde alte lucruri ar fi putut deja interveni.
  2. Șirul versiunii este păstrat și nu este eliminat!
  3. Nu dezînregistrează și înregistrează din nou un script, ci doar setează valoarea grupului, care este în esență același lucru ca și cum scriptul ar fi fost înregistrat cu $footer = true.

Despre a nu face acest lucru în admin

Dacă plugin-urile adaugă cod jQuery inline în wp_head, acesta va eșua atunci când jQuery nu este încărcat în acel moment, așa că vă sugerez să evitați acest lucru până când aveți milioane de utilizatori care editează site-ul și încercați să optimizați performanța admin-ului. Acest lucru este valabil și pentru frontend, așa că ar trebui să fiți atenți la teme sau plugin-uri prost scrise care presupun că jQuery este în head prin utilizarea de cod jQuery inline. WP și plugin-urile înregistrează alte scripturi în head-ul admin-ului cu jQuery în dependențe, așa că oricum nu ar funcționa, cred.

Despre faptul că nu funcționează

Trebuie să fiți conștienți că dacă orice alt script este încărcat în head care are jQuery în dependențele sale, acesta va determina și jQuery să se încarce în head chiar înaintea sa. Și acest lucru este bun și de așteptat, acesta fiind motivul pentru care există sistemul wp_enqueue. Acest lucru înseamnă că veți afla în curând dacă utilizați câteva plugin-uri că unul dintre ele va determina încărcarea jQuery în head. Acesta este comportamentul implicit pentru scripturile încărcate, din păcate.

Soluție radicală

Cred că va strica orice JS inline care presupune jQuery, dar asta ar trebui să fie rar. Acest lucru va forța toate scripturile să se încarce în footer, indiferent de modul în care sunt încărcate.

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 );
}
26 sept. 2016 23:50:35
Comentarii

Deși acest răspuns poate răspunde la întrebare și are câteva puncte valoroase de luat în considerare, conține prea mult zgomot (informații redundante?) și este foarte asemănător cu răspunsurile postate anterior, având doar mici îmbunătățiri de cod. Ar putea fi mai bine primit dacă ar fi editat și condensat într-o versiune mai informativă. De asemenea, nu este nevoie să menționezi anumiți utilizatori sau răspunsuri (deoarece acestea s-ar putea să nu mai existe în viitor din diverse motive).

Howdy_McGee Howdy_McGee
21 oct. 2016 23:38:00

Tu numești "mici îmbunătățiri de cod" ceva care nu a fost deloc menționat și care este probabil mai bun decât orice altceva prezentat în alte răspunsuri. Ei bine, acest lucru este pur și simplu neadevărat. De asemenea, nu am "atacat" pe nimeni, am menționat doar fapte pe care le cunosc pentru a îmbunătăți stilul de codare și a educa cititorii, astfel încât să scrie cod mai bun. Serios, am petrecut destul de mult timp să scriu cel mai bun răspuns de până acum și asta este ceea ce primesc în schimb.

NextGenThemes NextGenThemes
21 oct. 2016 23:58:46

Celelalte răspunsuri nu menționează nimic despre alte scripturi care forțează încărcarea jQuery în head, de fapt răspunsul meu elimină confuzia pentru cei care nu înțeleg de ce nu funcționează. Niciunul dintre celelalte răspunsuri nu menționează riscurile potențiale...

NextGenThemes NextGenThemes
22 oct. 2016 00:03:02

Acest cod (la fel ca codul din răspunsul de mai sus) mi-a returnat o eroare 500. Am WordPress 4.9.9

Marco Panichi Marco Panichi
8 ian. 2019 11:19:46

Greu de crezut că acest cod provoacă o eroare 500, probabil ai făcut o greșeală în implementarea acestuia în codul tău. Acesta nu este chiar locul potrivit pentru a întreba, iar versiunea ta depășită de WP nu oferă suficiente informații.

NextGenThemes NextGenThemes
9 ian. 2019 20:19:59

@NextGenThemes Încă caut mai mulți developeri care doresc să ajute la întreținerea unui proiect open source, vezi: https://wordpress.org/plugins/jquery-manager/ și https://github.com/Remzi1993/jquery-manager acest plugin/proiect ar trebui să ajute utilizatorii să folosească cea mai recentă versiune de jQuery cu un simplu click.

Remzi Cavdar Remzi Cavdar
4 iul. 2019 12:57:28

Salut omule, grozava soluția ta radicală, exact ce căutam. Poate că răspunsul tău e oarecum similar cu cel de mai sus, dar e mai clar, sănătate!

Andres Felipe Andres Felipe
10 dec. 2020 17:01:35
Arată celelalte 2 comentarii
1

Am dezvoltat un plugin pentru această problemă specifică. Acest plugin nu interferează cu jQuery din WordPress, deoarece este încărcat doar în front-end. Vezi: jQuery Manager for WordPress

De ce încă un instrument pentru actualizarea/gestionarea/dezvoltarea/debugarea jQuery?

Pentru că niciunul dintre instrumentele pentru dezvoltatori nu vă permite să selectați o versiune specifică de jQuery și/sau jQuery Migrate. Oferind atât versiunea comprimată minificată/producție, cât și versiunea necomprimată/de dezvoltare. Vezi caracteristicile de mai jos!

✅ Executat doar în front-end, nu interferează cu administrarea WordPress sau cu personalizatorul WP (din motive de compatibilitate) Vezi: https://core.trac.wordpress.org/ticket/45130 și https://core.trac.wordpress.org/ticket/37110

Activează/dezactivează jQuery și/sau jQuery Migrate

✅ Activează o versiune specifică de jQuery și/sau jQuery Migrate

Și multe altele! Codul este open source, așa că îl puteți studia, învăța din el și contribui.


Aproape toată lumea folosește handle-ul incorect

WordPress folosește de fapt handle-ul jquery-core, nu 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' );

Handle-ul jquery este doar un alias pentru încărcarea jquery-core cu jquery-migrate

Mai multe informații despre aliasuri: wp_register_script multiple identifiers?

Modul corect de a face acest lucru

În exemplul meu de mai jos folosesc CDN-ul oficial jQuery de la https://code.jquery.com. De asemenea, folosesc script_loader_tag pentru a putea adăuga câteva atribute CDN.
Puteți folosi următorul cod:

// Front-end, neexecutat în administrarea WP și personalizatorul WP (din motive de compatibilitate)
// Vezi: https://core.trac.wordpress.org/ticket/45130 și 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 'Suntem în administrarea WP sau în personalizatorul WP';
        return;
    }
    else {
        // Deregistrează jQuery din nucleul WP, vezi https://github.com/Remzi1993/wp-jquery-manager/issues/2 și https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
        wp_deregister_script( 'jquery' ); // handle-ul jquery este doar un alias pentru încărcarea jquery-core cu jquery-migrate
        // Deregistrează jQuery WP
        wp_deregister_script( 'jquery-core' );
        // Deregistrează jQuery Migrate WP
        wp_deregister_script( 'jquery-migrate' );

        // Înregistrează jQuery în head
        wp_register_script( 'jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), null, false );

        /**
         * Înregistrează jquery folosind jquery-core ca dependență, astfel încât alte scripturi să poată folosi handle-ul jquery
         * vezi https://wordpress.stackexchange.com/questions/283828/wp-register-script-multiple-identifiers
         * Mai întâi înregistrăm scriptul și apoi îl încărcăm, vezi de ce:
         * https://wordpress.stackexchange.com/questions/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * https://stackoverflow.com/questions/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 );
4 iul. 2019 13:06:13
Comentarii

Aceasta plasează jQuery în head (conform comentariului tău inline) și nu este un răspuns pentru OP.

Pim Schaaf Pim Schaaf
30 ian. 2020 19:58:28
0
add_action("wp_enqueue_scripts", "myscripts");

function myscripts() { 
   wp_enqueue_script( 'jquery' , '', array(), true); //adevărat pentru footer
   wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true );
}
18 mai 2019 00:10:41
4
-3

Hei, schimbă doar codul tău astfel

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' );

cred că va funcționa bine

adaugă aceste linii în fișierul tău functions.php

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

apoi va adăuga scripturile în subsolul paginii

30 dec. 2014 22:05:33
Comentarii

Aceasta pune jQuery în head. Am nevoie de el în footer.

Desi Desi
30 dec. 2014 22:06:09

Hei Desi, te rog verifică răspunsul editat, cred că te va ajuta

Amit Mishra Amit Mishra
30 dec. 2014 22:13:17

Sunt sigur că aceasta este o idee proastă - ai împiedicat efectiv încărcarea oricărui script în header, nu doar jQuery, și s-ar putea să încarci scripturile de două ori (nu am analizat atât de profund). De fapt, probabil ai nevoie doar de partea cu remove_action / add_action dacă vei proceda în acest fel.

drzaus drzaus
26 ian. 2016 22:34:21

Într-adevăr o idee groaznică, nu face asta!

NextGenThemes NextGenThemes
26 sept. 2016 23:50:23