¿Cargar jQuery core en el pie de página?
Tengo esto en mi archivo functions.php
y no puedo hacer que jQuery se cargue en el pie de página. El archivo includes
se carga bien en el footer. ¿Qué más necesito hacer?
function starter_scripts() {
wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
wp_enqueue_script( 'jquery', '', '', '', true );
wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

Aquí tienes otra opción que evita tener que desregistrar y volver a registrar:
/**
* Mover jQuery al footer.
*/
function wpse_173601_enqueue_scripts() {
wp_scripts()->add_data( 'jquery', 'group', 1 );
wp_scripts()->add_data( 'jquery-core', 'group', 1 );
wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_enqueue_scripts', 'wpse_173601_enqueue_scripts' );
Esta solución imita el núcleo de WordPress estableciendo el group
a 1
, que es cómo WordPress determina si un script debe estar en el footer o no (no estoy al tanto del razonamiento detrás del 1
, como @jgraup mencionó en los comentarios parece un poco arbitrario).

Interesante. Parece que wp_register_script
utiliza add_data( $handle, 'group', 1 )
para mover scripts al footer. https://core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/functions.wp-scripts.php#L117 - ¿Podrías ampliar el por qué? Echando un vistazo a tu código, 'group' parece un poco arbitrario. Pero puedo ver en https://core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/class.wp-scripts.php#L231 cómo se usa posteriormente en WP_Scripts->do_item
. De cualquier manera, esta parece ser la respuesta menos destructiva.

Espero que alguien pueda comentar más sobre estas tres respuestas votadas. Todas son diferentes y requieren cierto conocimiento de WP. Ya que Google requiere que estos scripts estén debajo del fold, este es un tema importante.

¡Mejor respuesta! Nota: funciona desde WordPress 4.2.0 y debe usarse en functions.php dentro del callback del hook 'wp_enqueue_scripts'

Hola, probé el enfoque anterior, pero no funcionó. ¿Alguien puede ayudar?

@iSaumya Podrías agregar algunos detalles sobre por qué no funcionó / qué sucedió. ¡Es una solicitud bastante críptica! Consulta también la otra nueva respuesta, y ten en cuenta que esta respuesta aún necesita estar envuelta en una función y llamada de filtro.

@tim Lo intenté pero todavía no está enviando el script al pie de página. Eso fue lo que pasó.

@iSaumya He añadido algunos detalles adicionales para ti, ¡espero que esto ayude!

WordPress usa una versión tan antigua de jQuery, a este ritmo es mejor desregistrarla y registrar la versión más nueva.

¡Esto es genial! Muchas gracias. Pero, vale la pena señalar, como @tehlivi menciona, que WP usa una versión antigua de jQuery - considera desregistrarla y registrar una versión más reciente.

@MarcoPanichi ¿tal vez tienes un tema o plugin conflictivo? ¿Podrías probarlo en una instalación nueva de WordPress sin plugins y usando el tema por defecto?

@MatthewBoynes Creo que tienes razón. En otra instalación funciona.

@MatthewBoynes Todavía estoy buscando más desarrolladores a los que les guste ayudar a mantener un proyecto de código abierto, mira: https://wordpress.org/plugins/jquery-manager/ y https://github.com/Remzi1993/jquery-manager este plugin/proyecto debería ayudar a los usuarios a usar la última versión de jQuery con un simple clic.

Esto funciona pero 1
es un "número mágico". Si cambia, este código se romperá. Y desafortunadamente no sabemos qué es, así que no podemos reemplazarlo con una constante. ¿Alguien sabe realmente a qué se refiere??

El parámetro 1 responde a la pregunta "¿Deberíamos mover el script al pie de página?" en la función - Significa "verdadero" creo.

Para hacer eso, primero tendrás que desregistrar tu script de jQuery y luego registrarlo nuevamente. Si usas jQuery que viene con WordPress, entonces la siguiente es la función que estás buscando.
function starter_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );
Si utilizas la versión de jQuery alojada en CDN de Google, házmelo saber y modificaré este código para la URL del CDN de Google.

Probé esto y sigue en el pie de página, ¿alguna idea de por qué?

¿Qué quieres decir? La solución consiste en mover jQuery al pie de página.

También podrías necesitar verificar is_admin() para evitar hacer cambios al jQuery del backend, después de todo solo necesitamos optimizar el frontend de nuestros sitios :)

@TimMalone - en realidad, no lo necesitas - wp_enqueue_scripts
se usa solo en el front-end mientras que admin_enqueue_scripts
es para el back-end

