Come Collegare File jQuery/Javascript Esterni con WordPress

Question

Come Collegare File jQuery/Javascript Esterni con WordPress

17 ago 2010, 15:04:23

Visualizzazioni: 22.9K

Voti: 15

Sto utilizzando Starkers come base per il mio prossimo tema WP e ho riscontrato un piccolo problema. Stavo includendo la mia versione di jQuery nel file header.php, ma ispezionando il sito con Firebug ho notato che jQuery veniva scaricato due volte. Facendo alcune ricerche, ho scoperto che non solo stavo includendo il file, ma lo faceva anche la funzione wp_head().

Nel tentativo di risolvere il problema, ho notato un commento nel file header, che originariamente proveniva dal tema Twenty Ten:

/* Inserisci sempre wp_head() prima del tag di chiusura </head>
 * del tuo tema, altrimenti romperai molti plugin, che
 * generalmente usano questo hook per aggiungere elementi a <head>, come 
 * stili, script e meta tag
 */

Ecco il mio problema: sono convinto che il file jQuery debba essere impostato prima di qualsiasi altro file che voglia utilizzarlo e che wp_head() dovrebbe essere l'ultima cosa nell'elemento <head>. Sono un po' confuso ora perché mi chiedo se dovrei mettere wp_head() all'inizio in modo che il file jQuery incluso da WP venga utilizzato per tutti i miei plugin, anche se viene specificato di non farlo.

Ho commentato la riga jQuery nella funzione wp_head() ma è necessaria per la pagina di amministrazione, quindi ho dovuto ripristinarla.

Vorrei anche utilizzare (o almeno sperimentare) la versione jQuery dalla CDN di Google, ma non voglio includerla due volte!

Spero che capiate cosa sto cercando di spiegare, qualsiasi suggerimento su come posso risolvere questo problema sarebbe molto apprezzato. Gradirei anche consigli su come gestite i vostri file JavaScript nel file header.

Grazie!

Ben Everard

1.28K

temi personalizzazione sviluppo temi jquery wp head

Commenti

Dovrebbe essere rinominato in qualcosa come "Come collegare file jQuery/Javascript esterni con WordPress."

MikeSchinkel

17 ago 2010 23:26:47

Sono d'accordo, non ero sicuro di come chiamarlo perché non conoscevo bene il problema che avevo :-)

Ben Everard

18 ago 2010 12:51:29

Tutte le risposte alla domanda

Commenti

Hai ragione nel pensare che sto aggiungendo script usando il tag <script>, questa è l'alternativa che cercavo, grazie mille! :-)

Ben Everard

17 ago 2010 16:19:45

Se vuoi aggiungere il tuo script solo sul front end, agganciati a 'template_redirect' invece che a 'init'.

John P Bloch

17 ago 2010 17:08:29

Ottimo, aggiornerò la mia risposta. Stavo quasi per suggerire di racchiudere l'enqueue in is_admin().

User

17 ago 2010 17:35:33

Generalmente includo gli script nel file del template sopra il get_header(), farlo in functions.php li includerebbe in ogni pagina cosa che potrebbe non essere necessaria. Se ho uno script globale, lo includo in header.php prima che venga chiamato wp_head(). In questo modo le inclusioni sono dove ti aspetteresti di trovarle nel <head>

Joe Hoyle

17 ago 2010 21:47:22

A volte è meglio aggiungere gli script in fondo alla pagina. È l'ultimo parametro di http://codex.wordpress.org/Function_Reference/wp_enqueue_script (il 5°, $in_footer), impostalo a true. Piccola informazione per chi ha bisogno di più controllo.

hakre

18 ago 2010 14:55:39

Mostra i restanti 1 commenti

Ti consiglio di dare un'occhiata a 5 Consigli per usare jQuery con WordPress. Tra le altre cose, mostra il codice necessario per caricare jQuery dalla libreria di Google:

function my_init() {
    if (!is_admin()) {
        // commenta le prossime due righe per caricare la copia locale di jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Potresti anche verificare il plugin Use Google Libraries.

Travis Northcutt

3.4K

17 ago 2010 17:01:59

Commenti

Questa è effettivamente una risposta migliore, poiché mostra come mettere in coda la versione di jQuery del CDN di Google. Tuttavia, come suggerito da John altrove, se vuoi farlo solo sul front-end, agganciati a template_redirect invece che a init.

EAMann

17 ago 2010 17:34:49

Ottimo punto riguardo a dove viene caricato. Anche se in realtà, l'area di amministrazione utilizza jQuery allo stesso modo, giusto? In ogni caso, grazie per aver mostrato come controllarlo.

Travis Northcutt

17 ago 2010 19:56:32

Sì, ho appena trovato il post con i 5 consigli per jQuery/WP, grazie per la tua risposta :-)

Ben Everard

17 ago 2010 20:34:21

5 consigli per usare jQuery con WordPress -- il link non funziona più.

hakre

13 nov 2010 00:52:31

NOTA: L'esempio include una versione "vecchia" di jQuery, la versione attuale di WP (3.0.1) utilizza jQuery 1.4.2 ...

t31os

17 nov 2010 17:06:04

Mostra i restanti 1 commenti

Sebbene @tnorthcutt abbia ragione nel dire che dovresti correttamente rimuovere dalla coda (dequeue) il jquery nativo di WP se vuoi caricare il tuo, sicuramente incontrerai problemi quando carichi una versione di jquery diversa da quella del core di WP. Sia il core che i plugin dipendono dalla sua presenza. Quindi se non aggiorni il tuo tema con la versione più recente di jquery ogni volta che WP viene aggiornato, il tuo sito potrebbe rompersi.

Il seguente codice assicurerà che il tuo tema carichi sempre la versione corretta di jquery, prima verificando quale versione sta utilizzando WP e poi caricando quella da Google:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, nel caso 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');

cjbj

15K

31 ott 2016 11:27:42

User 100 · Accepted Answer · 2010-08-17T15:53:01Z

Dalla formulazione della tua domanda, stai probabilmente aggiungendo script scrivendo tag <script> nel tuo template. Aggiungi i tuoi script personalizzati utilizzando wp_enqueue_script() nel file functions.php del tuo tema, impostando correttamente le dipendenze da jQuery, e wp_head() aggiungerà automaticamente gli script per te.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Consulta la pagina del codex per maggiori informazioni.

User

100

17 ago 2010 15:53:01