En este nuevo tutorial aprenderemos a cómo nuestra página web puede actualizar siempre la última versión de estilos CSS en todos los child theme de Genesis.
¿Para qué sirve que nuestra página web cargue la última versión de CSS actualizada? Algunas veces realizamos modificaciones en nuestro archivo style.css pero en cambio estos cambios no se visualizan en nuestra web.
Esto es debido a la caché.
La caché del navegador guarda los estilo CSS para que no lo tenga que cargar cada vez que visitamos la página web. El problema viene cuando actualizamos este archivo pero el navegador no es consciente de dicho cambio, por este motivo, carga la versión que tenía en caché.
Para solucionar dicho problema tenemos que cargar nuestra página web vaciando la caché. En Chrome, puedes utilizar la combinación de teclas CTRL+SHIFT+R para realizarlo automáticamente. No obstante, tus clientes nunca harán esto y podrían ver siempre una versión anterior de tus estilos CSS.
¿Cómo lo vamos a solucionar? Muy fácil, vamos a añadir un código que force cargar de nuevo el archivo style.css cuando ha habido una modificación. De este modo, nuestro style.css tendrá un nombre distinto (la fecha de modificación) cada vez que haya una variación. Al tener un nombre distinto, el navegador sabrá que tiene que cargarlo de nuevo.
¿A qué es una maravilla de solución? A mí personalmente me ha quitado muchos dolores de cabeza en relación con mis clientes, ya que siempre habían problemas de que no veían lo mismo que yo veía. Todo por la puñetera caché.
Código para mantener siempre la última versión de CSS en Genesis
Para ello, simplemente tendremos que añadir el siguiente código en el archivo functions.php de nuestro child theme. En este caso no podremos añadirlo en nuestro plugin personalizado ya que no funcionará.
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
add_action( 'wp_enqueue_scripts', 'jc_refresh_css_stylesheet' );
function jc_refresh_css_stylesheet() {
$theme_name = defined('CHILD_THEME_NAME') && CHILD_THEME_NAME ? sanitize_title_with_dashes(CHILD_THEME_NAME) : 'child-theme';
$stylesheet_uri = get_stylesheet_directory_uri() . '/style.css';
$stylesheet_dir = get_stylesheet_directory() . '/style.css';
$last_modified = date ( "njYHi", filemtime( $stylesheet_dir ) );
wp_enqueue_style( $theme_name, $stylesheet_uri, array(), $last_modified );
}Con este código ya no tendrás que forzar a tu navegador a recargar la caché cada vez que hagas un cambio en tus estilos CSS.
Resumen y conclusión
Este código será una maravilla para todos aquellos que están diseñando su página web y realizando continuos cambios en ella.
No obstante, recomendaría quitar este código cuando ya tu hoja de estilos CSS sea la definitiva. De esta manera, podrás aprovecharte de la caché del navegador para que tu página web vaya mucho más rápida. Sí, aunque parezca mentira la caché está para beneficiarnos, aunque tenemos que aprender cuando utilizarla y cuando no.
¿Te has quedado con alguna duda acerca de este tutorial o quieres comentarme alguna sugerencia? No dudes ni un sólo instante y contacta conmigo. Soy todo oídos.