Cómo añadir código JavaScript en la cabecera de mi WordPress

Dificultad Baja

Si estás buscando agregar código JavaScript personalizado en la cabecera de tu sitio WordPress, estás en el lugar correcto. En este artículo, te explicaremos cómo hacerlo utilizando el archivo functions.php.

Lo primero que debes hacer es crear un archivo JavaScript con el código que deseas agregar en la cabecera de tu sitio. Una vez que tengas tu archivo JavaScript listo, sigue los siguientes pasos:

1. Registra tu script personalizado en functions.php
2. Agrega tu script personalizado en la cabecera de tu sitio web

Paso 1: Registra tu script personalizado en functions.php

Para registrar tu script personalizado, debes crear una función que utilice la función wp_register_script(). La función wp_register_script() toma varios parámetros, incluyendo el nombre del script, la ruta de acceso al archivo JavaScript, y la versión del script.

Por ejemplo, si tu archivo JavaScript se llama mi-script.js y se encuentra en la carpeta /js/ de tu tema hijo de WordPress, puedes registrar tu script personalizado de la siguiente manera:

function registrar_mi_script_personalizado() {
    wp_register_script( 'mi-script', get_template_directory_uri() . '/js/mi-script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'registrar_mi_script_personalizado' );

En este ejemplo, hemos creado una función llamada registrar_mi_script_personalizado() que utiliza la función wp_register_script() para registrar nuestro script personalizado. El primer parámetro es el nombre del script, el segundo parámetro es la ruta de acceso al archivo JavaScript, el tercer parámetro es un array vacío (ya que no hay dependencias), el cuarto parámetro es la versión del script, y el quinto parámetro es true, lo que significa que el script se cargará en la cabecera.

Paso 2: Agrega tu script personalizado en la cabecera de tu sitio web

Una vez que hayas registrado tu script personalizado, debes agregarlo a la cabecera de tu sitio utilizando la función wp_enqueue_script(). Esta función toma un solo parámetro: el nombre del script que deseas agregar.

Puedes agregar tu script personalizado de la siguiente manera:

function agregar_mi_script_personalizado_en_cabecera() {
    wp_enqueue_script( 'mi-script' );
}
add_action( 'wp_enqueue_scripts', 'agregar_mi_script_personalizado_en_cabecera' );

En este ejemplo, hemos creado una función llamada agregar_mi_script_personalizado_en_cabecera() que utiliza la función wp_enqueue_script() para agregar nuestro script personalizado en la cabecera. El único parámetro es el nombre del script que hemos registrado anteriormente.

Puedes unificar estas 2 funciones en una sola función donde se encuentren los 2 códigos, como os exponemos más abajo.

¿Qué hace el hook wp_enqueue_scripts?

wp_enqueue_scripts es un hook o gancho de WordPress que permite a los desarrolladores registrar y encolar scripts y estilos en una página de WordPress sin tener que modificar el núcleo del código. Uno de los hooks más comunes en WordPress es el wp_enqueue_scripts. Este hook se utiliza en el archivo functions.php de un tema de WordPress para agregar archivos CSS y JavaScript a una página web, lo que permite mejorar el rendimiento del sitio y la experiencia del usuario. (Te repetimos la importancia de utilizar un child template para hacer estas inclusiones de código y no hacerlas en el tema original).

Cuando se utiliza el hook wp_enqueue_scripts, los archivos CSS y JavaScript se cargan de forma asíncrona, lo que significa que el navegador no tiene que esperar a que se cargue todo el contenido de la página antes de comenzar a cargar los estilos y scripts. Esto ayuda a acelerar la carga de la página web, lo que mejora la experiencia del usuario y puede mejorar el ranking del sitio web en los motores de búsqueda.

Cómo utilizar el hook wp_enqueue_scripts

Para utilizar el hook wp_enqueue_scripts, debes agregar un código personalizado en el archivo functions.php de tu tema de WordPress. En este archivo, puedes registrar tus archivos CSS y JavaScript utilizando la función wp_register_script() y la función wp_register_style(). Una vez registrados, puedes encolar tus archivos utilizando la función wp_enqueue_script() y la función wp_enqueue_style().

Aquí hay un ejemplo de cómo utilizar el hook wp_enqueue_scripts para registrar y añadir un archivo JavaScript en tu sitio web de WordPress:

function mi_script_personalizado() {
    wp_register_script( 'mi-script', get_template_directory_uri() . '/js/mi-script.js', array(), '1.0.0', true );
    wp_enqueue_script( 'mi-script' );
}
add_action( 'wp_enqueue_scripts', 'mi_script_personalizado' );

En este ejemplo, hemos creado una función llamada mi_script_personalizado() que utiliza la función wp_register_script() para registrar nuestro archivo JavaScript personalizado. Luego, utilizamos la función wp_enqueue_script() para encolar el archivo JavaScript.