CSS nu se actualizează în browser când fac modificări

Știu că acest articol are peste un an, dar am vrut să menționez că CloudFlare stochează în cache fișiere statice precum css, js și imagini pentru a încărca mai rapid paginile. Ceva la care am petrecut ore întregi să înțeleg, deoarece aveam probleme cu modificările CSS care nu se actualizau la reîncărcare. CloudFlare are un mod de dezvoltare pe care îl poți activa pentru 3 ore. Dacă uiți să-l activezi înainte de a începe modificările, poți șterge cache-ul din panoul de administrare CloudFlare.

Am această problemă și eu și am încercat soluția cu cele mai multe voturi de aici, dar nu a funcționat. Puteți face trucuri simple ca mine.

Suprascrieți CSS-ul pe care doriți să-l schimbați în Teme > Personalizare > CSS Personalizat din panoul de control.

În cele din urmă, CSS-ul va fi actualizat. Apoi îl puteți șterge din nou.

Te rog să schimbi versiunea în partea de sus a fișierului style.css (locația ..wp-content\themes\nume_theme\style.css) la una mai nouă.

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

De exemplu, de la 1.0 la 1.1 sau 1.0.1.

De asemenea, schimbă versiunea în fișierul fuction.php pentru acel fișier CSS

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

aici schimbă '1.0' la o versiune mai nouă precum '1.1'

Este posibil ca gazda dumneavoastră să folosească ceva precum Varnish pentru a stoca în cache ieșirea site-ului dumneavoastră. Am întâlnit această situație cu un site al unui client găzduit pe un cont de hosting partajat la preț redus. Singura soluție pe care am găsit-o a fost să fiu răbdător.

Dacă folosești un temă copil, este posibil să fie necesar să încarci fișierul de stiluri al temei copil pentru a vedea imediat modificările. Aceasta a rezolvat problema în cazul meu.

Vreau doar să subliniez - asigurați-vă că sunteți atenți la orice plugin-uri de cache pe care le-ați instalat. WP Fastest Cache, de exemplu, poate crea această problemă dacă uitați să vă autentificați în panoul de administrare WordPress și să faceți clic pe "Clear Cache --> Delete Cache and Minified CSS / JS" în meniul de navigare.

Acest lucru poate fi depășit, dar trebuie să ajut pe cineva care ar putea căuta ajutor. Am avut aceeași problemă și am verificat pluginurile mele. Era pluginul "w3 total cache" care accelerează încărcarea. Acesta este un plugin de cache pe partea de server, așa că l-am dezactivat. Modificările CSS sunt vizibile din nou în timp real. Există o mulțime de pluginuri care accelerează încărcarea. Așadar, verifică lista ta de pluginuri și dezactivează-le până când finalizezi dezvoltarea.

Modifică acest cod în funcție de nevoile tale, funcționează perfect, generează un număr de versiune aleatoriu de fiecare dată când reîncarci pagina, ideal pentru dezvoltare:

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

Știu că această întrebare are deja un răspuns acceptat care funcționează bine, dar am vrut să menționez o altă soluție care este puțin mai simplă.

Când încărcați fișierele (enqueue), puteți folosi funcția PHP time() pentru a obține ora curentă și a o utiliza ca versiune. Codul dvs. pentru încărcare va arăta cam așa:

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

Și dacă încărcați fișierul CSS direct cu HTML, codul dvs. va arăta astfel:

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

Nu sunt sigur de ce nimeni nu a postat această soluție. Obții un timestamp Unix al timpului de modificare al fișierului - deci dacă nu ai făcut nicio modificare - cache-ul browserului / CDN-ului poate fi păstrat.

wp_enqueue_style(
    'style_name', // Numele fișierului de stiluri.
    get_stylesheet_directory_uri() . '/style.css', // URL-ul complet al fișierului de stiluri.
    array(), // Dependințe.
    filemtime( get_stylesheet_directory() . '/style.css' ) // Numărul versiunii.
);

Diferența importantă aici este că apelezi URI-ul pentru sursă - dar locația folderului pentru timpul de modificare al fișierului.

Aceste setări se găsesc în secțiunea de Confidențialitate a browserului pe care îl utilizați. Pur și simplu dezactivați secțiunea care spune:

Încarcă paginile în avans pentru o navigare și căutare mai rapidă Folosește cookie-uri pentru a-ți aminti preferințele, chiar dacă nu vizitezi acele pagini