elektro:elch

Es ist nicht ungefährlich, wenn ein Volk lesen und schreiben kann.

WordPress: Neuladen von Skripts und Stylesheets erzwingen

Bei der Entwicklung von WordPress-Themes oder -Plugins taucht immer wieder das Problem auf, dass Skripte oder Stylesheets nicht direkt von der Quelle sondern aus einem Cache geladen werden, weil sie irgendwo auf dem Weg vom Server zum Browser zwischengespeichert werden. Es gibt verschiedenee Möglichkeiten dieses zu unterbinden, indem man z.B. den Browsercache in den Optionen ausschaltet oder ein Webentwicklungs-AddOn benutzt. Manchmal funktioniert das allerdings nicht, weil es die verschiedensten Möglichkeiten des Cachings gibt und man vielleicht nicht alle ausgeschaltet hat.

WordPress beinhaltet eine einfache Möglichkeit sicherzustellen, dass alle Stylesheets und Skripte direkt von der Quelle geladen werden, indem man einen Versions-Parameter definiert:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_style( $handle, $src, $deps, $ver, $media);

Man erhöht den $ver-Parameter jedesmal, wenn die Datei geändert wird:

wp_enqueue_script( 'my_script', 'my_script.js', '', '0.11' );
wp_enqueue_style( 'my_style', 'my_style.css', '', '0.11' );

Die Url des Stylesheets/Plugins ändert sich zu “.../my_script.js?ver=0.11“, so dass jedes Cachingsystem erkennt, dass es sich um eine geänderte Datei handelt und lädt sie erneut, damit der Benutzer immer die aktuellste Version erhält.

Es ist allerdings mühselig, die Versionsnummer auf einer Entwicklungsumgebung jedes mal manuell zu ändern, wenn man etwas an der Datei geändert hat und wir sind Programmierer, richtig? Also automatisieren wir die Sache einfach:

wp_enqueue_script( 'my_script', 'my_script.js', '', time() );
wp_enqueue_style( 'my_style', 'my_style.css', '', time() );

Der Wert von time() ändert sich jede Sekunde und somit ändert sich auch die Versions-ID der Datei ständig und sie wird von der Quelle und nicht aus irgendeinem Cache geladen.

Etwas nachteilig ist allerdings, das man den zeitbasierten Parameter jefesmal gegen eine “echte” Versionsnummer austauschen muss, wenn man den Code an den Benutzer ausliefert, denn dieser soll ja immer noch den Vorteil des Cashing nutzen können. Erweitern wir also die Idee:

define ('VERSION', '1.1');

function version_id() {
  if ( WP_DEBUG )
    return time();
  return VERSION;
}

wp_enqueue_script( 'my_script', 'my_script.js', '', version_id() );
wp_enqueue_style( 'my_style', 'my_style.css', '', version_id() );

Auf diese Weise kann man sicherstellen, das bei der Entwicklung alles direkt von der Quelle geladen wird, in einer Produktionsumgebung allerdings alle Caching-Möglichkeiten genutzt werden.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *