Método correcto para ejecutar scripts con dependencias sin usar enqueue?

Question

Método correcto para ejecutar scripts con dependencias sin usar enqueue?

18 jul 2014, 03:38:26

Vistas: 16.1K

Votos: 9

Con enqueue cambiarías $deps por tu script o array de scripts que se necesitan ejecutar primero para que tu script funcione.

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Por ejemplo:

function script_that_requires_jquery() {
    wp_register_script( 'script-with-dependency', 'http://www.example.com/script-with-dependency.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_script( 'script-with-dependency' );
}
add_action( 'wp_enqueue_scripts', 'script_that_requires_jquery' );

Normalmente hago esto pero no siempre parece funcionar:

function script_that_requires_jquery(){
    if ( wp_script_is( 'jquery', 'done' ) ) { ?>
        <script type="text/javascript">
        (function($) {
            // función jquery va aquí    
        })( jQuery );
        </script>
    <?php }
}
add_action('wp_footer', 'script_that_requires_jquery');

¿Quizás sea esto?

function script_that_requires_jquery(){
    wp_enqueue_script( 'jquery' );
    ?>
        <script type="text/javascript">
        (function($) {
            // función jquery va aquí    
        })( jQuery );
        </script>
    <?php 
}
add_action('wp_footer', 'script_that_requires_jquery');

Bryan Willis

4.48K

jquery wp enqueue script scripts wp register script

Todas las respuestas a la pregunta

Pieter Goosen 55.4K · Answer 1 · 2014-07-18T07:37:29Z

function script_that_requires_jquery() {
    // Registrar el script con jQuery como dependencia
    wp_register_script( 'script-with-dependency', 'http://www.example.com/script-with-dependency.js', array( 'jquery' ), '1.0.0', true );
    // Encolar el script para que se cargue en el front-end
    wp_enqueue_script( 'script-with-dependency' );
}
// Añadir la función al hook wp_enqueue_scripts
add_action( 'wp_enqueue_scripts', 'script_that_requires_jquery' );

Este es el método correcto para encolar scripts (y estilos también). Siempre debes usar wp_enqueue_scripts para enlazar scripts y estilos.

Hay algunas cosas que revisar al registrar scripts y estilos. Primero, asegúrate de que el orden en que los colocas dentro de tu función sea correcto. El primer script en la función se ejecutará primero, el segundo después, etc. Por lo tanto, no puedes colocar tu script que depende de jQuery antes que jQuery, no funcionará.

Otra posible dificultad es add_action( $hook, $function_to_add, $priority, $accepted_args );. Sin configurar el parámetro $priority, siempre existe el peligro de que tu script/estilo se cargue antes que otros scripts/estilos que podrían sobrescribir los tuyos.

En tu caso, tu script podría cargarse antes que jQuery, por lo que no funcionaría. Yo siempre configuro este parámetro con una prioridad muy baja (un número muy alto) cuando añado scripts y estilos personalizados. Esto asegura que mis scripts y estilos se carguen al final. Así que haría algo como esto:

// Añadir la función con una prioridad muy baja (999) para que se ejecute al final
add_action( 'wp_enqueue_scripts', 'script_that_requires_jquery', 999 );

Mark Kaplun 23.7K · Answer 2 · 2014-07-18T14:04:32Z

No es suficiente encolar jQuery (o cualquier otra biblioteca) antes de tu código que depende de jQuery, sino que también debes asegurarte de que jQuery esté cargado antes de que tu código sea analizado/ejecutado por el navegador.

Mark Kaplun

23.7K

18 jul 2014 14:04:32