Caricare jQuery Core nel footer?

30 dic 2014, 21:44:44
Visualizzazioni: 64.1K
Voti: 33

Ho questo codice nel mio file functions.php e non riesco a far caricare jQuery nel footer. Il file includes si carica correttamente nel footer. Cos'altro devo fare?

function starter_scripts() {
    // Carica il foglio di stile principale
    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );

    // Tentativo di caricare jQuery
    wp_enqueue_script( 'jquery', '', '', '', true );

    // Carica il file includes minimizzato
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );
2
Commenti

Se lo stai facendo per motivi di prestazioni, potresti considerare di aggiungere defer ai tuoi tag script: https://matthewhorne.me/defer-async-wordpress-scripts/

diachedelic diachedelic
25 ago 2017 07:06:09

Sviluppatore WP qui, ho creato un plugin per gestire questo: https://wordpress.org/plugins/jquery-manager/

Remzi Cavdar Remzi Cavdar
4 lug 2019 12:55:20
Tutte le risposte alla domanda 6
16
61

Ecco un'altra opzione che evita di dover deregistrare e registrare nuovamente:

/**
 * Sposta jQuery nel 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' );

Questa soluzione emula il core di WordPress impostando il group a 1, che è il modo in cui WordPress determina se uno script dovrebbe essere nel footer o meno (non sono a conoscenza del motivo per cui viene usato 1, come ha notato @jgraup nei commenti sembra un po' arbitrario).

7 mag 2016 17:11:29
Commenti

Interessante. Sembra che wp_register_script utilizzi add_data( $handle, 'group', 1 ) per spostare gli script nel footer. https://core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/functions.wp-scripts.php#L117 - Potresti approfondire il motivo? A prima vista, 'group' sembra un po' arbitrario. Ma posso vedere in https://core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/class.wp-scripts.php#L231 come viene utilizzato successivamente in WP_Scripts->do_item. In ogni caso, questa sembra essere la soluzione meno distruttiva.

jgraup jgraup
7 mag 2016 21:37:30

Spero che qualcuno possa commentare ulteriormente queste tre risposte votate positivamente. Sono tutte diverse e richiedono una certa conoscenza di WP. Poiché Google richiede che questi script siano sotto la piega (below the fold), questo è un argomento importante.

ssaltman ssaltman
18 mag 2016 16:32:12

Migliore risposta! Nota: funziona da WordPress 4.2.0 e va usata nel file functions.php all'interno dell'hook 'wp_enqueue_scripts' callback

realmag777 realmag777
1 lug 2016 21:22:28

Ciao, ho provato l'approccio sopra indicato, ma non ha funzionato. Qualcuno può aiutarmi?

iSaumya iSaumya
31 ago 2016 15:13:44

@iSaumya Dovresti aggiungere qualche dettaglio sul perché non ha funzionato / cosa è successo. È una richiesta piuttosto criptica! Vedi anche l'altra nuova risposta, e tieni presente che questa risposta deve ancora essere racchiusa in una chiamata di funzione e filtro.

Tim Malone Tim Malone
21 ott 2016 01:08:19

@tim Ho provato quel metodo ma ancora non sposta lo script nel footer. Questo è quello che è successo.

iSaumya iSaumya
21 ott 2016 01:10:36

@iSaumya Ho aggiunto alcuni dettagli aggiuntivi per te, spero che sia utile!

Matthew Boynes Matthew Boynes
22 ott 2016 02:41:27

WordPress utilizza una versione così vecchia di jQuery, a questo punto è meglio deregistrarla e registrarne una versione più recente.

tehlivi tehlivi
16 gen 2018 21:27:33

È fantastico! Grazie mille. Ma vale la pena notare, come dice @tehlivi, che WP usa una vecchia versione di jQuery - considera di deregistrarla e registrarne una più nuova.

skolind skolind
8 mar 2018 11:24:00

Questo codice mi ha restituito un errore 500. Ho WordPress 4.9.9

Marco Panichi Marco Panichi
8 gen 2019 11:18:04

@MarcoPanichi forse hai un tema o un plugin in conflitto? Puoi provarlo su una nuova installazione pulita di WordPress senza plugin aggiunti e usando il tema predefinito?

Matthew Boynes Matthew Boynes
8 gen 2019 16:32:38

@MatthewBoynes penso che tu abbia ragione. Su un'altra installazione funziona.

Marco Panichi Marco Panichi
9 gen 2019 14:36:31

@MatthewBoynes Sto ancora cercando altri sviluppatori che desiderino aiutare a mantenere un progetto open source, vedi: https://wordpress.org/plugins/jquery-manager/ e https://github.com/Remzi1993/jquery-manager questo plugin/progetto dovrebbe aiutare gli utenti a utilizzare l'ultima versione di jQuery con un semplice click.

Remzi Cavdar Remzi Cavdar
4 lug 2019 12:57:46

Questo funziona ma 1 è un "numero magico". Se cambia, questo codice si romperà. E purtroppo non sappiamo cosa rappresenta, quindi non possiamo sostituirlo con una costante. Qualcuno sa effettivamente a cosa si riferisce??

lonix lonix
8 dic 2019 08:16:22

Il parametro 1 risponde alla domanda "Dovremmo spostare lo script nel footer?" nella funzione - Significa "true" penso.

Simo Patrek Simo Patrek
16 gen 2020 23:33:53

funziona abbastanza bene con WordPress 5.6, grazie mille :)

sorrow poetry sorrow poetry
22 feb 2021 17:48:30
Mostra i restanti 11 commenti
8
29

Per fare questo, dovrai prima deregistrare il tuo script jQuery e poi registrarlo nuovamente. Se utilizzi jQuery che viene fornito con WordPress, allora la seguente è la funzione che stai cercando.

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

Se invece utilizzi la versione di jQuery ospitata su Google CDN, fammelo sapere e modificherò questo codice con l'URL di Google CDN.

30 dic 2014 22:23:44
Commenti

Ho provato questo ma è ancora nel footer, qualche idea sul perché?

Toni Michel Caubet Toni Michel Caubet
3 set 2015 13:05:06

Cosa intendi? La soluzione riguarda lo spostamento di jQuery nel footer.

Robert hue Robert hue
3 set 2015 13:58:17

Potresti anche aver bisogno di verificare is_admin() per evitare di modificare il jQuery del backend, dopo tutto abbiamo davvero bisogno di ottimizzare solo il frontend dei nostri siti :)

Tim Malone Tim Malone
21 ott 2016 01:10:07

@TimMalone - in realtà, non è necessario - wp_enqueue_scripts viene utilizzato solo sul front end mentre admin_enqueue_scripts è utilizzato per il back end

dev_masta dev_masta
4 mar 2017 19:18:55

A volte non funziona perché un plugin aggiunge il suo script con il parametro "in_footer" impostato su false. Questo causa lo spostamento dello script jquery nell'head.

Pons Pons
8 mar 2017 15:42:49

Penso che questa soluzione sia in realtà orribile. I tag di versione vengono rimossi con questo. Cos'è questo starter-style e cos'è includes.min.js e cosa c'entra con jQuery.

NextGenThemes NextGenThemes
31 lug 2017 12:09:46

@redanimalwar lo stile iniziale e i file inclusi provengono direttamente dalla domanda.

tehlivi tehlivi
16 gen 2018 20:43:14

@Roberthue sto ancora cercando altri sviluppatori che vogliano aiutare a mantenere un progetto open source, vedi: https://wordpress.org/plugins/jquery-manager/ e https://github.com/Remzi1993/jquery-manager questo plugin/progetto dovrebbe aiutare gli utenti a utilizzare l'ultima versione di jQuery con un semplice click.

Remzi Cavdar Remzi Cavdar
4 lug 2019 12:56:32
Mostra i restanti 3 commenti
7
25

Una soluzione migliore:

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

Perché è migliore della risposta accettata secondo me

  1. Modifica il core stesso e non in una fase successiva dove altri elementi potrebbero già averci lavorato.
  2. La stringa della versione viene mantenuta e non rimossa!
  3. Non annulla e ri-registra uno script ma imposta semplicemente il valore del gruppo che è essenzialmente lo stesso che si otterrebbe registrando lo script con $footer = true.

Sul non farlo nell'admin

Se i plugin aggiungono jQuery inline a wp_head, falliranno quando jQuery non è caricato in quel punto, quindi suggerisco di evitarlo finché non avete milioni di utenti che modificano il vostro sito e cercate di ottimizzare le prestazioni dell'admin. Questo vale anche per il frontend, quindi dovreste fare attenzione a temi o plugin codificati male che presuppongono jQuery nell'head usando codice jQuery inline. WP e i plugin registrano altri script nell'head dell'admin con jQuery tra le dipendenze, quindi comunque non funzionerebbe, credo.

Se non funziona

Dovete essere consapevoli che se qualsiasi altro script viene caricato nell'head che ha jQuery tra le sue dipendenze, farà caricare jQuery nell'head proprio prima di sé stesso. E questo è buono e previsto, è il motivo per cui esiste il sistema wp_enqueue. Questo significa che scoprirete presto, se usate alcuni plugin, che uno di loro richiederà jQuery nell'head. È il default per gli script enqueued, purtroppo.

Soluzione Radicale

Penso che romperà qualsiasi JS inline che presuppone jQuery, ma dovrebbe essere raro. Questo forzerà tutti gli script nel footer indipendentemente da come sono stati enqueued.

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 set 2016 23:50:35
Commenti

Anche se questo potrebbe rispondere alla domanda e contiene alcuni spunti interessanti su cui riflettere, c'è troppo rumore (superfluo?) nella risposta ed è molto simile alle risposte precedentemente pubblicate con solo piccoli miglioramenti al codice. Potrebbe essere meglio accolta se venisse modificata e ridotta a una versione più informativa. Inoltre non c'è una reale necessità di menzionare specifici utenti o risposte (poiché potrebbero non esistere più in futuro per qualsiasi motivo).

Howdy_McGee Howdy_McGee
21 ott 2016 23:38:00

Definisci "piccoli miglioramenti al codice" qualcosa di completamente non menzionato e probabilmente migliore di qualsiasi altra cosa citata nelle altre risposte. Be', questo semplicemente non è vero. Inoltre non ho "messo in evidenza" nessuno, ho solo menzionato fatti che conosco per migliorare lo stile di codifica e educare i lettori al riguardo, per aiutarli a scrivere codice migliore. Seriamente, ho impiegato parecchio tempo per scrivere finora la migliore risposta qui e questo è quello che ottengo in cambio.

NextGenThemes NextGenThemes
21 ott 2016 23:58:46

Le altre risposte non menzionano nulla riguardo ad altri script che forzano jQuery nell'head, infatti la mia risposta elimina la confusione per le persone che non capiscono perché non funziona. Nessuna delle altre risposte menziona i potenziali rischi...

NextGenThemes NextGenThemes
22 ott 2016 00:03:02

Questo codice (così come il codice della risposta sopra) mi ha restituito un errore 500. Ho WordPress 4.9.9

Marco Panichi Marco Panichi
8 gen 2019 11:19:46

Difficile credere che questo codice causi un 500, probabilmente hai fatto un errore nell'implementazione nel tuo codice. Questo non è proprio il posto giusto per chiedere e la tua versione obsoleta di WP è difficilmente informazione sufficiente.

NextGenThemes NextGenThemes
9 gen 2019 20:19:59

@NextGenThemes Sto ancora cercando altri sviluppatori che desiderino aiutare a mantenere un progetto open source, vedi: https://wordpress.org/plugins/jquery-manager/ e https://github.com/Remzi1993/jquery-manager questo plugin/progetto dovrebbe aiutare gli utenti a utilizzare l'ultima versione di jQuery con un semplice click.

Remzi Cavdar Remzi Cavdar
4 lug 2019 12:57:28

Ciao, fantastica la tua soluzione radicale, è proprio quello che stavo cercando. Forse la tua risposta è in qualche modo simile a quella sopra, ma è più chiara, grazie!

Andres Felipe Andres Felipe
10 dic 2020 17:01:35
Mostra i restanti 2 commenti
1

Ho sviluppato un plugin per questo problema specifico. Questo plugin non interferisce con jQuery di WordPress poiché viene caricato solo nel front-end. Vedi: jQuery Manager for WordPress

Perché un altro strumento per aggiornare/gestire jQuery per sviluppatori/debug?

Perché nessuno degli strumenti esistenti ti permette di selezionare una versione specifica di jQuery e/o jQuery Migrate. Fornendo sia la versione compressa (minificata/produzione) che quella non compressa (sviluppo). Vedi le funzionalità qui sotto!

✅ Eseguito solo nel front-end, non interferisce con l'admin/backend di WordPress e il customizer (per motivi di compatibilità) Vedi: https://core.trac.wordpress.org/ticket/45130 e https://core.trac.wordpress.org/ticket/37110

Attiva/disattiva jQuery e/o jQuery Migrate

✅ Attiva una versione specifica di jQuery e/o jQuery Migrate

E molto altro! Il codice è open source, quindi puoi studiarlo, imparare da esso e contribuire.


Quasi tutti utilizzano l'handle sbagliato

WordPress in realtà utilizza l'handle jquery-core, non 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' );

L'handle jquery è solo un alias per caricare jquery-core con jquery-migrate

Vedi maggiori informazioni sugli alias: wp_register_script multiple identifiers?

Il modo corretto per farlo

Nel mio esempio qui sotto utilizzo il CDN ufficiale di jQuery su https://code.jquery.com Uso anche script_loader_tag così da poter aggiungere alcuni attributi CDN.
Puoi utilizzare il seguente codice:

// Front-end non eseguito nell'admin di WP e nel customizer (per motivi di compatibilità)
// Vedi: https://core.trac.wordpress.org/ticket/45130 e 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 'Siamo nell'admin di WP o nel Customizer';
        return;
    }
    else {
        // Deregistra jQuery core di WP, vedi https://github.com/Remzi1993/wp-jquery-manager/issues/2 e https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
        wp_deregister_script( 'jquery' ); // l'handle jquery è solo un alias per caricare jquery-core con jquery-migrate
        // Deregistra jQuery di WP
        wp_deregister_script( 'jquery-core' );
        // Deregistra jQuery Migrate di WP
        wp_deregister_script( 'jquery-migrate' );

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

        /**
         * Registra jquery usando jquery-core come dipendenza, così altri script possono usare l'handle jquery
         * vedi https://wordpress.stackexchange.com/questions/283828/wp-register-script-multiple-identifiers
         * Prima registriamo lo script e dopo lo enqueue, vedi perché:
         * 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 lug 2019 13:06:13
Commenti

Questo posiziona jQuery nell'head (come da tuo commento inline) e non è una risposta per l'OP.

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

function myscripts() { 
   wp_enqueue_script( 'jquery' , '', array(), true); //true per il footer
   wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true );
}
18 mag 2019 00:10:41
4
-3

Ehi, cambia il tuo codice in questo modo

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

Penso che funzionerà bene

Aggiungi queste righe nel tuo file functions.php

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

Così gli script verranno aggiunti nel footer

30 dic 2014 22:05:33
Commenti

Questo inserisce jQuery nell'head. Ho bisogno che sia nel footer.

Desi Desi
30 dic 2014 22:06:09

Ciao Desi, per favore controlla la risposta modificata, penso possa aiutarti

Amit Mishra Amit Mishra
30 dic 2014 22:13:17

Sono abbastanza sicuro che questa sia una pessima idea - hai effettivamente impedito a qualsiasi script di caricarsi nell'header, non solo jQuery, e potresti stare facendo un doppio enqueue degli script (non ho approfondito). In effetti, probabilmente ti servirebbero solo le parti remove_action / add_action se vuoi procedere in questo modo.

drzaus drzaus
26 gen 2016 22:34:21

Davvero un'idea terribile, non farlo!

NextGenThemes NextGenThemes
26 set 2016 23:50:23