CSS wird im Browser nicht aktualisiert, wenn ich es ändere

14

Ich arbeite am CSS meiner WordPress-Site. Wenn ich Änderungen vornehme und die Seite aktualisiere, werden die Änderungen nicht übernommen. Wenn ich den Browserverlauf und den Cache lösche, werden die Änderungen weiterhin angezeigt. Wenn ich den Quellcode der Seite betrachte und die CSS-Datei betrachte, hat sie den alten Inhalt vor der Änderung. Wie kann ich dieses Update durchführen, damit ich es entwickeln kann?

theme-development css David Tunnell
quelle
Haben Sie ein Caching-Plugin ausgeführt? Ihre CSS-Dateien könnten auf dem Server zwischengespeichert werden.
Pat J
Es scheint nicht, dass ich ein Caching-Plugin habe.
David Tunnell
Funktioniert es, wenn Sie nicht WordPress verwenden? Zum Beispiel eine aufgerufene Datei test.htmlund eine zugehörige .cssDatei?
Pat J
Wenn eine der Antworten Ihnen bei der Lösung des Problems geholfen hat, stellen Sie sicher, dass Sie es akzeptieren!
Mrwweb

Antworten:

14

Fügen Sie am Ende der angehängten CSS-Datei eine zufällige Versionsnummer hinzu. Wenn Sie die Funktionen ' wp_enqueue_style ' oder ' wp_register_style ' verwenden , übergeben Sie eine Zufallszahl (Versionsnummer) rand(111,9999)an den vierten Parameter. Wenn Sie CSS als HTML - Tag anhängen, sollten Sie " ?ver=<?php echo rand(111,999)?>" am Ende des Dateinamens hinzufügen . Beispiele sind hier

wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), rand(111,9999), 'all' );

oder

<link rel="stylesheet" type="text/css" href="http://website.com/css/custom-style.css?ver=<?php echo rand(111,999)?>">

Es wird das Cachen am Clientende und möglicherweise auch das Server-Cachen vermieden.

HERR
quelle
7

Ich weiß, dass dieser Beitrag über ein Jahr alt ist, aber ich dachte, ich würde erwähnen, dass CloudFlare statische Dateien wie CSS, JS und Bilder zwischenspeichert, um die Ladezeiten zu verkürzen. Ich habe nur Stunden gebraucht, um das herauszufinden, da ich Probleme mit meinen CSS-Änderungen hatte, die sich nicht auf das Neuladen bezogen. CloudFlare verfügt über einen Entwicklungsmodus, den Sie für 3 Stunden aktivieren können. Wenn Sie die Aktivierung vergessen haben, bevor Sie Änderungen vornehmen, können Sie den Cache aus der Cloudflare-Verwaltung löschen.

Shanan
quelle
1
CloudFlare geht davon aus, dass ?ver=Dateien nicht aktualisiert werden können, wenn sie vorhanden sind .
HLCS
Müssen Sie bei jeder Änderung von CSS und Javascript den Cloudfare-Cache leeren? Was macht dieser Entwicklungsmodus eigentlich? Danke
Tanvir
0

Es ist möglich, dass Ihr Host so etwas wie Lack verwendet, um die Ausgabe Ihrer Site zwischenzuspeichern. Ich bin darauf gestoßen, als die Site eines Kunden auf einem preisgünstigen Shared-Hosting-Konto gehostet wurde. Das einzige Mittel, das ich gefunden habe, war, nur Geduld zu haben.

Jeff Purcell
quelle
0

Wenn Sie ein untergeordnetes Thema verwenden, müssen Sie möglicherweise das Stylesheet für das untergeordnete Thema in eine Warteschlange einreihen, damit die Änderungen sofort angezeigt werden. Dies löste mein Problem.

Ramón Puig
quelle
0

Ich möchte Sie nur darauf hinweisen, achten Sie auf alle von Ihnen installierten Caching-Plugins . Beispielsweise kann der schnellste WP-Cache dieses Problem verursachen, wenn Sie sich nicht mehr am WP-Dashboard anmelden und im Navigationsmenü auf "Cache löschen -> Cache und minimiertes CSS / JS löschen" klicken.

HappyHands31
quelle
0

Das ist vielleicht alt. Aber ich muss jemanden unterstützen, der vielleicht Hilfe sucht. Ich hatte das gleiche Problem und habe meine Plugins überprüft. Es gab das Plugin "w3 total cache", das das Laden beschleunigte. Das ist das serverseitige Cache-Plugin, also habe ich es deaktiviert. Die CSS-Änderungen sind in Echtzeit wieder sichtbar. Es gibt viele Plugins zum Laden von Boostern. Überprüfe also deine Plugin-Liste und deaktiviere sie, bis du die Entwicklung abgeschlossen hast.

Gimhana Jayasekara
quelle