Simpler Code für ein Zufallsbild im WordPress-Template

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 10 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

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

+ images
|--- headerimg_1.png
|--- headerimg_2.png
|--- headerimg_3.png
|--- headerimg_4.png
|--- headerimg_5.png

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 } ?>

24 Kommentare

  1. 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.

  2. 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!

  3. @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.

  4. @ 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.

  5. 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 🙂

  6. 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

Kommentare sind geschlossen.