advanced custom fields wordpress

Was sind Advanced Custom Fields (ACF) in WordPress und wofür brauche ich sie?

„Du kennst Advanced Custom Fields nicht? Ohne ACF würde ich WordPress definitiv nicht mehr verwenden.“ Dies hat mir ein Kollege vor einigen Wochen via Slack geschrieben. Er ist allerdings Entwickler, ich Designer. Spätestens zu diesem Zeitpunkt wurde mir jedoch bewusst, dass ich mich damit beschäftigen sollte (und wollte).

Was sind Advanced Custom Fields?

WordPress an sich bietet bereits sehr vielfältige Funktionen. Mit den Advanced Custom Fields kannst du diese Funktionen nochmals stark erweitern – in der Standard-Version kostenlos. Sie erlauben dir die volle Kontrolle über den Inhalt deiner Website.

Standardmäßig finden wir im Backend für Beiträge sowie Seiten typische Felder wie Titel, Inhalt, das Datum sowie den Autor. Advanced Custom Fields, bzw. das weiter unten erwähnte Plugin, geben dir die Möglichkeit, WordPress und damit Seiten sowie Beiträge praktisch beliebig und individuell zu erweitern.

Damit ist mit WordPress so gut wie alles möglich – Advanced Custom Fields quasi als Tuning für WordPress.

Wofür benötige ich Advanced Custom Fields überhaupt?

Kurz zusammengefasst: Du benötigst Advanced Custom Fields vermutlich dann, wenn du mit den Bord-Elementen im WordPress-Backend nicht mehr weiterkommst. Du stehst vor einer Herausforderung, die mit Hilfe von Seiten oder Beiträgen nicht oder nur teilweise realisiert werden kann.

Dies kann, je nach Kundenwunsch, relativ rasch der Fall sein. Falls du selber Webdesigner bist, kommt dir dies bestimmt ebenfalls bekannt vor.

Bei mir war es beispielsweise so, dass ich eine Suche mit Filter-Kriterien bauen durfte. Also keine einfache Text-Suche, welche über die ganze Website nach passenden Inhalten sucht, sondern eine Suche, bei der zuvor via Formular spezifische Daten eingegeben werden können. Der Benutzer hat verschiedene Filter-Kriterien zur Verfügung. Unter anderem sind dies:

  • Name (Textfeld)
  • Postleitzahl (Textfeld)
  • Land (Dropdown)
  • Zertifikate (Checkbox)

Dazu aber später noch mehr. Dieser Anwendungsfall hat mich auf die Idee gebracht, Advanced Custom Fields (ACF) einzusetzen. Eine derartig individuelle Suche ist mit WordPress-Bordelementen ohne ACF schlicht nicht möglich.

RAIDBOXES kostenlos entwickeln

Advanced Custom Fields: Das kostenlose Plugin

Ich habe somit nach einer Lösung gesucht, diese Filtersuche mit Hilfe von Advanced Custom Fields umzusetzen.

Das gleichnamige Plugin im offiziellen WordPress-Plugin-Verzeichnis stammt von Elliot Condon. Der Australier arbeitet sehr aktiv daran und entwickelt es ständig weiter, sodass immer wieder neue Funktionen erscheinen. Wer ganz nahe am Geschehen dran sein möchte, kann ACF auf Twitter folgen.

Falls du bereits mutig warst und voll auf den seit WordPress 5.0 eingeführten Block-Editor (Gutenberg) setzt, gibt es auch bei den Advanced Custom Fields Blöcke für den neuen Editor.

Das ACF Plugin ist zurzeit auf weit über 1 Million Websites aktiv. Es wird sehr intensiv getestet und funktioniert mit der neuesten WordPress-Version tadellos. Ebenfalls beeindruckend ist, dass das Plugin bereits mehr als 1.000 Bewertungen mit 5 Sternen erhalten hat. Dem gegenüber stehen mickrige 16 Bewertungen mit nur einem Stern – sehr wahrscheinlich Benutzer, welche nach (sehr) kurzer Zeit aufgegeben haben.

Bei einem solchen Plugin ist klar: Es erfordert etwas Zeit und Geduld, bis du die Anwendung verstanden hast. Auch ich habe selbstverständlich erst an der Oberfläche von Advanced Custom Fields gekratzt. Ich möchte damit lediglich zum Ausdruck bringen, dass es andere Plugins gibt, die du installierst und dann funktionieren diese bequem im Hintergrund – das ist bei ACF anders. Du musst aktiv gestalten und den Gesamtzusammenhang zwischen Datenbank, Backend und Frontend erkennen.

Was bei diesem Plugin, welches doch ziemlich technisch ist, ebenfalls unentbehrlich ist: der Support.

Diesen habe ich bisher selber noch nicht beanspruchen müssen. Der Grund ist denkbar simpel: Die erstklassige Dokumentation, welche Feld-Typen, Funktionen, Filter sowie FAQ abhandelt.

Was sind Custom Post Types?

Zuvor hatte ich erwähnt, dass eine aktive Gestaltung notwendig ist. Dies bedeutet bei Advanced Custom Fields auch, dass dir diese alleine in gewissen Fällen nicht viel Nutzen bringen. Erst in Kombination mit Custom Post Types ergeben sich weitere Optionen.

