WordPress dispone de su propio sistema de versioning tanto para los ficheros de hojas de estilo (CSS) como para los ficheros de scripts (JS). Sin embargo, el sistema de utilizado por WordPress no es el que muchos desarrolladores desearían ya que la versión utilizada es la versión del propio WordPress. Es decir, si nos encontramos con una versión de WordPress 5.2.4 nuestros ficheros CSS y JS tendrán esta versión (“?ver=5.2.4′”) independientemente de las modificaciones que implementemos posteriormente.
Los recursos de nuestras páginas (CSS y JS) pueden haber sido cacheados en los navegadores de nuestros usuarios y pueden estar ejecutando un CSS y/o JS obsoletos o caducos.
Para cambiar la forma en la que WordPress administra las versiones de CSS y JS podemos realizar lo siguiente:
Utilizando plugin Autover
El plugin Autover añadirá automáticamente un número de versión para nuestros ficheros CSS y JS, siempre y cuando estos ficheros se estén añadiendo a través de las funciones de encolado de WordPress (wp_enqueue_style y wp_enqueue_script). Si no has tocado nada es la forma habitual que tiene WordPress de añadir el código CSS y JS a nuestras páginas, por lo que no has de hacer nada más que activar el plugin desde la zona administrativa de WordPress. A continuación una imagen de cómo quedaría el código fuente con el plugin activo.
Modificar el fichero functions.php
Si no queremos utilizar plugins de terceros (opción recomendada), podemos modificar el fichero functions.php perteneciente a nuestro tema y así conseguir el mismo resultado. Las funciones encargadas de encolar tanto nuestros estilos como scripts son wp_enqueue_style y wp_enqueue_script. Lo más probable que encontremos estas funciones dentro de una función generada por el propio tema <nombre_del_tema>_scripts(). En ella se encuentran las llamadas a la funciones anteriormente mencionadas para encolar los ficheros CSS y JS.
La idea consiste en generar un número nuevo cada vez que los ficheros encolados en esta función son modificados. Para ello haremos uso de la función PHP filemtime(), que generará un valor numérico en función de la fecha actual. Veamos como implementarlo con el siguiente código:
/**
* Enqueue scripts and styles.
*/
function jmaleman_scripts() {
// CSS
$style_path_file = get_template_directory() . '/style.css';
if($style_path_file):
$css_ver = filemtime($style_path_file);
wp_enqueue_style( 'jmaleman-style', get_template_directory_uri() .'/style.css', array(), $css_ver);
endif;
// JS
$script_path_file = get_template_directory() . '/js/utils.js';
if($script_path_file):
$js_ver = filemtime($script_path_file);
//var_dump($js_ver);
wp_enqueue_script('jmaleman-script', get_template_directory_uri() . '/js/utils.js', array(), $js_ver);
endif;
}
add_action( 'wp_enqueue_scripts', 'jmaleman_scripts' );
En nuestra función estamos aplicando esta mejora únicamente a dos ficheros (style.css y utils.js), pero se podría perfectamente aplicar al resto de elementos que encole nuestro tema.
Conclusiones
Como has podido comprobar mejorar la forma en la que WordPress realiza su particular versioning es relativamente sencillo. Como ya he comentado anteriormente, es preferible editar el fichero functions.php antes que instalar cualquier plugin de terceros.