¿Cómo forzar que jQuery se cargue como primer script en el encabezado en el frontend?
¿Cómo forzar que jquery se cargue como primer script en el encabezado?
Ahora mismo es el último ;( así:
<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>
y quiero que estén en este orden:
<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>
Y mi encabezado se ve así:
<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 // Carga el archivo JavaScript HTML5 para agregar soporte para elementos HTML5 en versiones anteriores 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>

Debes configurar la variable de dependencias de wp_enqueue_script()
para incluir jQuery, jQuery UI core y cualquier otra parte de jQuery UI que necesites. No deberías agregarlos mediante CDNs externos. Por confiabilidad y compatibilidad, utiliza las bibliotecas integradas de WordPress cuando sea posible. Si una biblioteca no está integrada, agrégalas al directorio de tu tema.
Además, no deberías agregar scripts o estilos directamente en header.php. Utiliza una función enganchada a la acción wp_enqueue_scripts
en functions.php para hacerlo.
Puedes ver la lista de bibliotecas que están integradas y registradas automáticamente por WordPress, junto con sus identificadores (handles) en:
EDITO: No puedo recomendar este artículo lo suficiente para entender cómo agregar scripts a los temas de la manera correcta.

Todo el JS que esté correctamente encolado se agregará a tu encabezado en el punto exacto donde tú, o el diseñador del tema, respectivamente, incluyeron wp_head()
.
Idealmente, también deberías encolar tus scripts personalizados de la misma manera y hacerlos dependientes de jQuery - WP los cargará naturalmente después.
Si sin embargo deseas (como supongo que estás haciendo ahora) incluir JS manualmente en el encabezado, entonces hazlo simplemente después de wp_head()
, si el JS depende de jQuery.

¿Por qué enganchar a wp_head? Toda la lógica de dependencias asume que estás enganchado a wp_enqueue_scripts. No veo ninguna ventaja en usar wp_head en lugar de hacerlo de la manera correcta.

@JPollock: Cierto, existe un hook llamado wp_head
. Pero nunca recomendé usarlo. Cuando te enganchas a wp_enqueue_scripts
- ¿dónde crees que se incluirán los scripts en el tema? --> Donde se hayan puesto las etiquetas de plantilla wp_head()
o wp_footer()
(fíjate en los paréntesis después del nombre de la función)... --> Intenta usar wp_enqueue_script()
mientras eliminas wp_head()
de tu header.php - te darás cuenta de que no funciona.
