Como añadir javascript en wordpress


En el capitulo anterior aprendimos como añadir código css en nuestro tema de wordpress ahora vamos añadir código javascript.

Para importar código javascript de forma correcta debemos usar las funciones wp_enqueue_script que provee el core de WordPress.

Empecemos por añadir jQuery en nuestro primer tema de WordPress, para ello es necesario editar el archivo functions.php en la función add_head_styles_and_scripts  añadiendo lo siguiente:

<?php

    function add_head_styles_and_scripts(){
        //funcion para añadir los estilos y scripts de nuestro tema de wordpress
        $version  = '0.0.1'.(date('Y-m-d H:i:s'));
        $urltheme = get_template_directory_uri();
        wp_enqueue_style('style', get_stylesheet_uri(),array(),$version);
        wp_enqueue_style('bootstrap.css', $urltheme.'/css/bootstrap.css',array(),$version);

        //añadimos scripts en nuestro tema
        wp_enqueue_script('jquery-3.5.1.js',$urltheme.'/js/jquery-3.5.1.js', array(),$version,false);

    }
    
    add_action( 'wp_enqueue_scripts', 'add_head_styles_and_scripts' );

?>
Como se puede observar, se ha creado una función llamada add_head_styles_and_scripts, que por sí sola no tiene ninguna utilidad. Para cambiar esto se debe ejecutar la función add_action con el tag wp_enqueue_scripts como primer parámetro. Esto quiere decir que en tiempo de ejecución el core de WordPress lanzará la función add_head_styles_and_scripts, y esta a su vez desencadenará la función llamada wp_enqueue_script.

Para llevar el control de versiones añadimos una variable llamada $version. Quiere decir que, en caso de generar un nuevo cambio solo debemos cambiar el número de versión. Esto ayuda a que no se tome la versión de caché almacenada en el navegador, así se podrán visualizar los cambios de manera inmediata.

Nota: cuando mandes a producción recuerda quitar esta línea de código (date(‘Y-m-d H:i:s’)) ya que la función en un entorno de desarrollo local consiste en mostrar los archivos más recientes, omitiendo la versión en caché del navegador.

Según la documentación del códex de WordPress, la función exacta de wp_enqueue_script recibe los siguientes parámetros:

<?php
    wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
?>

$handle: nombre para identificar el archivo. Este debe ser único, ya que si existe otro con el mismo nombre se tomará el primero que se ejecutó.

$src: URL del archivo. Se puede usar estas dos opciones:

    1. get_template_directory_uri(), que retoma la URL web de la carpeta de WordPress. Para esto se debe concatenar el nombre del archivo, más adelante se mostrará como hacerlo.
    2. Puedes añadir la url absoluta donde se encuentra el archivo por ejemplo: http://example.com/js/mijavascript.js

$deps: indica si el archivo depende de otro grupo de archivos.

$ver: muestra la versión. Puede ser un string o un valor false para no indicar el número de versión.

$in_footer: True o False indica si quieres agregar el script al inicio del sitio web o al final en el Footer, si es una libreria o plugin (JQuery) te recomiendo agregarlo en el header, si es parte de tu codigo te recomiendo agregarlo al final del tema.

Cuando WordPress ejecuta esta función retorna un código HTML como el siguiente:

<script type="text/javascript" src="http://localhost/wordpress.herelodin.com/wp-content/themes/herel-theme/js/jquery-3.5.1.js?ver=0.0.12020-10-28%2022:33:44" id="jquery-3.5.1.js-js"></script>

¿Cómo añadir bootestrap JS  a mi tema de WordPress?

Ahora que hemos aprendido cómo añadir jQuery en el tema de wordpress, ya podemos añadir muchos mas scripts al tema, por el momento vamos agregar el boostrap.js.

en nuestro archivo functions.php añadimos lo siguiente:

<?php

    function add_head_styles_and_scripts(){
        //funcion para añadir los estilos y scripts de nuestro tema de wordpress
        $version  = '0.0.1'.(date('Y-m-d H:i:s'));
        $urltheme = get_template_directory_uri();
        wp_enqueue_style('style', get_stylesheet_uri(),array(),$version);
        wp_enqueue_style('bootstrap.css', $urltheme.'/css/bootstrap.css',array(),$version);

        //añadimos scripts en nuestro tema
        wp_enqueue_script('jquery-3.5.1.js',$urltheme.'/js/jquery-3.5.1.js',array(),$version,false);
        wp_enqueue_script('bootstrap.js',$urltheme.'/js/bootstrap.js',array(),$version,false);

    }
    
    add_action( 'wp_enqueue_scripts', 'add_head_styles_and_scripts' );

?>

Si examinamos el sitio web, nos daremos cuenta de que WordPress ha generado algunas etiquetas y notaremos los dos scripts que programamos anteriormente.

También te puede interesar: Añadir header y footer

Si deseas puedes hacer un donativo de 1 dolar para seguir manteniendo y subir más contenido en este sitio.