Sidebar
ein-/ausblenden

Simpler Code für ein Zufallsbild im WordPress-Template

Immer wieder werden aufwändige Plugins und Konstrukte in Themes hinterlegt, um das Einbinden eines Zufallsbildes zu realisieren. PHP stellt mit der Funktion rand() eine geeignete und simple Lösung für diese Anforderung bereit.
Im folgenden kurz und knapp die Lösungsstruktur.

Prinzipiell kann man natürlich die Bilder von jedem beliebigen Verzeichnis laden, im Beispiel sollen die Bilder im Order des aktuell verwendeten Themes liegen, im Unterordner images.

Im Anschluss eine kurze Erläuterung der Funktion rand().

Struktur im Theme-Ordner

PHP Anweisung

int rand ( [int $min, int $max] )

Liefert eine Pseudozufallszahl zwischen min und max (inklusive), oder zwischen 0 und RAND_MAX falls keine Parameter angegeben wurden. Wenn Sie z.B. einen Zufallswert zwischen 5 und 15 benötigen so wäre der Aufruf dafür rand(5, 15).
php.net


<?php echo( rand(1,5) ); ?>

Code für die Implementierung unter WordPress

Im Template des Themes, welches den das Zufallsbild enthalten soll, muss dann der nötige Codeschnipsel rein. Natürlich kann man dies auch ohne WordPress nutzen, nur dort ist es mir besonders aufgefallen und der folgende Beispielcode nutzt zur Integration des Pfades einen Template Tag. Damit wird die Implementierung unabhängig und das Theme kann weiterhin auf andere WP-Installationen transportiert werden.


<img src="<?php bloginfo('template_directory'); ?>/images/headerimg_<?php echo (rand(1,5)); ?>.png" alt="Alternativ-Text" />

Update

Anbei noch eine Lösung mit der ich Bilder aus meinem Photoblog hole. Vielleicht kann sie ja der eine oder andere nutzen. Die Lösung nutzt nur die Thumbnail-Bilder und bindet diese in die Zufallsausgabe ein.


<?php
$dir = $_SERVER['DOCUMENT_ROOT'] . "/photos/wp-content/uploads/";
if ( is_dir($dir) ) { ?>
<div class="headerimg">
	<?php
	if ($dh = opendir($dir)) {
		while (($filename = readdir($dh)) !== false) {
			$filestring = explode(".", $filename);
			if ($filestring[1] == 'thumbnail') {
				$files[] = $filestring[0] . '.' . $filestring[1] . '.' . $filestring[2];
			}
		}
	closedir($dh);
	}
	$x = count($files);
	$ausgabe1 = rand(0, $x-1);
	$ausgabe2 = rand(0, $ausgabe1-1);
	$ausgabe3 = rand(0, $ausgabe1-2);
	$ausgabe4 = rand(0, $ausgabe1-3);
	?>
	<img src="<?php echo 'http://domain.de/' . $files[$ausgabe1]; ?>" alt="Headerimage1" width="128" height="85" />
	<img src="<?php echo 'http://domain.de/' . $files[$ausgabe2]; ?>" alt="Headerimage2" width="128" height="85" />
	<img src="<?php echo 'http://domain.de/' . $files[$ausgabe3]; ?>" alt="Headerimage3" width="128" height="85" />
	<img src="<?php echo 'http://domain.de/' . $files[$ausgabe4]; ?>" alt="Headerimage4" width="128" height="85" />
</div>
<?php } ?>

Artikel #414, 29. August 2007 · PHP, Tipps, WordPress · 24 Kommentare
Tags: Header, PHP, Random, WordPress, WP, Zufall
Kommentar-Feed zum Artikel · Kommentare und Pings sind nicht erlaubt. · Kurzlink

22 Kommentare zu „Simpler Code für ein Zufallsbild im WordPress-Template“

1
Kommentar von nickbohle
29. August 2007 um 14:57
Hallo Frank!

