Dynamická verzia pre štýly / javaskripty témy

Obtiažnosť:
Začiatočník
Pokročilý
Skúsený
Expert

Pri vytváraní témy a jej testovaniu, vždy narazíte na problém lokálnej cache prehliadača. Ak robíte zmeny a tie si následne prezeráte v rôznych prehliadačoch, niektoré z nich nenačítajú znova súbory štýlu a javascriptu.

Samozrejme je to možné upraviť si to v nastaveniach, ale stále treba myslieť na klienta, kolegu a nakoniec hlavne na návštevníka stránky.

Takto som to riešil na začiatku

Keďže šlo o to, aby prehliadač znovu načítal daný súbor, potreboval som, aby sa na koniec súboru pridal query string na základe ktorého sa súbor načíta nanovo. Pridanie verzie za súbor v tvare ?v=... je štandardnou súčasťou funkcie wp_enqueue_style() a wp_enqueue_script(). Lenže ako to rieišť. Najprv som to menil ručne… ale stále som na to zabúdal. Tak som si to vytvoril nasledovné:

/**
 * Enqueue scripts and styles.
 * Platí pre hlavnú tému
 */
function viking_add_scripts() {
  $ver = '1.0';
  $ver = date( 'YmdGis' );
  
  // pridanie štýlu
  wp_enqueue_style( 'viking-style', get_template_directory_uri() . '/assets/css/main.css', array(), $ver );
  // Pridanie javaskriptu
  wp_enqueue_script( 'viking-script', get_template_directory_uri() . '/assets/js/main.js', 'jquery', $ver, true );
  
}
add_action( 'wp_enqueue_scripts', 'viking_add_scripts' );
/**
 * Enqueue scripts and styles.
 * Platí pre child tému
 */
function viking_add_scripts() {
  $ver = '1.0';
  $ver = date( 'YmdGis' );
  
  // pridanie štýlu
  wp_enqueue_style( 'viking-style', get_stylesheet_directory_uri() . '/assets/css/main.css', array(), $ver );
  // Pridanie javaskriptu
  wp_enqueue_script( 'viking-script', get_stylesheet_directory_uri() . '/assets/js/main.js', 'jquery', $ver, true );
  
}
add_action( 'wp_enqueue_scripts', 'viking_add_scripts' );

Takto sa do témy pridávajú skripty a štýly. Pomocou hooku wp_enqueue_scripts. Vo vytvorenej funkcii mám 2x po sebe deklarovanú premennú $ver (prvá je pripravená pre live verziu a druhá je iba pre vývoj, alebo keď viem, že budem robiť veľa zmien). Pred nasadením na live tú druhú deklaráciu zakomentujem a ručne zmením tú prvú deklaráciu.

$ver = '1.1';
// $ver = date( 'YmdGis' );

…a áno, stále som na to zabúdal.

…príklad načítavania skriptov na stránke. Pre bootstrap.bundle.min.js a vikingtheme-script.min.js som nastavil novú verziu. Ako môžme vidieť, tieto súbory sa načítali, ostatné sa použili z pamäte. Takto sa šetrí čas pri načítavaní stránky.

Ako to robiť správne, alebo ako to robím dnes

Problémom predchádzajúceho riešenia je, že pri každom znovu načítaní stránky sa zmenila verzia (lebo date()vrátil stále aktuálny čas) a tak si prehliadač znova a znova načítaval všetky súbory. Dialo sa to všade, kde som použil tento spôsob pridania query string, aj keď k úpravám v tomto súbore nedošlo.

Práve kvôli tomu, že pri nasadzovaní som na to zabúdal (lebo… ešte posledná kontrola pred nasadením, vymazanie zbytočností, rýchla kontrola…). Preto som hľadal lepší spôsob, ako to vyriešiť.

/**
 * Enqueue scripts and styles.
 */
function viking_add_scripts() {
  $vercss = date( 'YmdHi', filemtime( get_template_directory() . '/assets/css/main.css' ) );
  $verjs  = date( 'YmdHi', filemtime( get_template_directory() . '/assets/js/main.css' ) );
  
  // pridanie štýlu
  wp_enqueue_style( 'viking-style', get_template_directory_uri() . '/assets/css/main.css', array(), $vercss );
  // Pridanie javaskriptu
  wp_enqueue_script( 'viking-script', get_template_directory_uri() . '/assets/js/main.js', 'jquery', $verjs, true );
  
}
add_action( 'wp_enqueue_scripts', 'viking_add_scripts' );

Nakoniec som prišiel na to, aby to fungovalo presne, ako potrebujem. Pomocou php funkcie filemtime()som si zistil timestamp poslednej úpravy súboru. Premenil som si teda získaný Unix timestamp na rozumnú formu pomocou už hore použitej funkcie date().

Pozor, pre funkciu filemtime() je nutné použiť absolútnu servrovú adresu (absolute server path) get_template_directory(). Nezabudnite, že pre child tému treba použiť funkciu get_stylesheet_directory().

Čo sa vlastne stane. Pri uložení súboru sa zmení čas poslednej úpravy súboru a ten sa zmení až pri ďalšom uložení súboru. …a to je presne to, čo som chcel. Takto sa verzia menila iba vtedy, keď bol súbor uložený – to je o ďalšiu kontrolu pred nasadením na live menej.

0 0 votes
Hodnotenie článku
Autor
Navigácia
Odoberať
Upozorniť na
guest
0 Komentáre
Inline Feedbacks
View all comments