¿Cómo sobrescribir archivos JavaScript en un tema hijo?

Question

¿Cómo sobrescribir archivos JavaScript en un tema hijo?

25 ago 2011, 01:14:24

Vistas: 75.3K

Votos: 43

Estoy cargando algunos archivos JavaScript en el tema padre. La ruta en el tema padre es:

scripts > custom.js

En el tema hijo, estoy creando la misma ruta (scripts > custom.js) y modificando parte del jQuery dentro del archivo custom.js.

El problema es que los cambios no se están aplicando. ¿Es esta la forma incorrecta de realizar cambios en estos archivos en el tema hijo?

Christopher John

765

tema hijo wp enqueue script

Comentarios

¿Qué es el Tema padre? ¿Cómo están siendo llamados los scripts por el Tema padre?

Chip Bennett

25 ago 2011 01:17:34

Todas las respuestas a la pregunta

Comentarios

si el tema padre utiliza get_stylesheet_directory_uri para encolar scripts, entonces el tema hijo tendrá que duplicar todos los scripts encolados de esta manera, porque de lo contrario no serán encontrados. No existe un mecanismo de respaldo en get_stylesheet_directory_uri para verificar si un archivo individual existe en el tema hijo y recurrir al archivo del tema padre si es necesario.

User

26 jul 2012 16:20:01

Del Codex: "wp_print_scripts no debe utilizarse para encolar estilos o scripts en la página principal. Usa wp_enqueue_scripts en su lugar." http://codex.wordpress.org/Plugin_API/Action_Reference/wp_print_scripts

Christian Lescuyer

13 ago 2013 17:53:02

Ten en cuenta cuándo fue escrito esto: hace dos años. Antes de que wp_enqueue_scripts pudiera usarse para encolar scripts únicamente en el front end. Actualizado. Si ves algo desactualizado, siéntete libre de editarlo.

chrisguitarguy

13 ago 2013 18:02:49

Lo siento, no hay crítica implícita, voté a favor de tu respuesta :)

Christian Lescuyer

16 ago 2013 22:46:47

Ten en cuenta que quizás necesites establecer una prioridad tardía (por ejemplo 100) para asegurarte de que tu desencolado ocurra después del encolado del tema padre.

add_action( 'wp_enqueue_scripts', 'wpse26822_script_fix', 100 );

de http://codex.wordpress.org/Function_Reference/wp_dequeue_script

Spone

4 sept 2014 08:18:24

Mostrar los 4 comentarios restantes

En algunos casos es importante priorizar tanto las llamadas a add_action como a la función wp_enqueue_script de la siguiente manera:

add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
    wp_dequeue_script('storefront-navigation');
    wp_enqueue_script('my_storefront-navigation', get_stylesheet_directory_uri().'/js/navigation.min.js', array('jquery'),20151110,true);
}

En este caso, wp_enqueue_scripts fue llamado por el tema padre con una prioridad de 20120206 (la fecha) y esta acción se agrega con una prioridad apenas mayor para que se elimine de la cola inmediatamente. Luego, la sentencia de encolado que sigue en realidad tiene prioridad después de eso para asegurar que se cargue después de que el antiguo fue eliminado de la cola. El true, en este caso también es importante porque especifica que debe encolarse en el footer, que es donde el script padre fue encolado originalmente.

Además, no puedo explicarlo completamente, pero noté que si tienes cuidado al eliminar el script inicial de la cola inmediatamente después de que se encola, parece que puedes evitar efectivamente que se cargue en primer lugar.

damiankaelgreen

11

11 nov 2015 03:24:10

Comentarios

La función wp_enqueue_script no tiene un parámetro de prioridad, solo tiene un número de versión que se concatena al final de la ruta como una cadena de consulta. Este parámetro se utiliza para garantizar que la versión correcta se envíe al cliente independientemente del almacenamiento en caché [...]

Emile Bergeron

18 ene 2016 16:51:50

llama a wp_deregister_script antes de registrar tu propia versión

Mohamed Abo Badawy

111

25 dic 2016 17:17:08

Comentarios

¿Por qué? Esto solo es necesario cuando estás usando el mismo handle (identificador), algo que no tienes que hacer. Probablemente ni siquiera deberías, porque es más fácil depurar código cuya fuente es clara.

fuxia

25 dic 2016 20:14:32

// encolar tu archivo de script requerido
add_action('wp_enqueue_scripts', 'your_child_theme_js_file_override');
function your_child_theme_js_file_override(){
    wp_enqueue_script( 'child_theme_script_handle', get_stylesheet_directory_uri() . '/assets/js/your-file.js', array('jquery' ) );
}

// desencolar tu archivo de script requerido
function your_child_theme_js_file_dequeue() {
   wp_dequeue_script( 'parent_theme_script_handle' );
}
add_action( 'wp_print_scripts', 'your_child_theme_js_file_dequeue', 100 );

Zabid Ahmed

11

28 may 2019 17:57:18

Desde la versión 4.7 de WordPress puedes usar 'get_theme_file_uri()' que primero buscará en la carpeta de tu tema hijo y después en la carpeta del tema padre. De esta manera, el archivo en el tema hijo tendrá prioridad.

   wp_enqueue_script('custom-js', get_theme_file_uri() . '/scripts/custom.js');

Stefan

111

22 sept 2021 15:13:20

chrisguitarguy 21.5K · Accepted Answer · 2011-08-25T01:27:39Z

Los temas hijos solo sobrescriben archivos PHP (como header.php) que son incluidos con funciones como get_template_part o get_header, etc.

La forma correcta de agregar scripts en WordPress es usando wp_enqueue_script. Si tu tema padre utiliza esto, puedes sobrescribir los archivos JS usando wp_dequeue_script y encolando los tuyos.

Así...

<?php
// Se engancha tarde para asegurar que el registro del tema padre 
// ya haya ocurrido y así poder deshacerlo. De lo contrario, el tema padre  
// simplemente encolará su script de todos modos.
add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 100);
function wpse26822_script_fix()
{
    wp_dequeue_script('parent_theme_script_handle');
    wp_enqueue_script('child_theme_script_handle', get_stylesheet_directory_uri().'/scripts/yourjs.js', array('jquery'));
}

Si el tema padre no está usando wp_enqueue_script, probablemente esté enganchándose a wp_head (o wp_footer) para imprimir los scripts ahí. Entonces usarías remove_action para eliminar esas funciones que imprimen los scripts, y luego encolar tu propio script.

Si el script está codificado directamente en el archivo de plantilla, solo necesitarás reemplazar ese archivo en tu tema hijo sin la etiqueta del script.

Si usaron llamadas a wp_enqueue_script que utilizan get_stylesheet_directory_uri, entonces no deberías tener que hacer nada. Como esto no está ocurriendo, tendrás que investigar qué hizo el autor del tema.