Zuerst stellt sich die Frage: Was ist ein (normaler) Post Type?

Die zwei bekanntesten in WordPress sind Seiten (Pages) und Beiträge (Blog-Posts). Bei jedem neu zu erstellenden Inhalt für eine Website entscheidest du also, welcher Post Type der Passende ist. Dies ist von verschiedenen Faktoren abhängig, unter anderem der Art, wie die Informationen sichtbar sein sollen und welche Felder du dafür im Backend benötigst.

Wie verhält es sich jedoch, wenn du Inhalte bereitstellen möchtest, die weder von einer normalen Seite noch mit einem Beitrag abgedeckt werden können?

Du ahnst es vielleicht schon: Du benötigst eine neue Art, die Inhalte im Backend einzupflegen. Quasi eine Eingabemaske mit exakt den Feldern, welche du benötigst. Das können dir die Advanced Custom Fields bieten. Das oben erwähnte gleichnamige Plugin erlaubt es dir, diese Felder bequem im Backend zu definieren und zu erstellen. Steht diese Struktur einmal, kommt der nächste Schritt.

advanced custom fields eigene felder
Im Backend des ACF Plugins kannst du bequem Felder definieren.

Dann kommen nämlich Custom Post Types zum Einsatz. Ganz wichtig ist hier, dass es sinnvoll ist, für die Nutzung von Advanced Custom Fields einen eigenen Custom Post Type zu erstellen. In meinem Fall nenne ich den Custom Post Type (CPT) einfach mal Therapeuten.

Du kannst den Custom Post Type natürlich auch selber programmieren. Ich habe dafür jedoch das Plugin «Custom Post Type UI» genutzt, welches ich im nächsten Abschnitt noch genauer erläutern werde.

custom post type erstellung
So sieht das Backend des Plugins „Custom Post Type UI“ aus.

Custom Post Type UI: Kostenloses Plugin, das Zweite

Falls das bisher für dich lediglich mit den Advanced Custom Fields (ACF) zu wenig Magie war, kommt hier das Beste: ACF in Kombination mit Custom Post Type UI, kurz CPT UI.

Damit kannst du Datenbank-Inhalte nach Wunsch direkt im Frontend anzeigen. In meinem Fall stand ich vor der Herausforderung, eine Filtersuche mit verschiedenen Feldern bauen zu wollen. Ich musste somit zuerst alle Daten mittels eines CSV-Imports ins Backend hochladen.

Danach habe ich mit Hilfe des Custom Post Type sowie den Advanced Custom Fields die Basis für die Filtersuche im Frontend aufgebaut. Mehr dazu gleich im nächsten Abschnitt.

custom post type acf kombination
So kann dein neuer Custom Post Type zum Beispiel aussehen.

Praxisbeispiel: Suche mit Filter-Kriterien bauen

Soviel für den Moment zum Backend. Jetzt geht es in das Frontend. Damit du das Ganze auch anwenden und die individuellen Advanced Custom Fields für deinen Fall nutzen kannst.

Ich habe die ACF eingesetzt, um eine individuelle Suche mit Filter-Kriterien zu bauen. Wie ist es jedoch möglich, die Inhalte vom Backend elegant im Frontend zu präsentieren, sodass eine Interaktion durch den Benutzer möglich ist?

Auch hier hast du wieder die Wahl zwischen selber entwickeln und einem Plugin. Ich habe erneut lange nach einem guten Helferlein gesucht und bin dann schlussendlich auf «Search & Filter Pro» gestoßen (ist am Ende des Textes verlinkt).

Damit habe ich auf eine geniale Art und Weise die Möglichkeit, die im Backend vorhandenen Daten für die Darstellung im Frontend zu nutzen. In meinem Beispiel sind das:

  • Search (normales Suchfeld)
  • Post Meta (Zugriff und Suche auf das jeweilige Advanced Custom Field in der Datenbank)
  • Submit Button (Button zum Abschicken der Suchabfrage bzw. des Formulars)

Im Backend kann dies dann wie folgt aussehen:

search and filter pro backend
Mit dem Plugin „Search & Filter Pro“ kannst du eine individuelle Suche mit Filter-Kriterien erstellen.

Anschließend kannst du mittels Shortcode die soeben erstellte Filtersuche an beliebiger Stelle im Backend (beispielsweise auf einer Seite) einfügen.

Du wirst jedoch sehen, dass diese dann noch etwas unschön ausschauen wird. Ich habe dies durch einige CSS-Handgriffe verbessert und finde, das Resultat im Frontend kann sich durchaus sehen lassen:

praxisbeispiel acf

Ergänzende Links

Ich bin gespannt, was ich in Zukunft noch mit Advanced Custom Fields umsetzen darf. Hast du Fragen oder Bemerkungen zu diesem Artikel? Dann freue ich mich über zahlreiche Rückmeldungen.

Die neuesten Artikel rund um WordPress direkt per Mail?

Kein Problem, melde dich einfach für unsere kostenlosen WP-News an!

Ja, ich bin mit der Datenverarbeitung einverstanden.

Bild: Shane Aldendorff | Unsplash