Cum să forțezi încărcarea jQuery ca primul script în header în frontend?

17 iul. 2013, 20:43:01
Vizualizări: 18K
Voturi: 1

Cum să forțez jQuery să se încarce ca primul script în header?

Momentan este ultimul ;( așa:

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

iar eu vreau să fie în această 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>

Iar header-ul meu arată astfel:

<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 // Încarcă fișierul JavaScript HTML5 pentru suport în versiuni mai vechi de 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
Comentarii

Arată-mi codul, te rog. Cum incluzi fișierele JS în tema ta?

Krzysiek Dróżdż Krzysiek Dróżdż
17 iul. 2013 21:04:09

@KrzysiekDróżdż Am actualizat întrebarea cu codul.

Derfder Derfder
17 iul. 2013 22:04:06
Toate răspunsurile la întrebare 2
0

Trebuie să setezi variabila de dependințe a funcției wp_enqueue_script() pentru a include jQuery, jQuery UI core și orice alte componente din jQuery UI de care ai nevoie. Nu ar trebui să le adaugi prin CDN-uri externe. Pentru fiabilitate și compatibilitate, folosește bibliotecile încorporate în WordPress dacă este posibil. Dacă o bibliotecă nu este încorporată, adaug-o în directorul temei tale.

De asemenea, nu ar trebui să adaugi niciun script sau stil în header.php. Folosește o funcție legată de acțiunea wp_enqueue_scripts în functions.php pentru a face acest lucru.

Poți vedea lista de biblioteci încorporate și înregistrate automat de WordPress, precum și identificatorii (handles) lor la:

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

EDIT: Nu pot recomanda suficient acest articol pentru a înțelege cum să adaugi scripturi în teme în mod corect.

18 iul. 2013 05:38:36
3

Tot JavaScript-ul care este încorporat corect va fi adăugat în header exact în punctul unde tu, sau designerul temei, ați inclus wp_head().

În mod ideal, ar trebui să încorporezi și scripturile tale personalizate în același mod și să le faci dependente de jQuery - WordPress le va încărca apoi în mod natural după jQuery.

Dacă totuși vrei (așa cum presupun că faci acum) să incluzi JS manual în header, atunci fă-o simplu după wp_head(), dacă JS-ul depinde de jQuery.

17 iul. 2013 21:24:12
Comentarii

mutarea wop_head în altă parte distruge tema mea

Derfder Derfder
17 iul. 2013 22:06:17

De ce să folosești hook-ul wp_head? Întreaga logică a dependențelor presupune că folosești wp_enqueue_scripts? Nu văd niciun avantaj în utilizarea wp_head în loc să faci lucrurile corect.

JPollock JPollock
18 iul. 2013 05:40:23

@JPollock: Desigur, există un hook numit wp_head. Dar nu am recomandat niciodată să-l folosești. Când te conectezi la wp_enqueue_scripts - unde crezi că vor fi incluse scripturile în tema? --> Unde au fost plasate tag-urile de șablon wp_head() sau wp_footer() (observă parantezele după numele funcției)... --> Încearcă să folosești wp_enqueue_script() în timp ce elimini wp_head() din header.php - vei realiza că nu funcționează.

Johannes Pille Johannes Pille
18 iul. 2013 11:24:41