Cómo evitar problemas de caché al actualizar estilos CSS en WordPress

Introducción:
¿Alguna vez has hecho un cambio en tus estilos CSS en WordPress y no se reflejaba en la web? Tranquilo, no estás solo. Este problema común se debe, en la mayoría de los casos, al caché del navegador. En este artículo te explicamos por qué sucede, cómo funciona el sistema de versiones en WordPress y un truco profesional para que tus estilos se actualicen siempre correctamente, sin romperte la cabeza.

¿Por qué no cambian los estilos aunque los modifiques?
Cuando trabajamos en WordPress, puede ocurrir que al hacer cambios en el archivo CSS no veamos esos cambios reflejados inmediatamente en la web. Esto pasa porque el navegador guarda en su caché los archivos estáticos —como CSS, imágenes o JavaScript— para cargar las páginas más rápido.

Durante las clases, muchos alumnos se encontraban con este problema. La solución provisional era abrir el inspector del navegador, deshabilitar el caché y ¡magia!, los estilos se actualizaban. Pero… ¿es recomendable navegar con el caché deshabilitado? En absoluto.

Deshabilitar el caché del navegador: ¿una buena idea?
Navegar con el caché desactivado implica que estarás descargando constantemente todos los recursos estáticos de cada página web que visites. Esto ralentiza la navegación y puede afectar seriamente tu consumo de datos, especialmente si usas una conexión móvil. Por eso, salvo para tareas puntuales de desarrollo, siempre debes mantener el caché habilitado.

Cómo WordPress gestiona los estilos con versión
En WordPress, los estilos se suelen incluir en el archivo functions.php con una línea de código como esta:

wp_enqueue_style('estilo-personalizado', get_stylesheet_uri(), array(), '1.0');

Ese último parámetro ('1.0') es la versión del archivo. El navegador lo utiliza para saber si debe volver a descargar el archivo o puede usar el que ya tiene en caché. Si no cambias la versión cada vez que modificas el CSS, el navegador seguirá usando la antigua y no mostrará los cambios.

¿Cambiar la versión manualmente cada vez? Mejor no.
Modificar la versión de forma manual cada vez que actualizas un estilo es poco práctico. ¿Te imaginas tener que abrir functions.php y cambiar '1.0' por '1.1', '1.2', etc., cada vez que haces un ajuste? Es una pérdida de tiempo y es fácil olvidarlo.

El truco definitivo: usar la fecha de modificación del archivo
Una solución mucho más elegante y automática es utilizar la función filemtime() de PHP. Esta función obtiene la fecha y hora de la última modificación del archivo, y la usa como versión:

wp_enqueue_style('estilo-personalizado', get_stylesheet_uri(), array(), filemtime(get_stylesheet_directory() . '/style.css'));

Así, cada vez que modifiques tu archivo CSS, el valor de la versión cambiará automáticamente y el navegador lo detectará como un nuevo archivo, descargando los últimos cambios.

¿Funciona de verdad?
¡Sí! Puedes comprobarlo modificando algo en tu CSS, por ejemplo:

body {
  background-color: blue;
}

Al recargar la página, verás el nuevo color de fondo sin necesidad de borrar caché manualmente. Todo gracias a que el navegador reconoce la nueva «versión» del archivo CSS basada en la fecha de modificación.

¿Y en producción?
En servidores de producción, esta técnica también funciona, pero es común fijar versiones concretas como '1.0', '2.0', etc., especialmente si estás gestionando grandes volúmenes de tráfico. Aun así, dejar el sistema basado en filemtime() también es válido y garantiza que todos los usuarios vean siempre los estilos actualizados.

Conclusión: asegura tus cambios sin luchar contra el caché
Evitar problemas con el caché del navegador es clave cuando trabajas con estilos en WordPress. Usar filemtime() en lugar de actualizar manualmente la versión te ahorra tiempo, dolores de cabeza y asegura que tus visitantes siempre vean la versión más reciente de tu sitio.

Si te ha servido este truco, ¡dale «me gusta» al vídeo, suscríbete al canal y comparte este artículo con tus compañeros de desarrollo web! Nos vemos en el próximo tip.