Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Cómo sobreescribir un script js en un child theme de WordPress

Imago voragine.net
[actualizado el ]Enlace permanente

Para modificar un archivo javascript en un tema hijo (child theme) de WordPress no basta con incluirlo en la carpeta del child theme y esperar que WordPress lo use en vez del equivalente en el parent theme (tema padre), como ocurre con los archivos PHP.

Con los archivos javascript tenemos que realizar dos operaciones: eliminar de la cola de scripts el archivos del parent theme, y añadir el archivo modificado alojado en la carpeta del child theme:

function child_theme_prefix_load_scripts() {
 wp_dequeue_script('parent-theme-script-handler');
 wp_enqueue_script(
   'child-theme-script-hadler',
   get_stylesheet_directory_uri().'/js/script.js',
   array( 'jquery' ), // dependencias
   '1.0', // versión
   false // incluir script en la sección header del HTML
 );
}
add_action( 'wp_print_scripts', 'child_theme_prefix_load_scripts', 100 );

Usar el hook wp_print_scripts, en vez de wp_enqueue_scripts, nos asegura que la acción se ejecutará después de que el parent theme haya registrado y añadido a la cola los scripts.

Además de la función wp_dequeue_script existe wp_deregister_script. Ambas conseguirán que el script del parent theme no se cargue, pero usando la segunda sin la primera obtendremos un notice de PHP. Parece ser que lo correcto es usar ambas.

4 comentarios

  1. Hola Alfonso, muchas gracias por el aporte!
    Estoy intentándolo pero no me sale. Entiendo lo que estoy haciendo y la dinámica, pero del lenguaje, ni idea.
    Lo estoy insertando en mi archivo functions.php de mi tema child. Pero el dreamwaver me está dando error de sintaxis en las lineas 9 y 11 (de tu script).

    Qué puede ser?

    Muchas gracias!
    Chris.

    1. Hola Chris,

      el snippet tenía un error: la segunda llamada a wp_enqueue_script() no estaba cerrada correctamente. Y la línea 11 sobraba.

      Ya está corregido. Gracias por tu comentario.

    • Por Natomo •

    Gracias por tu información me ha servido de mucho!

    El único cambio que he tenido que hacer es colocar el último «);» delante de false y borrarlo de la parte final. También ver en el archivo del tema padre la version de jquery que usaba mi tema padre.

    Funciona perfectamente, GRACIAS de nuevo

    1. Hola Natomo, sí, en efecto había dos errores en el snippet. Ya están corregidos. Gracias por el apunte.

Dejar un comentario

*
*

 

No hay trackbacks