Divi ist das Haupt-Theme von Elegant Themes. Mit diesem sehr flexiblen und anpassungsfähigen WordPress Theme lassen sich fast alle Arten von Webseiten erstellen. Ich stand schon einige Male vor der Aufgabe, aus einer Auswahl von einigen Headerbildern immer zufällig eines anzuzeigen. Dies zum Beispiel auf der Startseite einer Webpage, damit das Erscheinungsbild etwas abwechslungsreich aussieht, und nicht immer das gleiche Kopfbild angezeigt wird.

Anzeige eines zufälligen Elements aus einer Gruppe von Elementen

Mit dem Pagebuilder von Divi werden die Inhalte wie in einem Baukasten-System aufgebaut. Dabei gibt es Sektionen (Englisch: Sections), welche wiederum verschiedene Zeilen (meiner Meinung nach nicht wirklich sinnvoll übersetzt, weil es in Wirklichkeit eher Spalten sind… Englisch: Rows) beinhalten können. In diesen Zeilen können dann eine beliebige Anzahl von Modulen (Englisch: Modules) eingefügt werden. Für die erwähnte Aufgabenstellung können wir jetzt vom gewünschten Element (egal ob Sektion, Zeile oder Modul) eine beliebige Anzahl nacheinander erstellen, und davon (mit etwas jQuery Code) dann immer nur eines zufällig anzeigen lassen. Um dies etwas zu veranschaulichen, zeige ich hier ein einfaches Beispiel von mehreren Titelbildern, wie sie auf einer Startseite verwendet werden könnten. Das System lässt sich aber natürlich auch auf andere Konstrukte und Elemente anwenden.

Das Grundgerüst

Hier ein Beispiel-Grundgerüst, wie es im Divi-Builder aufgebaut wird:

Die drei grauen Module wären in diesem Fall Vollbreite-Bilder, es könnten natürlich aber auch ganz andere Typen von Modulen sein. Als nächstes fügen wir jedem dieser drei Module den gleichen Klassennamen hinzu. Dafür kann jeweils das Icon mit dem Zahnrad angeklickt, und dann zum Reiter „Erweitert“ gewechselt werden. Dort geben wir jedem der drei Module den Klassennamen „startbild“ (siehe nächste Abbildung).

Ein wenig jQuery-Code

Jetzt wird die Seite gespeichert, und in die Divi Theme-Optionen zum Reiter „Intergration“ gewechselt. Im Feld „Code dem < body > hinzufügen“ kann jetzt folgender jQuery-Code eingefügt werden:

<script>
(function($) {
    $(document).ready(function() {
var random = Math.floor(Math.random() * jQuery('.startbild').length);
jQuery('.startbild').hide().eq(random).show();
    });
})(jQuery)
</script>

Dieser kleine Code zählt als erstes, wie viele Elemente mit der Klasse „startbild“ es auf der Seite gibt, und wählt aus dieser Anzahl eine zufällige Zahl aus. Danach werden alle Elemente mit dieser Klasse ausgeblendet, und nur dasjenige Elemente eingeblendet, welches der zufälligen Zahl entspricht.

Damit ist das Ziel auch schon erreicht, und es wird auf der entsprechenden Seite immer nur eines der vorhandenen Elemente angezeigt, und zwar immer ein zufälliges. Mit diesem System können beliebige Situationen gelöst werden, bei denen immer nur ein zufälliges Element aus einer Gruppe angezeigt werden soll. Zu beachten ist natürlich, dass die Elemente (auch wenn sie nicht angezeigt werden) im Browser zuerst geladen werden. Aus Sicht der Ladezeit sollte die Anzahl der Elemente deshalb so klein wie nötig gehalten werden.