Come forzare jQuery a caricarsi come primo script nell'header del frontend?

17 lug 2013, 20:43:01
Visualizzazioni: 18K
Voti: 1

Come forzare jQuery a caricarsi come primo script nell'header?

Attualmente è l'ultimo ;( in questo modo:

<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>

<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

e voglio che siano in questo ordine:

<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>

E il mio head è così:

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Carica il file JavaScript HTML5 per aggiungere supporto agli elementi HTML5 nelle versioni più vecchie di IE. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_enqueue_script("jquery"); ?>

<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>

<?php wp_head(); ?>

</head>
2
Commenti

Mostra il tuo codice, per favore. Come includi i file JS nel tuo tema?

Krzysiek Dróżdż Krzysiek Dróżdż
17 lug 2013 21:04:09

@KrzysiekDróżdż Ho aggiornato la mia domanda con il codice.

Derfder Derfder
17 lug 2013 22:04:06
Tutte le risposte alla domanda 2
0

È necessario impostare la variabile delle dipendenze di wp_enqueue_script() per includere jQuery, jQuery UI core e qualsiasi altra parte di jQuery UI di cui hai bisogno. Non dovresti aggiungerli tramite CDN esterni. Per ragioni di affidabilità e compatibilità, utilizza le librerie integrate di WordPress quando possibile. Se una libreria non è integrata, aggiungila alla directory del tuo tema.

Inoltre, non dovresti aggiungere script o stili direttamente in header.php. Utilizza invece una funzione agganciata all'azione wp_enqueue_scripts in functions.php per farlo.

Puoi vedere la lista delle librerie integrate e automaticamente registrate da WordPress, insieme ai loro handle (identificatori) al seguente link:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress

MODIFICA: Non posso che consigliare vivamente questo articolo per comprendere come aggiungere script ai temi nel modo corretto.

18 lug 2013 05:38:36
3

Tutto il JS che viene enqueued correttamente sarà aggiunto al tuo header esattamente nel punto in cui tu, o il designer del tema, avete incluso wp_head().

Idealmente, dovresti anche enqueueare i tuoi script personalizzati nello stesso modo e renderli dipendenti da jQuery - WordPress li caricherà automaticamente dopo.

Se invece vuoi (come presumo tu stia facendo ora) includere manualmente il JS nell'header, fallo semplicemente dopo wp_head(), se il JS dipende da jQuery.

17 lug 2013 21:24:12
Commenti

spostare wop_head in un altro punto distrugge il mio tema

Derfder Derfder
17 lug 2013 22:06:17

Perché agganciarsi a wp_head? L'intera logica delle dipendenze presuppone che tu sia agganciato a wp_enqueue_scripts? Non vedo alcun vantaggio nell'usare wp_head invece di farlo nel modo corretto.

JPollock JPollock
18 lug 2013 05:40:23

@JPollock: Certo, esiste un hook chiamato wp_head. Ma non ho mai raccomandato di usarlo. Quando ti agganci a wp_enqueue_scripts - dove pensi che gli script verranno inclusi nel tema? --> Dove sono stati inseriti i template tag wp_head() o wp_footer() (nota le parentesi dopo il nome della funzione)... --> Prova a usare wp_enqueue_script() rimuovendo wp_head() dal tuo header.php - ti renderai conto che non funziona.

Johannes Pille Johannes Pille
18 lug 2013 11:24:41