Cómo agregar un fragmento de JavaScript al pie de página que requiere jQuery

Question

Cómo agregar un fragmento de JavaScript al pie de página que requiere jQuery

6 nov 2011, 12:30:44

Vistas: 86.9K

Votos: 30

Sé que puedo agregar un archivo de script al pie de página de WordPress que requiere jQuery usando este código:

<?php
function my_scripts_method() {
   // registra la ubicación de tu script, dependencias y versión
   wp_register_script('custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0',
       true);
   // carga el script
   wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Pero ¿qué pasa si quiero agregar solo un fragmento normal de jQuery en línea, no un archivo? ¿Cómo se puede hacer esto?

Editar

Sé que puedo usar este script para agregar algo al pie de página:

<?php
function myscript() {
?>
<script type="text/javascript">
 // Esto depende de jquery
</script>
<?php
}
add_action('wp_footer', 'myscript');

Pero ¿cómo especifico que el script que se usa requiere jquery para ejecutarse?

Saif Bechan

604

desarrollo de plugins jquery wp enqueue script

Comentarios

No hay una función incorporada para hacer esto que yo conozca, es por eso que existen wp_register_script y wp_enqueue_script, pero puedes verificarlo usando jQuery mismo.

Wyck

6 nov 2011 17:42:50

Lamento el voto negativo, pero no creo que entiendas mi pregunta. He leído el codex y conozco la opción. Pero no quiero usar wp_enqueue_script para cargar un archivo de script en el footer, quiero añadir un fragmento de código en el footer que requiera jQuery. Voté negativamente la respuesta tomada directamente del codex. Leí el codex y no encontré una respuesta, por eso hago una pregunta. Si me rediriges al codex nuevamente, votaré negativo.

Saif Bechan

6 nov 2011 17:46:09

Gracias wyck, creo que este es el caso, gracias por entender correctamente la pregunta. Creo que simplemente usaré un script JS externo para asegurarme de que el script pueda ejecutarse.

Saif Bechan

6 nov 2011 17:47:09

Todas las respuestas a la pregunta

Comentarios

¿El fragmento de código que proporcionaste cumple con los estándares de desarrollo de plugins de WordPress? Si es así, lo usaré en mi plugin... por favor respóndeme sobre esto...

laraib

19 oct 2016 17:08:49

¿El último fragmento? No. Los plugins de WordPress siempre deben encolar los requisitos de scripts. Forzar a que jQuery se cargue fuera del sistema de colas de esta manera solo es algo que deberías hacer en tu propio sitio donde controlas el 100% del entorno. Nunca es apropiado que un plugin haga eso.

EAMann

20 oct 2016 07:51:20

¿Entonces podrías darme algún ejemplo funcional de eso, por favor...????

laraib

20 oct 2016 08:41:16

Porque estoy desarrollando mi primer plugin de WordPress y me encantaría que fuera aceptado por el equipo de WordPress... esperando cualquier respuesta por favor... dime tu opinión sobre esto para que pueda crear y que mi plugin sea aceptado...

laraib

20 oct 2016 08:42:11

Desde WordPress 4.5 puedes agregar scripts en línea usando wp_add_inline_script(). Para agregar un fragmento de JavaScript en el footer que requiera jQuery, este código te ayuda:

function enqueue_jquery_in_footer( &$scripts ) {

    if ( ! is_admin() )
        $scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'enqueue_jquery_in_footer' );

function theme_prefix_enqueue_script() {
   if(!wp_script_is('jquery', 'done')) {
     wp_enqueue_script('jquery');
   }
   wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

wp_add_inline_script con jQuery de WordPress

Dhinju Divakaran

1.07K

25 jun 2016 09:44:41

Utiliza la acción wp_footer de esta manera:

add_action( 'wp_footer', 'wpse33008');
function wpse33008() {
?>
<script type="text/javascript">
    /** INSERTA EL SCRIPT AQUÍ **/
</script>
<?php
}

v0idless

802

6 nov 2011 16:17:10

Comentarios

Esta no es una buena respuesta. Pregunté cómo podía especificar que el script requiere jQuery. Si el usuario no tiene jQuery ejecutándose, tu implementación no funcionará.

Saif Bechan

6 nov 2011 16:18:34

Sé que OP quiere especificar un requisito en jQuery, y los autores de WordPress deberían haber permitido que los snippets se encolasen junto a los archivos de script, pero no lo hicieron, así que recomiendo no intentar forzarlo. Si no quieres meterte con la cola o su orden en absoluto, como yo (porque estoy usando otros plugins que combinan y optimizan scripts), entonces la respuesta realmente es usar la acción wp_footer así:

<?php

add_action(
    'wp_footer'
    , function() {
        ?>
        <script>
            if (window.jQuery) {
                // tu snippet
            }
        </script>
        <?php
    }
    , 21 # después de los scripts encolados en el footer
);

Walf

292

25 jul 2018 12:56:07

Puedes utilizar la acción wp_footer para hacer esto. Consulta el codex para wp_footer.

Rutwick Gangurde

8.6K

6 nov 2011 15:30:47

Comentarios

Lo sé, pero ¿cómo puedes especificar que el script que agregas al pie de página depende de jQuery? Revisa mi edición para ser más específico.

Saif Bechan

6 nov 2011 16:14:28

¿Acaso te molestas en leer la documentación antes de votar negativamente las respuestas de la gente? ¿Alguna vez has leído sobre el argumento in_footer para wp_enqueue_script? Lee esto: http://codex.wordpress.org/Function_Reference/wp_enqueue_script. Te dice cómo usarlo con la acción wp_footer.

Rutwick Gangurde

6 nov 2011 17:42:21

EAMann 32.2K · Accepted Answer · 2011-11-06T19:22:45Z

La forma más fácil de hacer esto es en realidad una combinación de wp_enqueue_script y las acciones de footer que Saif y v0idless ya mencionaron. Frecuentemente uso jQuery en mis temas y plugins, pero también coloco todos los demás scripts en el footer.

La mejor manera de encolar los scripts sería esta:

function myscript() {
?>
<script type="text/javascript">
  if ( undefined !== window.jQuery ) {
    // script dependiente de jQuery
  }
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );

function myscript_jquery() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_head' , 'myscript_jquery' );

Pero este fragmento de código asume que eres tú quien está encolando el script, es decir, lo estás haciendo en tu propio plugin o tema.

Actualmente, no hay forma de agregar un script en línea al footer de WordPress y también cargarlo con dependencias. Pero existe una alternativa, si estás dispuesto.

La alternativa

Cuando WordPress trabaja con scripts, los carga internamente en un objeto para mantener un seguimiento de ellos. Básicamente hay 3 listas dentro del objeto:

registered (registrados)
queue (cola)
done (terminados)
to_do (por hacer)

Cuando primero registras un script con wp_register_scripts(), se coloca en la lista de registrados. Cuando usas wp_enqueue_script(), el script se copia a la lista de cola. Después de que se imprime en la página, se agrega a la lista de terminados.

Entonces, en lugar de encolar tu script en el footer para que requiera jQuery, puedes documentar que necesita usar jQuery y simplemente verificar programáticamente que jQuery esté cargado.

Esto usa wp_script_is() para verificar dónde está listado el script.

function myscript() {
    if( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script type="text/javascript">
      // script dependiente de jQuery
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'myscript' );

Podrías posiblemente usar este mismo código para forzar a jQuery a cargarse también en el footer, pero no lo he probado... así que los resultados pueden variar.