Caricare jQuery Core nel footer?
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' );

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).

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.

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.

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

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

@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 Ho provato quel metodo ma ancora non sposta lo script nel footer. Questo è quello che è successo.

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

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

È 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.

@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?

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

@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.

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??

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

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.

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

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

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 :)

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

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.

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.

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

@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.

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
- Modifica il core stesso e non in una fase successiva dove altri elementi potrebbero già averci lavorato.
- La stringa della versione viene mantenuta e non rimossa!
- 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 );
}

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).

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.

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...

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

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 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.

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:
// 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 );

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

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

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.
