Header Image rotieren
In meinem Blog (Wordpress mit Inove-Theme) ging mir das Standard Header-Image schon ziemlich lange auf die Nerven. Ich wollte gern eines meiner eigenen Bilder im Header haben, am besten mehrere und in zufälliger Reihenfolge eingeblendet. Wordpress selbst bietet hier direkt keine Möglichkeit und die existierenden Plugins funktionieren nicht oder arten in frickelei aus. Das Bild von Hand in den CSS-Files austauschen funktioniert zwar recht zügig, lässt aber keine zufällige Darstellung zu und muss immer wieder nach einem Update des Themes wiederholt werden, was also für mich keine Option war.
Auf der Toilette (ohne Witz!) kam mir der Geistesblitz: Apache und mod_rewrite!
Das Default Header Image wird wie folgt aus dem Theme aufgerufen:
http://yks.org/wp-content/themes/inove/img/header.jpg
Da ich mit mod_rewrite die Anfrage des Browsers fast beliebig manipulieren kann ist es also ein leichtes dem Browser immer ein anderes Bild zu präsentieren, natürlich ohne das dies vom Besucher bemerkt wird.
Damit das ganze funktioniert, muss mod_rewrite im Apache geladen sein (was Wordpress eh voraussetzt). Ich selbst mache solche Änderungen immer direkt in der Apache-Config meines Servers da hier keine Plugins von Wordpress etwas verpfuschen können.
Dann benötigen wir ein paar Bilder die wir durchnummerieren und auf den Server laden, den Pfad sollten wir uns natürlich auch noch merken.
Es versteht sich hoffentlich von selbst das die Bilder die selbe Größe des Original Images haben sollten, sonst kann es das Layout eurer Seite ruinieren!
Auf dem Webserver solltet ihr nun ein File mit folgendem Inhalt anlegen:
random header1|header2|header3|header4|header5
Die Namen nach “random” entsprechen den Filenamen eurer Bilder jedoch ohne der Endung .JPG! An das Zeichen “|“, auch pipe genannt, kommt ihr über die Tastenkombination [Alt GR] und [<> |] (zu finden neben der linken Shift-Taste). Speichert das File mit den Namen ala random_header.map (benamsen könnt ihr das File natürlich wie ihr wollt!) am besten innerhalb des Apache-Config-Verzeichnisses, bei den meisten Debian-Derivaten dürfte dies /etc/apache2/ sein, sonst wird auch gern /etc/httpd oder /etc/apache verwendet.
Öffnet nun die Config für euren Webserver und fügt folgende Zeichen innerhalb der <VirtualHost> Direktive ein:
RewriteEngine on
RewriteMap randoming rnd:/etc/apache2/random_header.map
RewriteCond %{REQUEST_URI} ^/wp-content/themes/inove/img/header.jpg
RewriteRule ^.* /wp-content/themes/inove/img/${randoming:random}.jpg [L]
Ersetzt den Pfad hinter “RewriteMap” zu dem File das ihr vorhin erstellt habt!
In der “RewriteCond” solltet ihr den Pfad zu eurem bisherigen Header Image eintragen. Der Domainname ist hier nicht von nöten und kann weggelassen werden.
In der RewriteRule ersetzt ihr nun “/wp-content/themes/inove/img/” mit dem Pfad in dem eure Bilder zu finden sind. Wichtig ist der Schluss, “${randoming:random}.jpg” muss so übernommen werden, der Server fügt hier die Namen aus unserer random_header.map ein
Danach den Server restarten, meist mit /etc/init.d/apache reload und Et voilà im Header sollten nun immer andere Bilder zu sehen sein!
Die Images die ich im Header verwende wurden alle von mir selbst fotografiert, wer mag kann sie herunterladen und benutzen:
header_images.tar.gz (86.0 KiB, 29 hits)
Wer sich etwas mit mod_rewrite beschäftigt wird schnell merken welche Sauereien sich damit anstellen lassen, beispielsweise nach Uhrzeit, Datum oder Wochentag die Images zu rotieren, auf der Apache-Site und via Google gibt es tonnenweise brauchbare Beispiele!
Links zum Thema Header-Images:
http://www.blogohblog.com/how-to-make-random-header-images/
http://weizenspr.eu/2009/wordpress-header-image-abhangig-von-uhrzeit/
http://en.forums.wordpress.com/topic/random-image-header-tutorial
http://wphackr.com/random-header-image/
https://forum.wordpress-deutschland.org/design/24470-random-header-header-einbinden.html
Recent Comments