Haces un pequeño cambio en los estilos de tu web, guardas el archivo CSS y vuelves al navegador para comprobar el resultado. Pero algo falla: todo sigue exactamente igual que antes. Pruebas con Ctrl + F5, recargas la página un par de veces y, con suerte, por fin aparece el cambio.
Si trabajas con WordPress y Gutenberg, es posible que esta situación te resulte familiar. La caché del navegador puede ahorrarnos tiempo al visitar una web, pero durante el desarrollo también puede convertirse en una pequeña molestia.
La buena noticia es que existe una forma sencilla de evitar muchas de estas situaciones: utilizar versiones de las hojas de estilos CSS para que el navegador detecte cuándo debe solicitar un archivo actualizado.
Por qué WordPress sigue mostrando los estilos antiguos
Cuando visitas una página web, el navegador puede guardar una copia de determinados archivos, como imágenes, hojas de estilos CSS y archivos JavaScript. Así no tiene que descargarlos de nuevo cada vez que abres la misma página.
El problema aparece cuando estás desarrollando una web y modificas esos archivos con frecuencia. El navegador puede seguir utilizando una copia que ya tenía guardada, aunque hayas subido los cambios al servidor.
Esto no significa necesariamente que WordPress no haya guardado tus cambios. Puede que el archivo CSS esté actualizado y que sea el navegador quien esté mostrando una versión anterior.
Además, hay otros elementos que pueden intervenir: los plugins de caché de WordPress, las cachés del servidor o una CDN. Por eso conviene comprobar dónde está el problema antes de empezar a cambiar configuraciones sin necesidad.
La solución: utilizar versiones en los archivos CSS
Una manera de solucionar este problema es añadir un identificador de versión a la URL de la hoja de estilos. Por ejemplo, en lugar de cargar siempre el mismo recurso, puedes utilizar una dirección como esta:
https://ejemplo.com/wp-content/themes/mi-tema/style.css?ver=1.2
Cuando hagas cambios y actualices la versión a 1.3, la dirección será diferente. El navegador podrá reconocer que se trata de otra URL y solicitar el archivo correspondiente, en lugar de reutilizar directamente la copia asociada a la dirección anterior.
Esta técnica se conoce como versionado de archivos o invalidación de caché. Es especialmente útil durante el desarrollo, cuando necesitas comprobar rápidamente los cambios visuales.
Hay un detalle importante: escribir un comentario dentro del CSS, como /* Versión 1.3 */, no invalida por sí mismo la caché. Para conseguir ese efecto, el identificador debe cambiar en la URL del recurso o debe utilizarse otro mecanismo que haga que el navegador detecte la actualización.
Cómo gestionar la versión de CSS en WordPress
WordPress permite controlar la versión de las hojas de estilos mediante el parámetro $ver de la función wp_enqueue_style(). Esta función se utiliza para registrar y cargar correctamente los archivos CSS de un tema o plugin.
Si tu tema carga una hoja de estilos mediante código PHP, puedes establecer una versión manual y cambiarla cada vez que modifiques el archivo:
function lumazaki_enqueue_styles() {
wp_enqueue_style(
'lumazaki-estilos',
get_stylesheet_directory_uri() . '/style.css',
array(),
'1.2.0'
);
}
add_action('wp_enqueue_scripts', 'lumazaki_enqueue_styles');En este ejemplo, la hoja de estilos se carga con la versión 1.2.0. Cuando realices cambios, puedes actualizar ese valor a 1.2.1, 1.2.2 o el número que corresponda a tu sistema de versiones.
WordPress añadirá ese identificador a la URL del archivo. Así, cuando cambies la versión, el navegador tendrá que solicitar la nueva dirección.
Importante: este código es un ejemplo para un tema que carga su propia hoja de estilos. Antes de añadirlo, comprueba cómo se está cargando actualmente el CSS para no registrar el mismo archivo dos veces ni alterar el orden de los estilos. Si utilizas un tema hijo, adapta la ruta y la función a la estructura de tu proyecto.
Una alternativa todavía más cómoda: detectar los cambios automáticamente
Si no quieres modificar el número de versión cada vez que guardas el CSS, puedes utilizar la fecha de modificación del archivo como identificador. PHP permite obtener ese dato mediante la función filemtime().
El ejemplo quedaría así:
function lumazaki_enqueue_styles() {
$archivo_css = get_stylesheet_directory() . '/style.css';
wp_enqueue_style(
'lumazaki-estilos',
get_stylesheet_directory_uri() . '/style.css',
array(),
filemtime($archivo_css)
);
}
add_action('wp_enqueue_scripts', 'lumazaki_enqueue_styles');Cada vez que cambie la fecha de modificación del archivo, el valor utilizado como versión será diferente. De esta manera, no tendrás que acordarte de actualizar manualmente el número.
Este método resulta práctico durante el desarrollo, aunque conviene tener en cuenta que WordPress tendrá que consultar la fecha del archivo. También debes asegurarte de que la ruta utilizada corresponde al CSS que realmente estás modificando.
¿Y si trabajo con Gutenberg?
El editor de bloques de Gutenberg permite construir páginas y modificar numerosos aspectos del diseño sin escribir código. Sin embargo, cuando necesitas ajustar detalles mediante CSS personalizado, es habitual alternar entre el editor, los archivos de estilos y la vista pública de la web.
Si estás trabajando con los estilos de un tema, un tema hijo o una hoja de estilos adicional, el versionado puede ayudarte a comprobar los cambios con mayor rapidez. Eso sí, la solución dependerá de cómo se cargue ese CSS concreto.
Si los estilos proceden de los estilos globales de WordPress, de los ajustes del editor del sitio o de un plugin, cambiar la versión de otra hoja de estilos no solucionará necesariamente el problema. En esos casos tendrás que localizar el recurso que está generando los estilos y comprobar si interviene alguna caché adicional.
Si después de cambiar la versión sigues viendo el diseño anterior, revisa también la caché del plugin, del servidor o de la CDN, si utilizas alguna. La versión de la URL ayuda a evitar la caché asociada a una dirección anterior, pero no elimina automáticamente todas las capas de caché de una web.
Un pequeño ajuste que ahorra tiempo de desarrollo
En diseño web hay tareas que apenas llevan unos segundos, pero que repetimos decenas de veces. Cambiar un margen, ajustar el tamaño de una tipografía, comprobar una alineación o corregir el espacio entre dos bloques.
Cuando cada modificación viene acompañada de varias recargas, el trabajo se vuelve más lento de lo necesario. Y si estás cuidando los detalles de una web, interrumpir constantemente ese proceso tampoco ayuda demasiado.
En Lumazaki, donde el diseño gráfico y el diseño web conviven en el mismo trabajo, estos pequeños ajustes técnicos también forman parte del proceso creativo. Dedicar un poco de tiempo a mejorar la forma de trabajar puede ahorrarnos bastantes minutos después.
Si quieres profundizar en esta técnica, puedes consultar la documentación oficial de WordPress sobre wp_enqueue_style(), donde se explica cómo funciona el parámetro de versión y cómo se añade a la URL de una hoja de estilos.
Y ahora te toca a ti: ¿sigues recurriendo a Ctrl + F5 cada vez que cambias el CSS o tienes algún sistema para olvidarte de este problema?