Agregar javascript al tema hijo

Question

Agregar javascript al tema hijo

21 jun 2018, 13:31:24

Vistas: 47.4K

Votos: 11

Quiero aplicar algo de javascript a mi header y deseo saber cuál es la mejor manera de implementarlo.

aquí está el código fuente que contiene el javascript que estoy incluyendo - https://codepen.io/kaemak/pen/mHyKa/

¿Debería crear un nuevo archivo de javascript y luego agregarlo al tema hijo? Si es así, no estoy seguro de cómo nombrar el archivo y si se aplicará al head desde esta ubicación.

Jordan

111

javascript tema hijo encabezados

Todas las respuestas a la pregunta

Comentarios

si quiere encolar js desde el hijo debe usar get_stylesheet_directory_uri o la función más nueva get_theme_file_uri.

guido

21 jun 2018 20:07:09

get_theme_file_uri busca primero en el directorio de la hoja de estilos antes que en el directorio de la plantilla, por lo que los temas que heredan de un tema padre pueden simplemente sobrescribir un archivo, y él simplemente quiere agregar el nuevo script desde el directorio de la hoja de estilos, así que get_stylesheet_directory_uri sería más adecuado para este caso.

Akshat

21 jun 2018 20:24:47

get_theme_file_uri no sobrescribe nada si se usa en un tema hijo, simplemente intentas obtener el uri en el hijo y si no existe en el padre. En el caso de un asset, la sobrescritura se realiza mediante el handle. Por cierto, get_template_directory_uri solo busca en el tema padre. Por eso comenté.

guido

21 jun 2018 20:39:02

Comentarios

Agregar JS directamente no es la mejor práctica. Debe encolarse a través de functions.php. https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-274

WebElaine

21 jun 2018 18:38:46

Akshat 1.2K · Answer 1 · 2018-06-21T19:49:15Z

Debes encolar el script en el functions.php del tema hijo. Por ejemplo, si el nombre del archivo JS es custom.js y lo colocas dentro de la carpeta js en tu tema hijo, entonces en functions.php deberías agregar:

function my_custom_scripts() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

Aquí get_stylesheet_directory_uri() devolverá el directorio de tu tema hijo, luego array( 'jquery' ) hará que tu JS se cargue después de jQuery. Si tu script requiere jQuery entonces debes usar esto, de lo contrario puedes eliminarlo o agregar el script dependiente aquí. El último parámetro true, es para hacer que tu JS se cargue en el footer.

Akshat

1.2K

21 jun 2018 19:49:15

Swati 40 · Answer 2 · 2018-06-21T18:14:18Z

Sí, crea un nuevo archivo JavaScript y simplemente llámalo donde quieras, yo sugeriría llamarlo en el footer ya que es la mejor manera de llamar archivos js. Puedes agregar el siguiente código a tu footer:

<script  src="<?php echo get_template_directory_uri(); ?>/filename.js"></script>

Swati

40

21 jun 2018 18:14:18