Cómo incluir archivos JavaScript en un plugin

Question

Cómo incluir archivos JavaScript en un plugin

6 feb 2016, 14:31:54

Vistas: 60.9K

Votos: 21

Estoy teniendo muchas dificultades esta vez trabajando en incluir archivos JavaScript en la carpeta del plugin.

Estoy tratando de crear un plugin transfiriendo archivos de widgets desde el directorio de temas. Copié el archivo del widget, pero ese archivo de widget dependía de un archivo JavaScript, así que creé una carpeta /js/ en el directorio del plugin, donde está alojado el archivo "jquery.repeatable.js"

Usé este código, pero parece que no incluye el archivo js -

function Zumper_widget_enqueue_script()
{   
    // Incluir el script personalizado
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

Busqué esto en el foro- https://stackoverflow.com/questions/31489615/call-a-js-file-from-a-plugin-directory

Pero aún así esto no fue de ayuda.

Estoy resumiendo nuevamente mi pregunta. En mi directorio de plugin hay un archivo js bajo esta carpeta - /js/

Deseo incluirlo, ¿cuál es el proceso correcto?, ¿necesito registrar algo también?

¿Hay algo mal con esta parte - 'admin_enqueue_scripts'?

WordCent

1.88K

desarrollo de plugins wp enqueue script

Comentarios

Posible duplicado de Esto no funciona para Plugin get_template_directory_uri()

Milo

6 feb 2016 19:47:28

Todas las respuestas a la pregunta

Normalmente utilizo el método plugins_url() para lograr el encolado.

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugins_url('js/jquery.repeatable.js', __FILE__ ), '1.0.0', false );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

Zaheer Abbas

96

8 ago 2019 09:28:12

Comentarios

Esta es una mejor respuesta que la aceptada, ya que plugin_dir_url() utiliza plugins_url(); es una sobrecarga innecesaria de una llamada adicional a la función

Lovor

19 sept 2023 00:34:20

ACTUALIZADO:

Utiliza este código en su lugar

function Zumper_widget_enqueue_script()
{   
    // Cargar el script personalizado con jQuery como dependencia
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0.0', false );
}
// Hook para cargar los scripts en el administrador
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

El 3er parámetro declara las dependencias y el 4to define la versión.

Establece el 5to parámetro de wp_enqueue_script() como true. Esto significa que el archivo se cargará en el pie de página.

mukto90

1.6K

6 feb 2016 15:19:34

Comentarios

El tercer parámetro de wp_enqueue_script() es para declarar las dependencias del script. El quinto parámetro es el que permite elegir si deseas cargar el script en el footer o en el header. De todos modos, no creo que el lugar donde se cargue haga alguna diferencia.

cybmeta

6 feb 2016 15:22:35

Gracias. Leí en algún otro plugin que alguien está haciendo algo como esto:

wp_enqueue_script('zumper',get_template_directory_uri() . '/js/jquery.zumper.min.js',array('jquery'),false,true);

Dijiste que configurar el tercero como true significa que se cargará en el footer, entonces ¿qué significa esta combinación false,true?

WordCent

6 feb 2016 15:22:50

He actualizado mi respuesta. ¿Funciona?

mukto90

6 feb 2016 15:31:22

cybmeta 20.6K · Accepted Answer · 2016-02-06T15:29:27Z

Tu código parece correcto, pero cargará el script solo en el área de administración porque estás encolando el script en la acción admin_enqueue_scripts.

Para cargar el script en el frontend, usa la acción wp_enqueue_scripts (que no es lo mismo que la función wp_enqueue_script()):

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

Además, ese script parece depender de jQuery, por lo que deberías declarar esa dependencia o el script podría cargarse antes que jQuery y no funcionaría. También recomiendo encarecidamente declarar la versión del script. De esta manera, si actualizas el script a una nueva versión, el navegador lo descargará nuevamente y descartará la copia que pueda tener en caché.

Por ejemplo, si la versión del script es 1.0:

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

Si quieres cargarlo en el área de administración:

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');