Come invalidare la cache di CSS e Javascript tramite PHP in WordPress
da Massimo Della Rovere · pubblicato il 28 Giugno, 2017 · modificato il 28 Giugno, 2017

Molte volte quando si termina un sito web si impostano dei valori per la scadenza della cache su diverse risorse statiche come ad esempio CSS e Javascript. Anche se rimane sempre una tecnica consigliabile, accade molto spesso che durante successive modifiche si rischia che i visitatori continuino a caricare la vecchia versione dei file causando un risultato di output non desiderato. Vediamo come risolverlo.

Impostazione della cache

Normalmente la scadenza di cache viene gestita dal server web in base alle direttive che sono state indicate nel file di configurazione, in ogni caso anche se si utilizzano tecniche diverse il risultato si ottiene generando degli HTTP Header di risposta che contengono le informazioni di scadenza. Purtroppo non è sempre possibile cambiare queste regole, e anche se si avesse accesso al server è fastidioso eseguire questa operazione ogni volta che cambiamo una virgola sui nostro file CSS e Javascript.  Questo è un esempio:

# Definizione delle direttive per il controllo della cache.
# Controllare se il modulo mod_expires risulta attivo.

<IfModule mod_expires.c>
   ExpiresActive on
   ExpiresByType image/jpg "access plus 90 days"
   ExpiresByType image/jpeg "access plus 90 days"
   ExpiresByType image/gif "access plus 90 days"
   ExpiresByType image/png "access plus 90 days"
   ExpiresByType text/css "access plus 90 days"
   ExpiresByType image/x-icon "access plus 90 days"
   ExpiresByType application/javascript "access plus 90 days"
</IfModule>

In questo esempio abbiamo impostato un valore di 90gg per le immagini, per i fogli stile e gli scripts in javascript, che per un sito di produzione può andar bene, ma se ci capita di cambiare uno dei file indicati dobbiamo ricordarci di azzerare questa cache, per il motivo che il browser caricherebbe dalla sua cache il file precedente ancora per diverso tempo.

Utilizzare un codice univoco

La maniera più comune per ovviare a questo comportamento è quella di aggiungere alla fine del nome del file CSS e/o Javascript un codice univoco che cambi solo quando il file viene modificato, per fare questo è abitudine usare proprio la ora di modifica del file. Vi riporto qui di seguito una parte di codice che utilizzo anche sul mio sito web:

$filecss = sprintf('%s/style.css',get_template_directory());
$fileuri = sprintf('%s/style.css',get_template_directory_uri());

echo sprintf('<link href="%s?%s" type="text/css" rel="stylesheet"/>',
   $fileuri,filemtime($filecss));

Come potete vedere nel codice viene utilizzata la funzione filemtime() la quale aggiunge un codice rappresentate l’orario di modifica del file dopo il nome della risorsa. In questo modo il browser crea una cache sulla stringa URL completa e come viene cambiato il file e quindi anche il suo orario di modifica il browser rieseguirà un caricamento completo.

Community WordPress

Se volete scambiare informazioni su WordPress con altri esperti e rimanere aggiornati sulle ultime news venite a trovarci nella nostra community italiana su google plus. Se per caso non avete un account google ci trovate anche su facebook.

2 Commenti

  1. Ciao Massimo, una domanda: la porzione di codice che hai illustrato va inserita nel file function del tema giusto? Inoltre tu hai utilizzato come nome del file lo style.css, ma nel caso di diversi css nel tema occorre replicare la funzione con i relativi nomi dei file esatto? Grazie mille

  2. Ciao Marco, il codice va inserito nel file header.php del tuo tema nella parte in cui viene generato il codice della sezione HEAD. Se hai più file CSS deve ripetere l'output <LINK> per ogni file. Se sono tanti puoi fare anche un array con i nome dei file CSS e poi con un loop foreach() ripeti il comando.

condividi