Danke für den Tipp. Erspart mir nen Plugin (randomheader).

Gruß
Nick
2
Pingback von Random Header at www.nickbohle.de
29. August 2007 um 18:29
3
Kommentar von Gabi
30. August 2007 um 11:35
mit rand() kann man wirklich vielerlei anstellen - z.B. Zufallslinks, Zufallszitate, Zufallsbilder.

Das funktioniert auch im css: Gabis BLOGhäuschen: PHP-Code in der CSS-Datei

Auf diese Weise könnte man sogar ein ganzes Layout per Zufall immer wieder neu generieren - ob das sinnvoll ist, sei dahingestellt
4
Kommentar von cSign
5. September 2007 um 14:19
Und wie "strickt" man es in die sidebar-widgets (widget.php) wo/wie (als Nicht-PHPler ) ein?
5
Kommentar von Frank Bültge
5. September 2007 um 15:26
Die Lösung ist nicht für Widgets gedacht. Dazu muss man wesentlich mehr machen. Aber es gibt sicher ein Widget-Plugin, was diese Aufgabe erfüllt.
Oder man baut den Code direkt in die sidebar.php ein, aber ein wenig PHP sollte man können, oder zumindest lernen wollen.
6
Kommentar von Robert
5. September 2007 um 20:39
Hi Frank, gutes Beispiel! Schön schlanker Code. Kleiner Wermutstropfen: Man muss halt in die PHP-Funktion rein wenn man neue Bilder hinzufügen möchte. Ein umfangreicheres Skript kann da (oder sollte) z.B. die Funktion bieten, dass alle Bilder in einem Ordner automatisch ausgelesen werden und eines per Zufall gewählt wird. Aber für Leute, die sich nicht vor PHP-Code erschrecken, ist das eine gute Alternative!
7
Kommentar von Frank Bültge
6. September 2007 um 07:28
@Robert: dazu ist das zweite Beispiel, welches alle Dateien eines definierten Ordners ausliest. Das nutze ich bsp.weise im aktuellen Header des Blog. Dabei muss man dann die Bilder nicht nachpflegen.
8
Kommentar von Robert
6. September 2007 um 08:21
@ Frank: Asche auf mein Haupt, typischer Fall von RTFS (Read This Fine Script) Hatte es mir nicht so genau angeschaut. Noch eine kleine Anregung: Das Alt-Attribut der Bilder könnte man noch sinnvoll füllen, indem man den Dateinamen (der ja schon als Variable existiert) dafür verwendet. Rechts das ".jpg" kann man ja wegschneiden. Dazu muss der Name halt aussagekräftig gewählt werden.
9
Kommentar von ratlos
9. April 2008 um 13:00
Hallo Franke,
interessanter Beitrag.
Ich habe jedoch eine Frage...
Wie kann ich die jeweiligen Zufallsbilder einzeln verlinken?
Also, dass jedes Bild einen entsprechend Link hat. Keinen Zufallslink.
Grüße
der Ratlose
10
Kommentar von Frank Bültge
9. April 2008 um 15:06
ratlos » mit der Lösung nicht machbar, da man keinen Bezug zur ID hat. Dazu müsste man weiter ausholen oder per Feed die Daten holen.
11
Kommentar von Mirjam
14. Mai 2008 um 01:33
Einfach ein dickes Dankeschön für diese clevere Lösung.
12
Kommentar von Lefdi
3. Juni 2008 um 21:11
Hi Frank,
das klingt nicht schlecht. Ich suche jedoch eine Lösung wie ich die Bilder auf einer Seite wechseln kann.
Also ich hätte gerne, dass auf der Startseite "Home" immer wieder ein anderes Bild kommt.

Funktioniert das mit der oben beschriebenen Methode auch....?

