Zurück zur Übersicht

Taxonomie-Vorschaubilder mit dem Advanced Custom Fields Plugin

Hin und wieder kommt es vor, dass ein Kunde in einem Taxonomie-Template Vorschaubilder für die einzelnen Begriffe (oder „Terms“) der Taxonomie anzeigen möchte. Aus Entwicklersicht ist das keine sehr dankbare Aufgabe, man denke nur an die Integration der Mediathek in die Taxonomie-UI das Backends. Glücklicherweise hat sich jemand die Zeit genommen, um ein Plugin zu erstellen, welches uns praktisch alle Arbeit abnimmt: „Advanced Custom Fields“ von Elliot Gordon, oder kurz ACF.

Für das Plugin existieren zahlreiche Tutorials, daher wollen wir uns auf die Aufgabe beschränken, einem Taxonomie-Begriff ein Vorschaubild zuzuweisen und im Frontend anzuzeigen.

Zunächst benötigen wir eine eigene Taxonomie. Natürlich können wir die folgenden Schritte auch auf die in allen WordPress-Installationen vorhandene „Category“-Taxonomie anwenden, doch soll hier das Augenmerk auf eigenen Taxonomien liegen. Wie man eine solche registriert, erfährt man im WordPress-Codex zur entsprechenden Funktion register_taxonomy().

Nun installieren wir ACF und haben im Backend für dessen Einstellungen den neuen Menüpunkt „Eigene Felder“.

Als nächstes legen wir eine neue Feldgruppe an – diese Gruppen helfen uns, bei zahlreichen eigenen Feldern den Überblick zu behalten. Nennen wir unsere Gruppe einmal „Taxonomie Vorschaubild“. Nicht so originell, dafür selbsterklärend.
Diese Gruppe dient nun als ein „Behälter“ für sämtliche Felder, die wir im Zusammenhang mit dem neuen Vorschaubild erzeugen wollen. Wir benötigen genau 1 Feld: nämlich ein Eingabefeld zum Hochladen eines Vorschaubildes. Dies ist mit wenigen Klicks angelegt:

acf1

Wir verwenden den Namen „term_thumbnail“, damit können wir den Wert (also die URL des hochgeladenen Bildes) später mit den ACF-eigenen Funktionen auslesen. Als Feld-Typ wählen wir „Bild“, ACF wird nun automatisch einen Hochlade-Dialog anstelle eines gewöhnlichen Eingabefeldes anzeigen.

Desweiteren belassen wir den Rückgabewert auf „Bild“. Dies bedeutet, dass ACF ein Array zurückliefert, welches die URL zu sämtlichen Bildversionen beinhaltet, was sehr nützlich ist, da wir als Vorschaubilder oft nicht die Originalgröße eines Bildes anzeigen wollen.

Damit ACF weiss, wo genau im Backend es dieses neue Hochladefeld anzeigen soll, scrollen wir etwas hinab zu „Position“:

acf2

Ich habe zu Testzwecken eine eigene Taxonomie mit dem Namen „Kollektion“ angelegt. Wir erstellen also eine Feldregel, welche lautet: „Zeige diese Felder, wenn Taxonomy Term ist gleich Kollektion“.

Nach dem Speichern können wir uns davon überzeugen:

acf3

So weit, so komfortabel.

Doch wie können wir die nun abgespeicherten Bild-URLs für die einzelnen Begriffe auslesen? Stellen wir uns vor, dass wir ein Template taxonomy.php haben, auf dem sämtliche Begriffe untereinander aufgelistet sind, vor jedem Begriff jedoch ein kleines Vorschaubild angezeigt wird.

Wir holen uns zunächst alle Begriffe der aktuell angezeigten Taxonomie. Danach durchlaufen wir diese mit einer foreach – Schleife, um die Vorschaubilder auszulesen. Zuletzt erzeugen wir eine ungeordnete Liste, um die Begriffe mitsamt der Vorschaubilder anzuzeigen:

Zu beachten gilt es hier, dass die ACF-Funktion get_field() in unserem Fall als zweiten Parameter folgendes benötigt: {Taxonomie}_{Begriff-ID}, oder als Beispiel ausgeschrieben: kollektion_1. Zurückgeliefert wird ein Array, aus dem wir die URL der gewünschten Bildgröße auslesen können.

In unserem Taxonomie-Template (normalerweise taxonomy.php) können wir die Liste nun einfach mit der neuen Funktion anzeigen:

Schreibe einen Kommentar