Enqueue core jQuery en el pie de página?


22

Tengo esto en mi functions.phparchivo y no puedo hacer que jQuery se cargue en el pie de página. Sin includesembargo, el archivo se carga bien en el pie de página. ¿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' );

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

WP dev aquí, hice un complemento para tratar esto: wordpress.org/plugins/jquery-manager
Remzi Cavdar

Respuestas:


23

Para hacerlo, primero tendrá que cancelar el registro de su script jQuery y luego registrarse nuevamente. Si usa jQuery viene con WordPress, la siguiente es la función que está 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 utiliza la versión de jQuery alojada en Google CDN, avíseme si modificaré este código para la URL de Google CDN.


55
¿Qué quieres decir? La solución se trata de mover jQuery al pie de página.
Robert hue

2
Es posible que también deba verificar is_admin () para evitar realizar cambios en el backend jQuery, después de todo, solo necesitamos optimizar la interfaz de nuestros sitios :)
Tim Malone

1
@TimMalone - en realidad, no lo hace - wp_enqueue_scriptsse usa solo en el front end mientras admin_enqueue_scriptsse usa para el back end
dev_masta

1
Creo que esta solución es realmente horrible. ¿Se eliminan las etiquetas de versión con esto? ¿Qué es este estilo de inicio y es que incluye.min.js y qué tiene que ver con jQuery?
NextGenThemes

2
@redanimalwar starter-style e incluye archivos directamente de la pregunta.
tehlivi

43

Aquí hay otra opción que evita tener que cancelar el registro y volver a registrarse:

