Ak sa vám niekedy stalo, že po nasadení novej verzie .css alebo .js súboru ste zmeny nevideli, tak to bolo tým, že browser si tieto súbory ukladá do cache pamäte. Je to tak preto, aby boli nasledujúce loady stránky rýchlejšie. Browser nemá ako vedieť, že nastala zmena, tak mu to treba explicitne povedať.
Na vyčistenie cache pomôže načítanie stránky pomocou CTRL+F5. Aby ste ale zabezpečili komfortné používanie stránky pravidelným návštevníkom, môžete použiť jednoduchý spôsob označenia súboru verziou. Túto verziu je potrebné zadať v samotnom súbore v komentári na úplnom začiatku napr. takto:
/*
version: 3.7.2
*/
Na prečítanie verzie súboru si môžete pripraviť takúto funkciu (táto je inšpirovaná funkciou z worpdressu):
<?php
function get_asset_version($file){
// read first 8 kB of file
$fp = fopen( $file, 'r' );
$file_data = fread( $fp, 128 );
fclose( $fp );
//
// catch CR line end
$file_data = str_replace( "\r", "\n", $file_data );
//
$version = '1.0.0';
//
if ( preg_match( '/^[ \t\/*#@]*' . preg_quote( 'version', '/' ) . ':(.*)$/mi', $file_data, $match ) && $match[1] ) {
$version = $match[1];
} else {
$version = '1.0.0';
}
//
return $version;
//
}
?>
No a samotné linkovanie je potrebné spraviť takto, verziu treba poslať ako url parameter:
<link rel="stylesheet" href="css/elo.css?version=<?php echo get_asset_version('css/elo.css')?>">
Výsledok je potom takýto link na css súbor. Na konci je vždy uvedená verzia. Ak sa verzia zmení, pre browser je to signál, že sa jedná o inú verziu súboru a natiahne ju znova. Ak sa verzia nemení, tak ani browser nerobí nové loady.
<link rel="stylesheet" href="https://wiliak.sk/css/style.css?version=3.7.2">
Ako pripojiť asset vo WordPress
Ak ste vo WordPresse vytvorili vlastnú tému, alebo child tému, takisto odporúčam použiť techniku pripojenia verzie k linku na .css. Ak tak neurobíte, wordpress tam automaticky hodí verziu wordpressu, čo vám v podstate okrem update worpdressu nikdy nepomôže. Na správne pripojenie .css súboru môžete použiť tento kód:
//register plugin css
add_action( 'wp_enqueue_scripts', 'register_easy_shop_styles' );
function register_easy_shop_styles() {
// get version
$css_data = get_file_data( plugins_url( 'easy-webshop/css/easy_webshop_style.css' ), array('version' => 'version'));
$version = $css_data['version'];
wp_register_style( 'easy_webshop_style', plugins_url( 'easy-webshop/css/easy_webshop_style.css' ), $deps = array(), $version );
wp_enqueue_style( 'easy_webshop_style' );
}