Cómo incluir un archivo .js en mi tema hijo de WordPress

Question

Cómo incluir un archivo .js en mi tema hijo de WordPress

5 feb 2015, 12:08:29

Vistas: 89.6K

Votos: 22

Intenté cargar un archivo .js personalizado en el directorio de mi tema hijo.

En el functions.php de mi tema hijo encontré el siguiente código

/* Después de esto, puedes sobrescribir las funciones pluggable de Accessible Zen o añadir las tuyas.
 * Recuerda, ¡haz tu mejor esfuerzo para mantener la accesibilidad! :)
 *
 */
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

donde solo esta parte fue implementada por mí y debería cargar mi custom-script.js desde la carpeta js/

wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );

Desafortunadamente no lo hace, ¿alguien puede ayudar?

*Actualización 2

El código ahora luce así y funciona, no funcionaba cuando solo añadía la función al otro add_action. ¡Gracias a todos por la ayuda! Aún me pregunto si no hay una manera de acortar este código un poco.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

/*añado mi script jquery personalizado*/
add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom-script.js',
    array( 'jquery' )
);
        }

¿Para qué sirve esta línea?

wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

¿Es necesaria?

MrKainig

431

jquery javascript

Comentarios

wp_enqueue_script( 'custom-script.js', get_stylesheet_directory_uri() . 'js/custom-script.js', array('jquery') );

Pieter Goosen

5 feb 2015 12:12:31

@Pieter Adapté tu cambio pero aún no funciona. Esto es lo que tengo en mi archivo .js y funciona si lo pongo directamente en page.php por ejemplo: <script> if (jQuery) {

alert("¡La biblioteca jQuery está cargada!");

} else {

alert("¡No se encontró la biblioteca jQuery!");

} </script>

MrKainig

5 feb 2015 12:19:48

@Pieter Está bien, puse el código en la pregunta

MrKainig

5 feb 2015 12:29:44

Elimina las etiquetas script de tu archivo js

Pieter Goosen

5 feb 2015 12:34:03

Todas las respuestas a la pregunta

Comentarios

¿Por qué no usas get_stylesheet_directory_uri()?

Pieter Goosen

5 feb 2015 12:33:24

Ambos funcionan según mis pruebas.

Brad Dalton

5 feb 2015 12:37:18

Probé el primero y no funcionó. ¿Podrías publicar el bloque de código completo (incluyendo mis enqueues existentes que sí funcionan)? Porque no sé cómo implementar correctamente tu código con el que ya está en mi functions.php

MrKainig

5 feb 2015 12:37:46

Sí, lo hacen, pero get_stylesheet_directory_uri() es más rápido :-)

Pieter Goosen

5 feb 2015 12:39:15

Es solo un ejemplo funcional. Se requiere algo de trabajo de tu parte para aprender cómo funciona con tu código. Ahora puedes reescribir tu código para que cargue tus scripts en tu tema.

Brad Dalton

5 feb 2015 12:42:18

Mostrar los 6 comentarios restantes

¡Verifica tus handles! El script puede fallar al cargar si eliges un handle que ya ha sido utilizado en otro lugar. Si todo parece correcto sin errores pero el script no se carga, revisa la instalación por algo más que esté usando el mismo handle.

En mi caso, como estoy extendiendo un tema padre a través de un tema hijo, (¡tontamente en retrospectiva!) seguí la misma convención de nombres del padre. ¡Lección aprendida!

Adam Lavery

111

3 jun 2020 13:10:57

Normalmente lo hago de esta forma:

Ve al tema hijo

crea una carpeta js dentro del tema hijo
crea un archivo script.js dentro de la carpeta js

y luego pega este código dentro del archivo script.js:

add_action( 'wp_enqueue_scripts', 'custom_scripts', 10 );
function custom_scripts() {
    wp_enqueue_script('custom_javascript', get_stylesheet_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true );
}

jozef koko

21

16 abr 2021 19:07:59

Brad Dalton 6.97K · Accepted Answer · 2015-02-05T12:30:19Z

Aquí tienes un ejemplo funcional:

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom_script.js',
    array( 'jquery' )
);
        }

O como este que aparentemente carga más rápido:

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Fuente http://codex.wordpress.org/Function_Reference/wp_enqueue_script

get_template_directory_uri() solo funcionará en un tema padre.

Brad Dalton

6.97K

5 feb 2015 12:30:19