Caricare jQuery in WordPress

Question

Caricare jQuery in WordPress

29 lug 2012, 15:09:30

Visualizzazioni: 36.5K

Voti: 2

Sto costruendo il mio primo tema da zero in WordPress 3.4.1 e so che WordPress ha già l'ultima versione di jQuery via Google. Ho letto dei problemi che possono verificarsi se lo script non viene chiamato correttamente, quindi voglio cercare di mantenere tutto il più possibile vicino al codice raccomandato. Voglio assicurarmi che lo script sia caricato, cosa che credo venga eseguita dal seguente script PHP nel file functions.php (preso dal Codex WordPress).

<?php
function my_scripts_method() {
wp_enqueue_script( 'jquery' );
}

Vorrei essenzialmente avere un menu personalizzato usando jQuery, quindi è solo questione di inserire lo script che voglio attivare nell'header o nella sezione PHP?

Inoltre, se volessi caricare un altro script che non è già incluso in WordPress, devo semplicemente aggiungere il seguente PHP al codice sopra nel file functions.php?

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Me la cavo con HTML e CSS ma PHP e JavaScript sono relativamente nuovi per me, ogni aiuto è molto apprezzato.

Grazie,

Ant

157

jquery wp enqueue script

Commenti

possibile duplicato di Dove è il posto giusto per registrare/enqueue script e stili

Chris_O

30 lug 2012 15:29:17

Tutte le risposte alla domanda

Devi utilizzare wp_enqueue_script per caricare lo script del tuo tema, la funzione wp_register_script registra solo lo script con una parola chiave.

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Questo semplicemente registrerà un nuovo script con il nome jqueryexample e potrai caricare quello script quando necessario utilizzando la funzione wp_enqueue_script.

Ecco un codice di esempio per caricare uno script già registrato come jQuery e un nuovo script personalizzato come jQuery Example

<?php
function wpse_60056_load_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
    wp_enqueue_script( 'jqueryexample' );

}    
add_action('wp_enqueue_scripts', 'wpse_60056_load_scripts');
?>

Tuttavia puoi utilizzare solo la funzione wp_enqueue_scripts per caricare un JavaScript remoto, ecco un esempio -

wp_enqueue_script('jqueryexample','http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Amit Kosti

3.61K

29 lug 2012 15:56:05

Commenti

Amit, grazie per questo, mi era sfuggito prima, davvero apprezzato.

Ant

29 lug 2012 16:24:44

+1 Nota: dalla versione 3.3 puoi usare wp_enqueue_script all'interno dei callback degli shortcode/widget (o comunque nel body della pagina). Questo significa che puoi registrare uno script sull'hook wp_enqueue_scripts e poi caricarlo effettivamente solo quando serve.

Stephen Harris

29 lug 2012 16:57:46

Utile da sapere, immagino che tutto si riduca all'ottimizzazione della pagina web, grazie Stephen.

Ant

29 lug 2012 17:19:07

Quando carichi uno script come suggerisce Stephen Harris, gli script verranno posizionati nel footer. Tieni presente questo aspetto se il tuo script deve essere caricato prima di altri. Inoltre, se desideri forzare il caricamento di uno script nel footer, puoi impostare il quinto argomento di 'wp_enqueue_scripts' o 'wp_register_script' su true (Codex: http://codex.wordpress.org/Function_Reference/wp_enqueue_script).

W van Dam

29 lug 2012 18:55:06

Commenti

W van Dam, grazie mille per la risposta fulminea e per le informazioni, metterò in pratica tutto. Al momento ho solo 1 tema (non voglio correre prima di saper camminare) ma è interessante quello che dici riguardo ai plugin. Saluti, Ant

Ant

29 lug 2012 15:56:46

Di nulla. Amit aggiunge anche un buon punto. Qualsiasi script che registri, devi anche accodarlo. Un altro consiglio: se hai bisogno di jQuery solo su una o pagine specifiche, usa i tag condizionali come is_home() per caricare lo script solo su quelle pagine. Questo rende il tuo sito più efficiente. Probabilmente non è rilevante per il tuo caso d'uso attuale, ma potrebbe esserti utile in futuro. (Pagina Codex: http://codex.wordpress.org/Conditional_Tags)

W van Dam

29 lug 2012 16:02:17

Dam, questo è ottimo e lo terrò a mente, voglio assicurarmi che la velocità del sito web rimanga elevata quindi ha senso quello che dici. Vorrei solo poter utilizzare alcune transizioni CSS3 ma IE mi delude su questo fronte e sono piuttosto facili da codificare.

Ant

29 lug 2012 17:24:55

Nessun problema. PS. Potresti votare o accettare la mia risposta? Vorrei aggiungere un commento a quanto detto da Stephen Harris sopra, ma attualmente mi manca ancora 1 voto per poter commentare le risposte degli altri. Stack exchange è fantastico, ma anche fastidioso in alcuni aspetti.

W van Dam

29 lug 2012 17:44:42

Fatto, nessun problema. Immagino che il sistema di ricompensa funzioni in un certo modo e che i punti siano un po' come premi, almeno qui ho ottenuto risposte velocemente.

Ant

29 lug 2012 18:24:03

Mostra i restanti 6 commenti

W van Dam 196 · Accepted Answer · 2012-07-29T15:44:39Z

Stai procedendo nella giusta direzione, ma manca un pezzo:

add_action('wp_enqueue_scripts', 'my_scripts_method');

add_action ti permette di eseguire codice in momenti specifici durante il caricamento della pagina o in risposta a eventi specifici. L'azione sopra indica a WordPress di eseguire la tua funzione quando sta aggiungendo gli script all'elemento head dell'html. La tua funzione a sua volta istruisce WordPress ad aggiungere lo script jQuery.

Lo stesso vale per la registrazione di un nuovo script, ma con un hook diverso:

add_action('wp_enqueue_scripts', 'my_register_script_method');

function my_register_script_method () {
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

Se stai sovrascrivendo uno script pre-registrato, dovresti prima deregistrare quello script. Io uso qualcosa come il seguente codice per sostituire lo script jquery (nota: leggi il 2° edit alla fine):

function my_register_script_method () {
    wp_deregister_script('jquery');
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

Per quanto riguarda dove dovresti inserire questo codice. Se il codice è specifico per il tema, dovresti inserirlo in functions.php nella cartella del tuo tema. Se intendi riutilizzare il codice su più temi, sarebbe più facile mantenere un plugin con tutto il codice condiviso.

Edit: Come nota Stephen Harris qui sotto, da WordPress 3.3 puoi anche usare wp_enqueue_scripts dopo che wp_head è stato attivato, ad esempio negli shortcode o nei widget. Lo js verrà quindi caricato nel footer.

Edit 2: Per jQuery e altre librerie ospitate da Google è raccomandato che tu usi http://wordpress.org/extend/plugins/use-google-libraries/ Leggi i commenti per una motivazione di Otto.