¿Cómo forzar wp_enqueue_scripts en el HEADER?

Question

¿Cómo forzar wp_enqueue_scripts en el HEADER?

25 mar 2014, 16:40:48

Vistas: 32.9K

Votos: 3

Un plugin en el que estoy trabajando requiere que jQuery se cargue antes de que se procese el contenido. Algunos temas predeterminados, como 2010, 2011 y 2012 (según creo) colocan el JS en el footer.

¿Cómo puedo forzar que los scripts se carguen en el header (notificaré a los usuarios del plugin que esto es un requisito)?

Branndon

179

jquery encabezados

Comentarios

si necesitas que jQuery se cargue en el head, probablemente estás haciendo algo mal.

Milo

25 mar 2014 17:00:44

Por ejemplo, si quisiera ejecutar un simple jQuery("body").css("background-color","red"); desde dentro de un shortcode en el body, no podría hacerlo. Digamos que mi shortcode es [body color=red] pero jQuery no se carga hasta el footer, entonces mi código no funcionará.

Branndon

25 mar 2014 17:14:51

El script que incluye esa línea puede declararse como dependiente de jQuery, simplemente inténtalo, funcionará. Puede que tengas que esperar hasta que el documento esté listo, pero de todas formas vas a necesitar hacer eso para la mayoría de las cosas con jQuery.

Andrew Bartel

25 mar 2014 17:20:39

encolar un script externo y pasar datos específicos del shortcode mediante wp_localize_script, o incluir el script directamente en el footer.

Milo

25 mar 2014 17:21:05

Todas las respuestas a la pregunta

Comentarios

Quizás el valor predeterminado está en el head, pero algunos temas predeterminados lo colocan en el footer, y para los temas que intentan colocarlo en el footer, me gustaría tener la opción de sobrescribir esa función y colocarlo en el head.

Branndon

25 mar 2014 17:13:34

Claro, entendí eso de manera clara y correcta. Y mi respuesta está diseñada para ayudarte con eso, porque si lo has cargado en el <head>...</head> has hecho lo que estás pidiendo. Por cierto, Milo tiene razón en su comentario, no diría necesariamente que hiciste algo mal, pero ciertamente puedes cambiar tu enfoque, lo que llevaría a no hacer necesario cargar jQuery en el head - considera hacer eso, porque es mejor, es la mejor práctica. @Branndon

Nicolai Grossherr

25 mar 2014 17:20:17

Pero tu respuesta y la mayoría de las respuestas aquí implican que estoy tratando de cargar un archivo de script, y no un fragmento de código. El código es dinámico y cambia por cada carga de página. ¿Me estoy perdiendo algo? ¿Puedo usar wp_enqueue_script en un fragmento de código en lugar de un archivo completo?

Branndon

25 mar 2014 17:24:32

Supongo que estás trabajando con scripts en línea, de todos modos sería mejor no hacerlo. Además, por lo general puedes poner cualquier código de script en línea en un archivo de script. Echa un vistazo al segundo comentario de Milo para empezar y toma las palabras clave para usar la función de búsqueda aquí y conocer más sobre tus posibilidades, han sido preguntadas y respondidas múltiples veces. ¡Buena suerte! @Branndon

Nicolai Grossherr

25 mar 2014 17:29:26

Gracias @ialocin, veo que wp_localize_script es una buena ruta a seguir. ¡Gracias por las respuestas detalladas!

Branndon

25 mar 2014 17:44:17

El tercer parámetro de wp_enqueue_script() te permite declarar dependencias para el script que estás encolando, es decir, qué otros scripts son necesarios para que funcione.

add_action( 'wp_enqueue_scripts', 'incluir_script_que_depende_de_jquery' );

function incluir_script_que_depende_de_jquery() {
    wp_enqueue_script( 'my_script.js', '/ruta/a/mis_scripts.js', array( 'jquery' ) );
}

De esta manera, no importa dónde cualquier tema, plugin o lo que sea cargue jQuery, tu script siempre se cargará después, asumiendo que ellos también siguen las mejores prácticas y no lo desregistran.

