¿Cargar jQuery core en el pie de página?

30 dic 2014, 21:44:44
Vistas: 64.1K
Votos: 33

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' );
2
Comentarios

Si estás haciendo esto por razones de rendimiento, podrías considerar agregar defer a tus etiquetas de script en su lugar: https://matthewhorne.me/defer-async-wordpress-scripts/

diachedelic diachedelic
25 ago 2017 07:06:09

Desarrollador de WP aquí, hice un plugin para manejar esto: https://wordpress.org/plugins/jquery-manager/

Remzi Cavdar Remzi Cavdar
4 jul 2019 12:55:20
Todas las respuestas a la pregunta 6
16
61

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

7 may 2016 17:11:29
Comentarios

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.

jgraup jgraup
7 may 2016 21:37:30

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.

ssaltman ssaltman
18 may 2016 16:32:12

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

realmag777 realmag777
1 jul 2016 21:22:28

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

iSaumya iSaumya
31 ago 2016 15:13:44

@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 Malone Tim Malone
21 oct 2016 01:08:19

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

iSaumya iSaumya
21 oct 2016 01:10:36

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

Matthew Boynes Matthew Boynes
22 oct 2016 02:41:27

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

tehlivi tehlivi
16 ene 2018 21:27:33

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

skolind skolind
8 mar 2018 11:24:00

Este código me devolvió un error 500. Tengo WordPress 4.9.9

Marco Panichi Marco Panichi
8 ene 2019 11:18:04

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

Matthew Boynes Matthew Boynes
8 ene 2019 16:32:38

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

Marco Panichi Marco Panichi
9 ene 2019 14:36:31

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

Remzi Cavdar Remzi Cavdar
4 jul 2019 12:57:46

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

lonix lonix
8 dic 2019 08:16:22

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.

Simo Patrek Simo Patrek
16 ene 2020 23:33:53

funciona bastante bien en WordPress 5.6, gracias hombre :)

sorrow poetry sorrow poetry
22 feb 2021 17:48:30
Mostrar los 11 comentarios restantes
8
29

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.

30 dic 2014 22:23:44
Comentarios

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

Toni Michel Caubet Toni Michel Caubet
3 sept 2015 13:05:06

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

Robert hue Robert hue
3 sept 2015 13:58:17

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

Tim Malone Tim Malone
21 oct 2016 01:10:07

@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

dev_masta dev_masta
4 mar 2017 19:18:55

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.

Pons Pons
8 mar 2017 15:42:49

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?

NextGenThemes NextGenThemes
31 jul 2017 12:09:46

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

tehlivi tehlivi
16 ene 2018 20:43:14

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

Remzi Cavdar Remzi Cavdar
4 jul 2019 12:56:32
Mostrar los 3 comentarios restantes
7
25

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

  1. Lo cambia en el núcleo mismo y no en una etapa posterior donde otras cosas podrían haberlo alterado.
  2. ¡La cadena de versión se mantiene y no se elimina!
  3. 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 );
}
26 sept 2016 23:50:35
Comentarios

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

Howdy_McGee Howdy_McGee
21 oct 2016 23:38:00

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.

NextGenThemes NextGenThemes
21 oct 2016 23:58:46

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

NextGenThemes NextGenThemes
22 oct 2016 00:03:02

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

Marco Panichi Marco Panichi
8 ene 2019 11:19:46

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 NextGenThemes
9 ene 2019 20:19:59

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

Remzi Cavdar Remzi Cavdar
4 jul 2019 12:57:28

Oye amigo, genial tu solución radical, es justo lo que estaba buscando. Tal vez tu respuesta es de alguna manera similar a la anterior pero es más clara, ¡saludos!

Andres Felipe Andres Felipe
10 dic 2020 17:01:35
Mostrar los 2 comentarios restantes
1

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:

https://github.com/WordPress/WordPress/blob/f84ab5e19f0038a3abec71821c9b8f47a4272942/wp-includes/script-loader.php#L1017

// 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 );
4 jul 2019 13:06:13
Comentarios

Esto coloca jQuery en el head (según tu propio comentario en línea) y no es una respuesta para el OP.

Pim Schaaf Pim Schaaf
30 ene 2020 19:58:28
0
// 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 );
}
18 may 2019 00:10:41
4
-3

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

30 dic 2014 22:05:33
Comentarios

Esto coloca jQuery en el head. Lo necesito en el footer.

Desi Desi
30 dic 2014 22:06:09

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

Amit Mishra Amit Mishra
30 dic 2014 22:13:17

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.

drzaus drzaus
26 ene 2016 22:34:21

¡Realmente una idea terrible, no hagas esto!

NextGenThemes NextGenThemes
26 sept 2016 23:50:23