web-dev-qa-db-de.com

Wie vermeidet man Caching während der Entwicklung?

Gibt es eine einfache Möglichkeit, um jegliches Caching beim Testen der Darstellung von Änderungen an der Site zu verhindern? Ich benutze WP Super Cache. Ich kann den Cache mit der angegebenen Option löschen, den Cache für meinen Browser löschen und trotzdem werden einige Änderungen an CSS oder Widgets nicht aktualisiert. Ich versuche andere Workarounds wie das Wechseln zwischen Browsern oder Computern, aber es muss einen optimierten Workflow geben, in dem ich sicherstellen kann, dass ich die vorgenommenen Änderungen und nicht ein zwischengespeichertes früheres Format ansehe. Was ist die beste Lösung dafür?

31
cboettig

Fügen Sie die filemtime() Ihres Stylesheets als Versionsparameter hinzu. Nehmen wir an, Ihr Standard-Stylesheet befindet sich in css/default.css und css/default.min.css ( nicht in style.css ). Wenn wir ein Stylesheet für wp_loaded registrieren ( nicht init ), können wir eine Version als vierten Parameter übergeben. Dies ist die letzte geänderte Zeit und wird daher jedes Mal geändert, wenn wir die Datei ändern.

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

Wenn Sie Node.js und Grunt verwenden, empfehle ich dringend Browsersync . Es überwacht Ihre Dateien und aktualisiert sie sofort, wenn sie sich ändern. Es kann auch die Bildlaufposition synchronisieren, Formulare übermitteln und vieles mehr in mehreren offenen Browsern. Sehr cool.

32
fuxia

Nachdem ich viele Male nach einer einfachen Lösung gesucht hatte, entschied ich mich, etwas zu finden, das funktioniert!

also ... nachdem ich darüber nachgedacht hatte, fand ich eine großartige Möglichkeit, das Caching zu überschreiben, während ich neue Websites entwickelte ... (und es ist einfach).

Wir müssen wp mitteilen, dass dies eine neue CSS-Version wie diese ist ...

Vor Änderungen:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

Nach Änderungen:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

Dies ist, was wir hinzugefügt haben:

?v='.time()

Erklärung:
Im Grunde genommen fügen wir der CSS-Datei eine dynamische Versionsnummer hinzu, die den Browser bei jedem Update dazu zwingt, die neue CSS zu laden.

Vergessen Sie nicht, es zu entfernen, nachdem Sie fertig sind. Andernfalls funktioniert Ihr Caching für diese Datei nicht und es wird immer wieder für wiederkehrende Benutzer geladen.

Diese Technik funktioniert für CSS & JS-Dateien - hoffe, das hilft;)

7
Sagive SEO

Dies mag übermäßig einfach erscheinen, aber wie wäre es, wenn Sie nur das Caching deaktivieren, bis Sie mit dem Entwicklungsteil Ihrer Site fertig sind? Das Ein- und Ausschalten ist mehr als einfach.

6
mor7ifer

Meine Güte, viele Möglichkeiten, diese zu beantworten! Zuallererst haben Sie nach zwei verschiedenen Dingen gefragt: WP Super-Cache- und CSS-Dateien. Diese werden an verschiedenen Stellen unterschiedlich zwischengespeichert, daher ist es wichtig zu erkennen, wo sich Ihr Problem befindet.

Wenn WP Super Cache, können Sie die Konstante DONOTCACHEPAGE in Ihrer functions.php während der Entwicklung definieren, um zu verhindern, dass WP Super Cache irgendetwas zwischenspeichert. Vergessen Sie jedoch nicht, dies beim Start zu entfernen!

define('DONOTCACHEPAGE', true);

Jede Site hat auch einen eindeutigen Schlüssel, den Sie an die URL anhängen können, um eine neue Version der Seite zu laden, die Sie meines Erachtens auf der Registerkarte "Erweitert" finden.

Um eine noch bessere Lösung zu finden, sollten Sie überlegen, eine Entwicklungsumgebung und eine Produktionsumgebung einzurichten, in der für Ihre Entwicklungsumgebung WP Super Cache nicht aktiviert ist (vorausgesetzt, dies ist Ihr Problem).

Wenn Ihr Problem mit CSS/JS-Dateien besteht, lesen Sie die Antwort von toscho und den nachfolgenden Kommentar von m0r7if3r oben.

2
Matthew Boynes

Wenn Sie Chrome verwenden (was ich sehr empfehle), öffnen Sie den Inspector, klicken Sie auf das Einstellungssymbol in der unteren rechten Ecke und wählen Sie unter "Netzwerk" die Option "Cache deaktivieren".

1
moettinger

HyperCache deaktiviert das Caching, wenn Sie als Administrator angemeldet sind. Ich bin nicht sicher, ob WP Super Cache dieselbe Funktionalität hat.

1
fxfuture

Wie gesagt für wp super cache, aber für allgemeines WP caching in wp-config.php

define( 'WP_CACHE', false );

Referenz: codex.wordpress.org

0
wpcoder