WordPress: Cómo cargar correctamente recursos CSS y JavaScript

¡Buenos días! En este vídeo-tutorial vemos cómo cargar correctamente los estilos CSS y los recursos JavaScript en una página web hecha en WordPress. ¡Vamos allá!

YouTube video

Repasemos las tres partes del vídeo, una por una.

Crear la función para cargar los recursos, con wp_enqueue_scripts

Como vemos esta función es muy sencilla. Os dejo aquí el código por si queréis copiarlo a vuestro functions.php:

function custom_scripts () {
wp_enqueue_style();
wp_enqueue_script();
}
add_action('wp_enqueue_scripts', 'custom_scripts');

El nombre de la función puede ser cualquiera, mientras coincida con el segundo parámetro en la acción añadida después.

Cómo cargar estilos CSS

Realizamos este paso con la función wp_enqueue_style(). Como podéis ver me he saltado muchos parámetros opcionales.

Si queréis saber para qué sirven (ya que en algunos casos vale la pena especificar estos parámetros, os dejo aquí el enlace a la función en el codex de WordPress.

Cómo cargar scripts de JavaScript

En el caso de JavaScript utilizamos la función wp_enqueue_script(). Fijaros que es script y no scripts como en el primer paso, así que procurad de no equivocaros en esto. Igual que antes, me he dejado varios parámetros pero podéis leer más sobre ellos en este enlace.

Sólo un apunte antes de irme: dentro de wp_enqueue_script() he utilizado la función get_stylesheet_directory_uri(). Lo que hace esta función es sacar la ruta de la carpeta del theme que estamos utilizando.

En el caso del vídeo, por ejemplo, esta función nos devuelve https://empresiona.dev/wp-content/themes/btheme. Luego, con un punto en medio, le añadimos el resto de la ruta para especificar dónde esta el archivo en cuestión lo que al final se interpreta como https://empresiona.dev/wp-content/themes/btheme/js/scripts.js.

No es obligatorio usar esta función pero ahorra algo de tiempo, y aparte os la enseño y así ya aprendéis algo más para futuros desarrollos 🙂

También te puede interesar

WordPress: Cómo crear un botón con efecto de desplazamiento
WordPress: Cómo cargar y usar los iconos de Font Awesome
PageSpeed: Cómo resolver Render-blocking JavaScript y CSS en WordPress

¿Eres una agencia o diseñador y necesitas un servicio profesional de maquetación web?
Tu web maquetada pixel-perfect en tiempo record con las mejores prácticas de desarrollo y optimización de velocidad
Servicio maquetación web