/**
 * Move jQuery to the 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 al configurar groupa 1, que es cómo WordPress determina si un script debe estar en el pie de página o no (no estoy al tanto del razonamiento 1, como @jgraup señaló en los comentarios, parece un poco arbitrario).


1
Interesante. Parece que se wp_register_scriptusa add_data( $handle, 'group', 1 )para mover guiones al pie de página. core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… - ¿Podría explicar por qué es eso? Echando un vistazo a su código, 'grupo' parece un poco arbitrario. Pero puedo ver en core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… cómo se usa en WP_Scripts-> do_itemmás adelante. De cualquier manera, esta parece ser la respuesta menos destructiva.
jgraup

2
Espero que alguien pueda comentar más sobre estas tres respuestas votadas. Todos son diferentes y requieren algún conocimiento de WP. Debido a que Google requiere que estos scripts estén debajo del pliegue, este es un tema importante.
ssaltman

2
¡La mejor respuesta! Nota : funciona desde WordPress 4.2.0 y lo utilizo en functions.php en la devolución de llamada del gancho 'wp_enqueue_scripts'
realmag777

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

1
¡Esto es tan bueno! Muchas gracias. Pero, vale la pena señalar que, como dice @tehlivi, WP usa una versión anterior de jQuery, considere cancelar el registro y registrar una versión más nueva.
skolind

18

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 OMI

  1. Lo cambia en el núcleo mismo, no en una etapa posterior en la que otras cosas ya podrían haberlo estropeado.
  2. ¡La cadena de versión se mantuvo en su lugar y no se eliminó!
  3. No anula el registro y vuelve a registrar un script, sino que simplemente establece el valor del grupo que es esencialmente el mismo que si el script se registrara $footer = true.

Sobre no hacerle esto al administrador

Si los complementos agregan jquery en línea a wp_head, fallará cuando no se cargue jquery en ese punto, por lo que le sugiero que evite eso hasta que tenga millones editando su sitio e intente optimizar el rendimiento de su administrador. Esto también es cierto para frontend, por lo que debe tener cuidado con los temas o complementos mal codificados que asumen jquery en la cabeza utilizando el código jQuery en línea. WP y los complementos registran otras secuencias de comandos en la cabeza del administrador con jquery en deps para que no funcione de todos modos, creo.

Sobre eso no funciona

Debe tener en cuenta que si se carga cualquier otra secuencia de comandos en el encabezado que tenga jQuery en sus dependencias, también hará que jQuery se cargue en el encabezado 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 aprenderá si usa algunos complementos que uno de ellos requerirá causar jquery en la cabeza. Es el valor predeterminado para los scripts en cola, lamentablemente.

Solución radical

Creo que frenará cualquier JS en línea que suponga jquery, pero si eso fuera raro. Esto forzará todos los scripts al pie de página, independientemente de cómo estén en cola.

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 );
}

2
Si bien esto puede responder a la pregunta y tiene algunos buenos puntos para analizar, hay demasiado ruido (¿pelusa?) En la respuesta y es muy similar a las respuestas publicadas anteriormente con mejoras menores en el código. Puede ser más bien recibido si fue editado y reducido a una versión más informativa. Tampoco hay necesidad real de llamar a usuarios o respuestas específicas (ya que pueden no existir por cualquier razón en el futuro).
Howdy_McGee

Llama a un elemento completamente no mencionado y probablemente mejor que cualquier cosa mencionada en otras respuestas "mejoras menores de código". Bueno, eso es simplemente falso. Además, no "llamé" a nadie, 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 aquí hasta ahora y esto es lo que obtengo.
NextGenThemes

44
Las otras respuestas no mencionan nada acerca de otros scripts que obligan a jQuery a la cabeza, de hecho, mi respuesta quita la confusión a las personas que no saben por qué no funciona. Ninguna de las otras respuestas menciona los riesgos potenciales ...
NextGenThemes

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

Es difícil de creer que este código esté causando un 500, probablemente haya cometido un error al implementar esto en su código. Este no es realmente el lugar correcto para preguntar y su versión WP desactualizada no es suficiente información.
NextGenThemes

2

He desarrollado un complemento para este problema específico. Este complemento no se mete con WordPress jQuery, ya que solo se carga en el front-end. Ver: jQuery Manager para WordPress

¿Por qué otra herramienta jQuery Updater / Manager / Developer / Debugging?

Debido a que ninguna de las herramientas de desarrollador le permite seleccionar una versión específica de jQuery y / o jQuery Migrate. Proporcionando tanto la versión comprimida / producida como la versión sin comprimir / desarrollo. ¡Vea las características a continuación!

✅ Solo se ejecuta en el front-end, no interfiere con el administrador / backend de WordPress y el personalizador de WP (por razones de compatibilidad) Consulte: https://core.trac.wordpress.org/ticket/45130 y https: // core. trac.wordpress.org/ticket/37110

Active / desactive jQuery y / o jQuery Migrate

✅ Active una versión específica de jQuery y / o jQuery Migrate

¡Y mucho más! El código es de código abierto, por lo que puede estudiarlo, aprender de él y contribuir.


Casi todos usan el mango incorrecto

WordPress en realidad usa el controlador 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 identificador jquery es solo un alias para cargar jquery-core con jquery-migrate.

Ver más información sobre alias: wp_register_script identificadores múltiples?

La forma correcta de hacerlo

En mi ejemplo a continuación, uso el jQuery CDN oficial en https://code.jquery.com También uso script_loader_tag para poder agregar algunos atributos de CDN.
Puedes usar el siguiente código:

// Front-end not excuted in the wp admin and the wp customizer (for compatibility reasons)
// See: https://core.trac.wordpress.org/ticket/45130 and 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 'We are in the WP Admin or in the WP Customizer';
        return;
    }
    else {
        // Deregister WP core jQuery, see https://github.com/Remzi1993/wp-jquery-manager/issues/2 and https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
        wp_deregister_script( 'jquery' ); // the jquery handle is just an alias to load jquery-core with jquery-migrate
        // Deregister WP jQuery
        wp_deregister_script( 'jquery-core' );
        // Deregister WP jQuery Migrate
        wp_deregister_script( 'jquery-migrate' );

        // Register jQuery in the head
        wp_register_script( 'jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), null, false );

        /**
         * Register jquery using jquery-core as a dependency, so other scripts could use the jquery handle
         * see /wordpress/283828/wp-register-script-multiple-identifiers
         * We first register the script and afther that we enqueue it, see why:
         * /wordpress/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * /programming/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 );

0
add_action("wp_enqueue_scripts", "myscripts");

function myscripts() { 
   wp_enqueue_script( 'jquery' , '', array(), true); //true for footer
   wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true );
}

-3

Hey, solo cambia tu código para que te guste esto

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

agregue estas líneas en su archivo functions.php

remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 5);

luego agrega script al pie de página


Esto pone a jQuery en la cabeza. Lo necesito en el pie de página.
Desi

Hey Desi comprueba por favor la respuesta editado Creo que le ayude
Amit Mishra

66
Estoy bastante seguro de que esta es una idea terrible: ha evitado efectivamente que cualquier cosa cargue scripts en el encabezado, no solo jQuery, y podría ser scripts de doble cola (no se ha mirado tan profundamente). De hecho, probablemente solo necesite la parte remove_action/ add_actionsi va a hacerlo de esta manera.
drzaus

1
De hecho, una idea terrible, ¡no hagas esto!
NextGenThemes
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.