Refrescar los estilos CSS almacenados en el navegador de un usuario

[ 25 abril 2017 ] [ Actualizado: 3 mayo 2017 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

Imagínate que tienes un sitio en producción, quieres hacer ciertos retoques en el diseño, para esto haces modificaciones en algún archivo .css de tu theme, tu ves los cambios, pero ¿cómo refrescar los estilos css en el navegador del usuario?

1- Generalidades

Cuando visitas un sitio web, tu navegador carga archivos CSS, javascript, imágenes, etc. estos recursos se almacenan en la cache del navegador, de manera que, si luego, vuelves a cargar la página con los mismos recursos, entonces el navegador usa lo que tiene en cache, en lugar de descargarlo nuevamente del servidor.

Esto es muy útil para temas de optimización, sin embargo si hacemos un cambio en algún archivo estático estos cambios no se verán inmediatamente en el navegador del usuario hasta que refresque el navegador o limpie la cache.

2- Expiración de archivos por .htaccess

Este método sirve para cualquier tipo de archivo estático y no sólo para archivos CSS, la idea es a través del archivo .htaccess indicar al navegador del cliente el tiempo de expiración por cada tipo de archivo, por ejemplo puedes usar el siguiente código:


# DIRECTIVAS DE EXPIRACION
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresByType text/css "access plus 1 week"
	ExpiresByType image/gif "access plus 1 month"
	ExpiresByType image/png "access plus 1 month"
	ExpiresByType image/jpeg "access plus 1 month"
	ExpiresByType application/x-javascript "access plus 1 month"
	ExpiresByType application/javascript "access plus 1 week"
	ExpiresByType application/x-icon "access plus 1 year"
	ExpiresDefault "access plus 10 days"
</IfModule>
# FIN DIRECTIVAS EXPIRACION

En el código anterior hemos indicado que para los archivos de tipo css la expiración será de una semana, podríamos especificar un periodo de duración mucho menor por ejemplo en horas o minutos, puedes revisar la documentación de mod_expires.

3- Expiración de archivos a través de un parámetro

Esta sería una opción más viable si has modificado tu archivo .css y quieres que en el navegador de usuario se muestren los cambios inmediatamente. La idea es simular un cambio de nombre del archivo modificado, por ejemplo:

Si el navegador cargó style1.css , ahora cargará style2.css

Como style2.css es un nuevo archivo no lo tiene en cache, asi que tiene que volver a descargarlo. Evidentemente no cambiaremos el nombre, sino que agregaremos un parámetro, es decir quedaría:

Si el navegador cargó style.css?ver=1.0 , ahora cargará style.css?ver=1.1

En WordPress para realizar este cambio tienes los siguientes casos:

3.1 Modificación directa de style.css

Si has modificado el archivo style.css de tu theme directamente, busca en tu archivo functions.php la función wp_enqueue_style que coloca en cola el archivo style.css, como verás en la documentación de esta función uno de los parámetros es la versión.

wp_enqueue_style( 'ID-THEME-CSS', get_stylesheet_uri(), array(), 'VERSION' );

En el código anterior:

ID-THEME-CSS es el ID de tu theme, por ejemplo: ‘twentyseventeen-style’
array() son las dependencias, sino tiene dependencias pasamos un array vacío
VERSION es el número de versión que usarás, por ejemplo : ‘1.2.0’

Es común usar para yyy el mismo valor de versión que tiene el theme (la versión esta en la metadata del archivo style.css del theme), en este caso quedaría:

wp_enqueue_style( 'xxx', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

3.2 Modificación de un child theme

En el caso de un Child theme, te sugiero agregar un código que haga referencia al style.css del tema padre y luego una referencia al style.css de tu tema hijo, es decir en tu archivo functions.php de tu child theme usar un código similar a:

function my_theme_version_enqueue_styles() {

	$parent_style = 'ID-THEME-CSS';
	$child_style  = 'ID-CHILD-CSS';

	wp_enqueue_style( $parent_style, 
					get_template_directory_uri() . '/style.css' 
					);

	wp_enqueue_style( $child_style,
					get_stylesheet_directory_uri() . '/style.css',
					array( $parent_style ),
					wp_get_theme()->get('Version')
					);

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

En el código anterior

ID-THEME-CSS es el ID de tu theme, por ejemplo: ‘twentyseventeen-style’
ID-CHILD-CSS es el ID del theme hijo, por ejemplo: ‘twentyseventeen-child-style’
La primera función de wp_enqueue_style agrega el archivo style.css del theme padre
La segunda función de wp_enqueue_style agrega el archivo style.css del theme hijo, nota que en esta función hay una dependencia del theme padre, además se usa la versión del theme en el último parámetro.

3.3 Modificación en themes Genesis

Algunos themes como los basados en el Framework Genesis tienen una constante en el archivo functions.php que define la versión, y que puedes usar para cambiar la versión del archivo style.css.

define ('CHILD_THEME_VERSION', '1.0.0' );

3.4 Modificación de otros archivos CSS o Javascript

Para otros archivos CSS diferentes de style.css el proceso es similar al punto 3.1, en el caso de archivos Javacript igualmente se sigue el mismo procedimiento, sólo hay que ubicar la función wp_enqueue_script que es la que carga los archivos de javascript.

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.