Press nettleseren til å laste oppdaterte css- eller javascript-filer
Som utvikler av nettsider har du sikkert opplevd at endringer i CSS- eller Javascript-filer ikke oppdateres. Du tyr gjerne til hard-refresh (shift + f5 eller shift + R). Det finnes en bedre måte å presse nettleseren til å laste oppdaterte css- eller javascript-filer.
Javascript og CSS-filer blir ofte mellomlagret av nettlesere slik at de ikke skal lastes hver gang du flytter deg fra en side til en annen. Hvis du arbeider med en nettside må du derfor laste siden på nytt med shift-tastet holdt nede. Ved å gjøre dette forteller du nettleseren at den skal laste filene inn på nytt.
Men det gjør du fordi du vet at du har gjort en endring i css- eller javascript-filen. En som besøker siden din vet ikke at du har gjort endringer.
For å unngå dette er det en god idé å legge til et attribut på lenken til filen du skal hente inn.
Med et attribut mener jeg følgende:
https://www.example.com/javascriptfil.js?attribut=1234Det som skjer etter spørsmålstegnet på linjen over er attributter. I dette tilfellet har jeg lagt til en attribut som jeg har gitt navnet attribut og verdien 1234.
Når du legger til en css- eller javascript-fil i wordpress bruker du kommandoen wp_enqueue_style eller wp_enqueue_script avhengig av hva du skal importere eller inkludere.
Du inkluderer en stil på følgende måte:
// wp_enqueue_style('handle', 'source', 'deps, 'version', 'media');
// Eksempel:
wp_enqueue_style('nettsidenavn_desktop_stil',
get_template_directory_url()."/assets/css/nettsidenavn-desktop.css",
null,
'2.2',
'');I eksemplet over har jeg satt verdien til 2.2. Dette vil føre til at når wordpress laster siden så vil det stå ?ver=2.2 etter adressen til css-filen.
Hvis du ønsker å gjøre dette manuelt videre, er det bare å endre til for eksempel 2.3 når du har gjort en endring i css-filen.
Det er imidlertid lett å glemme å endre versjonstallet.
Derfor gjør jeg i stedet følgende:
// wp_enqueue_style('handle', 'source', 'deps, 'version', 'media');
// Eksempel:
wp_enqueue_style('nettsidenavn_desktop_stil',
get_template_directory_url()."/assets/css/nettsidenavn-desktop.css",
null,
filemtime(get_template_directory_url()."/assets/css/nettsidenavn-desktop.css"),
'');filemtime er en PHP-funksjon som returnerer tidspunktet for når filen sist ble endret i et timestamp-format. Altså ikke som en faktisk dato – selv om det også er mulig – men som et langt tall.
Dette tallet kan for eksempel være 90748932.
Fordelen med denne løsningen er at tallet ikke endrer seg hvis du ikke gjør endringer i filen. Dermed vil ikke filen lastes på nytt hver gang de som besøker siden din trykker seg rundt og laster siden på nytt.
Desto mindre filer eller data nettleseren trenger å hente hver gang, jo raskere går lastingen av siden.