Lefdi
13
Kommentar von Frank Bültge
3. Juni 2008 um 21:22
@Lefdi: Die Änderung in der obigen Version erscheint bei jedem Reload der Seite, nicht als Slideshow. Dazu ist JavaScript oder Flash nötig.
14
Kommentar von aebby
28. Juni 2008 um 11:40
Hallo Frank, ich lese schon eine Weile mit, jetzt mein erster Kommentar und ein Dankeschön für die Idee hier, damit habe ich genau die Lösung gebastelt die ich gebraucht habe. Ich habe sowohl vom Beitrag als auch in der Blogroll verlinkt - ok?
grüße Aebby
15
Kommentar von hombertho
1. November 2008 um 19:01
Super Tipp, einfach und genial. Genau das was ich für meinen Blog gesucht hatte. Vielen Dank Grüße Thomas
16
Pingback von Zufallsbilder im Header | That's me
1. November 2008 um 19:08
17
Kommentar von Gustave Courbet
5. November 2008 um 14:01
einfacher gehts wirklich nicht, Danke für den Tipp.
18
Kommentar von Stephan
13. Dezember 2008 um 15:32
Hallo Frank,

ich muss jetzt doch noch einmal nachfragen, da der Einbau bei mir nicht so richtig funktioniert.
Ich habe gesehen, dass deine Thumbnailbilder im Header alle den Zusatz ".thumbnail" haben, wobei meine Thumbnails in Deinem tollen Grey-Theme alle den Zusatz "-128x85" tragen. Ich denke mal, dass dies nicht ganz unentscheidend ist, für die Anzeige der Bilder auf einer anderen Seite.

Auch ist mir noch nicht ganz klar, welche Domain in Deinem Beispielscript eingetragen werden muss. Egal mit welcher URL ich es versuche, die Bilder werden einfach nicht angezeigt.

Kannst Du mir möglicherweise noch einen Tipp geben?

Vielen Dank vorab und schönen dritten Advent.

Gruß Stephan
19
Kommentar von Frank Bültge
14. Dezember 2008 um 13:15
@Stephan: beim Upload der Bilder werden ja nach WordPress-Version unterschiedliche Namen erzeugt. Aber anstatt thumbnail kann man ja auch den Wert 128x85 o.ä. nehmen.
20
Kommentar von Andrea
29. Dezember 2008 um 07:57
Hallo Frank,

ich habe das gleiche Problem wie Stefan - die Bilder, die von WP 2.7 erzeugt werden, heißen bsp. xxx-150x150.jpg oder xxx-480x640.jpg. Leider bin ich nicht php-fit und weiß nun nicht, wie ich den Code oben entsprechend anpasse. Vielleicht kannst du mir auf den richtigen Weg bringen? Danke!

LG Andrea
21
Kommentar von Filmzitate-Joe
24. August 2009 um 15:11
Hallo Frank,

vielen Dank für das sehr ausführliche und anschauliche Tutorial...und größten Respekt an dein Blog Template...das ist die User Experience, die man sich andernorts nur wünschen kann...

Ich habe nur noch eine kleine Frage...PHP funktioniert ja nur bei einem neuen Pageload...gibt es diese Funktion auch in JavaScript, sodass ich das Bild automatisch per window onload alle paar Sekunden neu laden lassen kann...bräuchte diese Funktion für meine Zitate und Sprüche Website...

wäre dir äußerst dankbar für ein kurzes Kommentar.
22
Kommentar von Frank Bültge
25. August 2009 um 08:48
Ja, so was gibt es, aber ich habe dazu kein Beispiel; eine Suche im Netz hilft sicher.
Vielen Dank für das Lob.
23
Kommentar von Filmzitate-Joe
2. September 2009 um 15:53
danke für den Denkanstoß...es gab im Internet doch eine Fülle an Code Templates für derartige Funktionen...ich habe mich mal an diesem Code orientiert....http://www.free-solutions.de/js/dokument_bildertausch_zufall.html
24
Kommentar von jokkel
7. August 2010 um 07:48
Danke, das ist wirklich simpel, ich hab meine Headerrotation damit ersetzt, die war zuvor in zwei Dateien ausgelagert.