Andrew Bartel

1.84K

25 mar 2014 16:59:43

Comentarios

El problema es que necesito ejecutar código jquery, no un archivo de scripts.

Branndon

25 mar 2014 17:12:48

Creo que ayudaría si editaras tu pregunta con lo que realmente necesitas hacer. Puede que sea posible no hacerlo en línea.

Andrew Bartel

25 mar 2014 17:41:52

Por ejemplo, si quisiera ejecutar un simple jQuery("body").css("background-color","red"); desde un shortcode en el cuerpo, no podría hacerlo. Digamos que mi shortcode es [body color=red] pero jQuery no se carga hasta el pie de página, entonces mi código no funcionaría.

En tu manejador de shortcodes podrías retornar un elemento HTML marcador de posición o una variable JavaScript, y luego engancharte a wp_footer con otra función que "ejecute" jQuery.

function wpse_139154_shortcode( $atts ) {
    // Código impresionante

    wp_enqueue_script( 'jquery' ); // Se mostrará en el pie de página si no está ya en el head
    add_action( 'wp_footer', 'wpse_139154_shortcode_script', 100 ); // Asegurarnos de que se ejecute después de wp_print_footer_scripts

    return <<<html
<script>
    var arguments = arguments || {}; arguments.backgroundColor = "{$atts['color']}";
</script>
html;
}

function wpse_139154_shortcode_script() {
    echo <<<html
<script>jQuery( "body" ).css( arguments );</script>
html;
}

TheDeadMedic

36.6K

25 mar 2014 17:33:39

Según la referencia de WP para wp_enqueue_scripts

wp_enqueue_script( string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

El último parámetro es responsable de dónde se cargará el script. ¡Existen algunos obstáculos que pueden cambiar su comportamiento! Intenta encontrar y comentar/eliminar estas líneas de tu archivo functions.php

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

El propósito de estas seis acciones es mover automáticamente el código JavaScript al pie de página, ¡haciendo que el último parámetro de wp_enqueue_scripts sea inútil! Si estas acciones no se pueden eliminar, entonces puedes cambiar sus prioridades. Por ejemplo, de 5 a 9999. Juega con las prioridades para encontrar la adecuada para ti.

También necesitas verificar si hay algunas dependencias especificadas en el array $deps, lo que obligará al script a cargarse después de resolverlas.

No intentes ningún truco sucio, es una mala práctica

Feliz codificación

Rangel Nikolov

1

25 ago 2016 11:08:33

Primero, elimina el jQuery cargado por el tema. Luego vuelve a cargarlo.

function jquery_at_header() {
    // Elimina el jQuery actual
    wp_dequeue_script( 'jquery' );

    // Vuelve a cargar jQuery
    wp_enqueue_script( 'jquery' );

    // Luego tu script
    wp_enqueue_script( 'script-name', plugins_url( 'js/scrip-name.js' , __FILE__ ), array( 'jquery' ), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'jquery_at_header', 5 );

Es posible que necesites ajustar la prioridad para obtener el resultado deseado.

Abhik

2.92K

25 mar 2014 18:39:21

Comentarios

No, no es necesario quitar jQuery de la cola, este camino lleva a la locura.

Andrew Bartel

25 mar 2014 18:46:10

@AndrewBartel ¿por qué es eso? Si jQuery está encolado en el pie de página, ¿hay alguna forma de moverlo al head sin quitarlo primero de la cola? No es con intención de provocar, pero eso funcionó para mí.

Abhik

26 mar 2014 21:54:44

Nicolai Grossherr 18.9K · Accepted Answer · 2014-03-25T16:58:38Z

El comportamiento normal de wp_enqueue_script es colocar la salida del script en la sección head, el parámetro $in_footer es opcional y por defecto es false. Por lo tanto, puedes cargar jQuery con tu plugin en el head y, asumiendo que estás trabajando con temas/plugins bien programados, no se cargará nuevamente, porque wp_enqueue_script evita esto por defecto - información adicional sobre eso aquí.

Nicolai Grossherr

18.9K

25 mar 2014 16:58:38