Frische Template Dateien, statt aus dem Browsercache geladen Christian M. Stefan

Der Browsercache ist eine praktische Sache: kommt ein Besucher mit dem selben Browser öfter auf Ihre Seite, müssen die Templatedateien (Bilder, JS-, CSS-Dateien u.a.) nicht immer wieder neu vom Server heruntergeladen werden, sondern stehen dank des Caches auf der Festplatte ihres Besuchers zu verfügung. Es macht möglich, dass Ihre Seite beim zweiten Besuch (oder schon auf nächster Seite Ihrer ||Website||) schneller geladen ist, weil bestimmte Templatedateien bereits "gecached" wurden.

Selbst heute, wo die meisten Besucher mit HighSpeed DSL unterwegs sind, ist dieses Vorgehen sehr wünschenswert, da manche dieser Dateien recht groß werden können (z.B. ein Hintergrundbild oder ein Header, oder auch verschiedene JS Dateien).

Das Problem

Obwohl der Browsercache also eine wünschenswerte Sache ist und viel Downloadzeit (und Nerven) sparen kann, gibt es Momente, wo dieses "Cachen" nicht wünschenswert ist.

Und zwar dann nicht, wenn Sie einige Dateien auf Ihrer Internetseite aktualisiert haben.
Z.B. eine CSS Datei, die zwar immer noch den selben Dateinamen hat (z.B. style.css), aber die sich vom Inhalt her geändert hat.

Der Browsercache speichert nämlich die Dateien auf der Festplatte ab und beim erneuten Besuch wird nicht mehr vom Server geladen (wo Sie Ihre Datei hochgeladen haben), sondern vom Browsercache (und somit von der Festplatte) des Besuchers.

"Dafür gibts doch die F5 Taste", mag man sagen. Ja, stimmt. Doch selbst wenn Ihr Besucher das weiß, woher soll er wissen, dass Sie einige Elemente auf Ihrer Seite verändert haben, sodass er den Browsercache mit der F5 Taste aktualisiern soll.

Manchmal, sogar oft, sind wir auf frische Template Dateien angewiesen

Da es für mich als ||Webdesign||er wichtig ist, dass die Besucher meiner Seiten immer die aktuellste Version zu Gesicht bekommen, habe ich eine kleine Funktion - angepasst an WebsiteBaker Templates - geschrieben.

Mit diesem kleinen Trick wird es möglich, immer die aktuellste Datei auszugeben. Egal ob es sich um CSS Dateien, JS, Bilder handelt, der Besucher bekommt immer die aktuellste Version zu Gesicht, ohne den Browser aktualisieren zu müßen.

Wie es gemacht wird

Wir gaukeln dem Browser vor, dass unsere Dateien dynamisch sind, ungefähr so:

href="http://localhost/websitebaker/templates/my_template/style.css?1260468745"

Achten Sie auf das Fragezeichen und die Zahlen hinter dem Dateinamen style.css
Diese Reihe von Zahlen wurde aus dem Änderungsdatum der Datei style.css generiert. Das bedeutet, dass jedes Mal, wenn sie eine aktuellere "style.css" Datei hochladen, sich diese Zahl ebenfalls ändern wird. Für das Auslesen des Änderungsdatums ist die PHP Funktion filemtime() zuständig, die ich weiter unten in meiner eigenen Funktion verwende. 

Die Funktion fresh_file()

Die PHP Funktion fresh_file() ist ganz klein und lässt sich ganz einfach benutzen. Eigentlich ist die Verwendung nicht viel anders als sonst.

Normallerweise bindet man zum Beispiel eine CSS Datei etwa so ein:

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/menu.css" media="screen,projection" />

Wenn sie die fresh_file() Funktion einsetzen, müssen Sie es so tun:

<link rel="stylesheet" type="text/css" href="<?php fresh_file('menu.css');?>" media="screen,projection" />

Also OHNE "echo" und der Dateiname wird zwischen die Klammern geschrieben. Achten Sie auch auf die 'einfachen' Einführungszeichen.

Ein Bild zum Beispiel könnten Sie so aufrufen:

<img src="<?php fresh_file('header.png');?>"/>

Wenn die gewünschte Datei im Unterordner, sagen wir "images" , Ihres Templates liegt, machen Sie es wie folgt:

<?php fresh_file('images/header.png');?>

Mehr gehört da nicht zu und geht unter umständen einfacher als auf die herkömliche Art :-)

Wie, das wars?

Ja, fast. Damit unser Template auf die Funktion zurückgreifen kann, müssen wir sie vorher in unser Template einbinden

Einbindung ins WebsiteBaker Template

Da der Code der Funktion ganz klein ist, können wir ihn direkt in die index.php Datei unseres Templates schreiben.
Fügen Sie den folgenden Code (am besten weit oben, noch VOR dem <html ...>-Tag ) in die index.php ein:

<?php
	// function fresh_file()
	function fresh_file($file){
	$used_file = TEMPLATE_DIR.'/'.$file;
	$fresh_used_file = WB_PATH.'/templates/'.TEMPLATE.'/'.$file;
	echo $used_file.'?'.filemtime ($fresh_used_file);
	}
?>

Sobald das erledigt ist, können Sie in Ihrem Template die Dateien mit der fresh_file() Fumktion einbinden und sie immer frisch rausgeben, sobald sie aktualisiert wird. Ihre Besucher werden immer die aktuellsten Designs zu Gesicht bekommen.

Vielen Dank, dass Sie sich die Zeit genommen haben, dieses Tutorial zu lesen. 

Ich hoffe es wird sich bei Ihrer Arbeit als nützlich erweisen.

Inspiration fürs Tutorial

Dieses Tutorial basiert auf dem WordPress Beitrag Forcing CSS Changes to “Go Live” Immediately von Mark Jaquith.
Da WebsiteBaker CMS anders gestrickt ist wie die WordPress Blogsoftware, ich aber auf diesen Trick nicht verzichten wollte, schrieb ich diese Funktion - mit dem Ergebnis, dass die Nutzung sogar ganz handlich wurde:
WordPress:


<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>

WebsiteBaker

<?php fresh_file('style.css'); ?>

Verbesserungen

Ich heiße Sie willkommen, zu diesem Tutorial und zu der Funktion fresh_file() beizutragen. WebsiteBaker wird nur dadurch besser, indem wir eine Win/Win Situation für alle schaffen. Und wir können nur alle gewinnen, wenn wir dieses CMS und seine Funktionsweise optimieren.

Danksagung

Ich bedanke mich bei allen Nutzern und Förderern dieses CMS. Vor allem bedanke ich mich bei denen, die mit meinem Wissensdurst umzugehen wissen. Ich freue mich immer, wenn ich etwas neues lernen kann - denn das ist der Schlüßel zu erweiterten Horizonten.

MfG,
Christian M. Stefan

Link zum Thema im WebsiteBaker Forum

Zurück zur Übersicht