A veces no funciona porque un plugin añade su script con el parámetro "in_footer" en falso. Esto hace que el script de jquery se mueva al head.

Creo que esta solución es realmente horrible. ¿Se eliminan las etiquetas de versión con esto? ¿Qué es este starter-style y qué es este includes.min.js y qué tiene que ver con jQuery?

@redanimalwar el estilo inicial y los archivos incluidos provienen directamente de la pregunta.

@Roberthue todavía estoy buscando más desarrolladores que quieran ayudar a mantener un proyecto de código abierto, mira: https://wordpress.org/plugins/jquery-manager/ y https://github.com/Remzi1993/jquery-manager este plugin / proyecto debería ayudar a los usuarios a usar la última versión de jQuery con un simple clic.

Una mejor solución:
add_action( 'wp_default_scripts', 'move_jquery_into_footer' );
function move_jquery_into_footer( $wp_scripts ) {
if( is_admin() ) {
return;
}
$wp_scripts->add_data( 'jquery', 'group', 1 );
$wp_scripts->add_data( 'jquery-core', 'group', 1 );
$wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
}
Por qué es mejor que la respuesta aceptada en mi opinión
- Lo cambia en el núcleo mismo y no en una etapa posterior donde otras cosas podrían haberlo alterado.
- ¡La cadena de versión se mantiene y no se elimina!
- No desregistra y vuelve a registrar un script, simplemente establece el valor del grupo que es esencialmente lo mismo que si el script se registrara con
$footer = true
.
Sobre no hacer esto en el administrador
Si los plugins agregan jQuery inline a wp_head, fallará cuando jQuery no esté cargado en ese punto, así que sugiero que evites esto hasta que tengas millones de usuarios editando tu sitio y necesites optimizar el rendimiento del administrador. Esto también es válido para el frontend, así que debes tener cuidado con temas o plugins mal codificados que asumen jQuery en el head usando código jQuery inline. WP y los plugins registran otros scripts en el head del admin con jQuery como dependencia, así que no funcionaría de todos modos, creo.
Sobre que no funcione
Debes ser consciente de que si cualquier otro script se carga en el head que tenga jQuery como dependencia, también hará que jQuery se cargue en el head justo antes de sí mismo. Y esto es bueno y esperado, la razón por la que existe el sistema wp_enqueue. Esto significa que pronto descubrirás, si usas algunos plugins, que uno de ellos hará que jQuery se cargue en el head. Es lo predeterminado para los scripts en cola, lamentablemente.
Solución radical
Creo que romperá cualquier JS inline que asuma jQuery, aunque eso debería ser raro. Esto forzará todos los scripts al footer independientemente de cómo estén encolados.
add_action( 'wp_enqueue_scripts', 'js_to_footer' );
function js_to_footer() {
remove_action( 'wp_head', 'wp_print_scripts' );
remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
}

Aunque esto puede responder la pregunta y tiene algunos puntos buenos para considerar, hay demasiado ruido (¿relleno?) en la respuesta y es muy similar a las respuestas publicadas anteriormente con mejoras menores en el código. Podría ser mejor recibida si se edita y se reduce a una versión más informativa. Tampoco hay una necesidad real de mencionar usuarios o respuestas específicas (ya que podrían no existir por cualquier razón en el futuro).

Llamas "mejoras menores en el código" a algo que no se mencionó en absoluto y que probablemente es mejor que cualquier cosa mencionada en otras respuestas. Bueno, eso simplemente no es cierto. Además, no "mencioné" a nadie específicamente, solo mencioné hechos que conozco para mejorar el estilo de codificación y educar a los lectores al respecto para que escriban mejor código. En serio, me tomé bastante tiempo para escribir la mejor respuesta hasta ahora y esto es lo que recibo a cambio.

Las otras respuestas no mencionan nada sobre otros scripts que fuerzan a jQuery a cargarse en el head, de hecho mi respuesta elimina la confusión de las personas que no saben por qué no funciona. Ninguna de las otras respuestas menciona los riesgos potenciales...

Este código (como el código de la respuesta anterior) me devolvió un error 500. Tengo WordPress 4.9.9

Difícil de creer que este código esté causando un 500, probablemente hayas cometido un error al implementar esto en tu código. Este no es realmente el lugar adecuado para preguntar y tu versión desactualizada de WP es apenas información suficiente.

@NextGenThemes todavía estoy buscando más desarrolladores a los que les guste ayudar a mantener un proyecto de código abierto, mira: https://wordpress.org/plugins/jquery-manager/ y https://github.com/Remzi1993/jquery-manager este plugin / proyecto debería ayudar a los usuarios a usar la última versión de jQuery con un simple clic.

He desarrollado un plugin para este problema específico. Este plugin no interfiere con jQuery de WordPress ya que solo se carga en el front-end. Ver: jQuery Manager for WordPress
¿Por qué otra herramienta más para gestionar/actualizar/depurar jQuery?
Porque ninguna de las herramientas para desarrolladores te permite seleccionar una versión específica de jQuery y/o jQuery Migrate. Proporcionando tanto la versión comprimida (minificada/producción) como la versión sin comprimir (desarrollo). ¡Mira las características a continuación!
✅ Solo se ejecuta en el front-end, no interfiere con el admin/backend de WordPress ni con el personalizador de WP (por razones de compatibilidad) Ver: https://core.trac.wordpress.org/ticket/45130 y https://core.trac.wordpress.org/ticket/37110
✅ Activar/desactivar jQuery y/o jQuery Migrate
✅ Activar una versión específica de jQuery y/o jQuery Migrate
¡Y mucho más! El código es de código abierto, así que puedes estudiarlo, aprender de él y contribuir.
Casi todo el mundo usa el handle incorrecto
WordPress en realidad usa el handle jquery-core, no jquery:
// jQuery $scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' ); $scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' ); $scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );
El handle jquery es solo un alias para cargar jquery-core con jquery-migrate
Más información sobre aliases: wp_register_script multiple identifiers?
La forma correcta de hacerlo
En mi ejemplo a continuación uso el CDN oficial de jQuery en https://code.jquery.com. También uso script_loader_tag para poder agregar algunos atributos del CDN.
Puedes usar el siguiente código:
// Front-end no se ejecuta en el admin de WP ni en el personalizador (por razones de compatibilidad)
// Ver: https://core.trac.wordpress.org/ticket/45130 y https://core.trac.wordpress.org/ticket/37110
function wp_jquery_manager_plugin_front_end_scripts() {
$wp_admin = is_admin();
$wp_customizer = is_customize_preview();
// jQuery
if ( $wp_admin || $wp_customizer ) {
// echo 'Estamos en el Admin de WP o en el Personalizador';
return;
}
else {
// Deregistrar jQuery core de WP, ver https://github.com/Remzi1993/wp-jquery-manager/issues/2 y https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
wp_deregister_script( 'jquery' ); // el handle jquery es solo un alias para cargar jquery-core con jquery-migrate
// Deregistrar jQuery de WP
wp_deregister_script( 'jquery-core' );
// Deregistrar jQuery Migrate de WP
wp_deregister_script( 'jquery-migrate' );
// Registrar jQuery en el head
wp_register_script( 'jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), null, false );
/**
* Registrar jquery usando jquery-core como dependencia, para que otros scripts puedan usar el handle jquery
* ver https://wordpress.stackexchange.com/questions/283828/wp-register-script-multiple-identifiers
* Primero registramos el script y luego lo encolamos, ver por qué:
* https://wordpress.stackexchange.com/questions/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
* https://stackoverflow.com/questions/39653993/what-is-diffrence-between-wp-enqueue-script-and-wp-register-script
*/
wp_register_script( 'jquery', false, array( 'jquery-core' ), null, false );
wp_enqueue_script( 'jquery' );
}
}
add_action( 'wp_enqueue_scripts', 'wp_jquery_manager_plugin_front_end_scripts' );
function add_jquery_attributes( $tag, $handle ) {
if ( 'jquery-core' === $handle ) {
return str_replace( "type='text/javascript'", "type='text/javascript' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'", $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_jquery_attributes', 10, 2 );

// Agregar acción para encolar scripts en WordPress
add_action("wp_enqueue_scripts", "mis_scripts");
function mis_scripts() {
// Encolar jQuery en el footer (último parámetro true)
wp_enqueue_script( 'jquery' , '', array(), true);
// Encolar script personalizado desde CDN en el footer
wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true );
}

Hola, solo cambia tu código así:
function starter_scripts() {
wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
wp_enqueue_script('jquery');
wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );
Creo que funcionará bien
Añade estas líneas en tu archivo functions.php
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
Así los scripts se cargarán en el footer

Hola Desi, por favor revisa la respuesta editada, creo que te ayudará

Estoy bastante seguro de que esta es una mala idea - has evitado efectivamente que cualquier cosa cargue scripts en el encabezado, no solo jQuery, y podrías estar encolando scripts dos veces (no lo he revisado en profundidad). De hecho, probablemente solo necesitas la parte de remove_action
/ add_action
si vas a hacerlo de esta manera.
