¿Cómo forzar que jQuery se cargue como primer script en el encabezado en el frontend?

17 jul 2013, 20:43:01
Vistas: 18K
Votos: 1

¿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>
2
Comentarios

Muestra tu código, por favor. ¿Cómo estás incluyendo archivos JS en tu tema?

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

@KrzysiekDróżdż He actualizado mi pregunta con el código.

Derfder Derfder
17 jul 2013 22:04:06
Todas las respuestas a la pregunta 2
0

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:

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

EDITO: No puedo recomendar este artículo lo suficiente para entender cómo agregar scripts a los temas de la manera correcta.

18 jul 2013 05:38:36
3

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.

17 jul 2013 21:24:12
Comentarios

mover wop_head a otro lugar destruye mi tema

Derfder Derfder
17 jul 2013 22:06:17

¿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 JPollock
18 jul 2013 05:40:23

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

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