Il CSS non si aggiorna nel browser quando lo modifico

So che questo post ha più di un anno, ma volevo segnalare che CloudFlare memorizza nella cache file statici come css, js e immagini per favorire tempi di caricamento più rapidi. Una cosa che ho impiegato ore a capire, dato che avevo problemi con le modifiche al css che non si riflettevano al ricaricamento. CloudFlare ha una modalità di sviluppo che puoi attivare per 3 ore. Se dimentichi di attivarla prima di iniziare a fare modifiche, puoi svuotare la cache dalla gestione di CloudFlare.

Anch'io ho questo problema e ho provato la soluzione più votata qui ma non ha funzionato. Puoi fare semplici trucchi come ho fatto io.

Sovrascrivi il CSS che vuoi modificare in Theme > Personalizza > CSS personalizzato nel tuo pannello di controllo.

Alla fine il CSS verrà aggiornato. Poi potrai eliminarlo di nuovo.

Per favore modifica la versione in cima al file style.css (posizione ..wp-content\themes\nome_tema\style.css) con una più recente.

/*
Theme Name: SF TEST
Version: 1.0.1
*/

Ad esempio da 1.0 a 1.1 o 1.0.1.

inoltre, modifica la versione nel file function.php per quel file CSS

wp_enqueue_style('style', get_template_directory_uri() . "/assets/css/style.css", array(), '1.0', 'all');

qui cambia '1.0' con una versione più recente come '1.1'

È possibile che il tuo host utilizzi qualcosa come Varnish per memorizzare nella cache l'output del tuo sito. Mi è capitato con un sito di un cliente ospitato su un account di hosting condiviso a basso costo. L'unico rimedio che ho trovato è stato quello di avere pazienza.

Se stai utilizzando un child theme, potrebbe essere necessario accodare il foglio di stile del child theme per visualizzare immediatamente le modifiche. Questa soluzione ha risolto il mio problema.

Voglio solo sottolineare - assicurati di prestare attenzione a qualsiasi plugin di caching che hai installato. WP Fastest Cache, ad esempio, può causare questo problema se non ricordi di accedere alla dashboard di WP e cliccare su "Clear Cache --> Delete Cache and Minified CSS / JS" nel menu di navigazione in alto.

Questo potrebbe essere vecchio. Ma ho bisogno di supportare qualcuno che potrebbe cercare aiuto. Ho avuto lo stesso problema e ho controllato i miei plugin. C'era il plugin "w3 total cache" che velocizza il caricamento. Si tratta di un plugin di cache lato server, quindi l'ho disabilitato. Le modifiche al css sono nuovamente visibili in tempo reale. Ci sono molti plugin per velocizzare il caricamento. Quindi controlla la lista dei tuoi plugin e disabilitali finché non completi lo sviluppo.

Modifica questo secondo le tue esigenze, funziona perfettamente e genera un numero di versione casuale ogni volta che ricarichi la pagina, ideale per lo sviluppo:

wp_enqueue_style('mypluginstyle',  plugins_url('/assets/mystyle.css', __FILE__), array(), rand(111,9999) );

So che questa domanda ha già una risposta accettata che funziona bene, ma volevo menzionare un'altra soluzione che è un po' più semplice.

Quando si esegue l'enqueue, utilizza la funzione PHP time() per ottenere l'ora corrente e usarla come versione. Il tuo enqueue sarà simile a questo:

wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/style.css', array(), time() );

E se stai caricando il foglio di stile con html, il tuo codice sarà così:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri ?>/style.css?ver=<?php echo time() ?>">

Non sono sicuro del perché nessuno abbia postato questa soluzione. Si ottiene un timestamp Unix dell'ultima modifica del file - quindi se non sono state apportate modifiche - la cache del browser/CDN può essere mantenuta.

wp_enqueue_style(
    'nome_stile', // Nome del foglio di stile.
    get_stylesheet_directory_uri() . '/style.css', // URL completo del foglio di stile.
    array(), // Dipendenze.
    filemtime( get_stylesheet_directory() . '/style.css' ) // Numero di versione.
);

La distinzione importante qui è che stai chiamando l'URI per la sorgente - ma la posizione della cartella per l'ora di modifica del file.

Si trova nelle Impostazioni sulla Privacy del browser che stai utilizzando. Basta disattivare la sezione che dice:

Precarica pagine per una navigazione e ricerca più veloce Utilizza i cookie per ricordare le tue preferenze, anche se non visiti quelle pagine