Freiheit in der Feldgestaltung

WordPress-Plug-Ins: Advanced Custom Fields
Keine Kommentare

Es gibt Plug-ins, die in den Werkzeugkasten eines jeden WordPress-Entwicklers gehören. Eins davon ist Advanced Custom Fields. Das Plug-in kann dem erfahrenen Entwickler viel Programmierarbeit abnehmen, bietet aber auch dem WordPress-Anfänger viele einfache Möglichkeiten zur Erweiterung der Eingabemasken.

Was genau macht Advanced Custom Fields ? Einfach ausgedrückt: Es erweitert die Eingabemasken von WordPress ohne Programmierung beliebig. Nach der Installation kennt WordPress zwei Arten von Content: den Beitrag und die Seite. Bei einem Blog werden neue Artikel als Beitrag erstellt; Inhalte wie Impressum, Kontaktformular oder Datenschutzhinweise sind Seiten. Beide Contentarten sind gleich aufgebaut. Sie bestehen aus einer Überschrift und mit einem WYSIWYG-Editor erstelltem Text. In Letzterem lassen sich auch Bilder positionieren und Texte formatieren.

Weitere Arten von Content lassen sich über Custom Post Types anlegen, die im Frontend mit Templates dann auf eine andere Art und Weise ausgegeben werden können. Prinzipiell besteht aber auch dieser neue Custom Post Type aus nichts anderem als einer Überschrift und einem Textfeld. Man gerät mit dem Einsatz von WordPress als Content-Management-System also schnell an die Grenzen des Machbaren. Ein Anwendungsbeispiel: Man möchte im Frontend über der eigentlichen Überschrift eine weitere Unterüberschrift einfügen. Wo soll man diese erfassen? Hierfür stellt WordPress natürlich entsprechende Funktionen bereit. Mit Custom Fields kann der Entwickler ausgesuchte Content-Arten um Felder erweitern. Er muss hierfür das Template anpassen, der Redakteur kann dann die entsprechenden Daten erfassen. Während man einen Beitrag erstellt, muss man dafür die Ansicht anpassen und die Zusatzfelder einschalten.

Dies ist weder schön noch intuitiv. Auch lässt sich diese Möglichkeit der Erweiterung von WordPress eigentlich nur nutzen, wenn Name und Einsatzzweck des Zusatzfelds bekannt sind. Eine weitere Hilfestellung ist nicht möglich. Im Prinzip muss man dem Redakteur ein Handbuch geben, in dem man definiert, welches Zusatzfeld wozu dient und wo man es einsetzt. Was soll man aber machen, wenn das Zusatzfeld ein Bild sein soll? Als Eingabe ist nur reiner Text vorgesehen. Was macht man, wenn Abhängigkeiten existieren sollen? Zusatzfelder, die beispielsweise nur für eine bestimmte Kategorie vorgesehen sind oder Slider über dem Text, die ein- und ausschaltbar sein sollen? Genau hier kommt Advanced Custom Fields ins Spiel, auf Deutsch: erweiterte Zusatzfelder.

Diese Advanced Custom Fields erweitern die Optionen zum Erstellen von Zusatzfeldern in WordPress. Sie erscheinen an beliebiger Stelle der Eingabemaske und fragen einen beliebigen Contenttyp ab. Sie können auch so konfiguriert werden, dass sie nur sichtbar sind, wenn frei definierbare Abhängigkeiten erfüllt sind, also z. B. nur in einer bestimmten Kategorie oder bei Verwendung eines definierten Schlagworts. Sie können außerdem in Abhängigkeit zueinander stehen. Es kann also Felder geben, die nur erscheinen, wenn ein zuvor eingegebenes Feld einen bestimmten Wert enthält. Neben Text sind als Contenttypen auch der WYSIWYG-Editor, Verknüpfungen zur Mediathek oder komplexe Tabellen möglich. Ein schönes Beispiel für die Verwendung von Advanced Custom Fields, das die Vorteile des Plug-ins illustriert, ist die Verwaltung von Visitenkarten inklusive Porträts aller Mitarbeiter eines Unternehmens.

Advanced Custom Fields im Backend

Das Plug-in integriert sich nach der Installation und Aktivierung in die Sidebar von WordPress als Menüpunkt Eigene Felder (Abb. 1).

Abb. 1: Der Menüeintrag „Eigene Felder“

Abb. 1: Der Menüeintrag „Eigene Felder“

Ruft man den Menüpunkt auf, erscheint eine Übersicht der Feldergruppen. Eine einzelne Feldergruppe erweitert einen Posttyp um eine beliebige Anzahl von Feldern. Durch einen Klick auf Neu erstellen erstellt man eine neue Feldergruppe (Abb. 2).

Abb. 2: Die neue Feldergruppe

Abb. 2: Die neue Feldergruppe

Diese könnte man z. B. „Rezepte“ nennen und sie um um Felder wie Zutaten, Zubereitungszeit etc. erweitern. Hierzu muss man im Voraus drei Dinge wissen:

  • Welcher Posttyp soll erweitert werden?
  • Wann sollen die neuen Felder abgefragt werden? (In der Regel ist hier die passende Antwort: immer)
  • Welche Felder sollen abgefragt werden und von welchem Typ sollen sie sein? (Text, WYSIWYG, Bild etc.)

Im hier gezeigten Beispiel ist die Regel einfach. Wir erstellen ein paar neue Felder für den Artikeltyp „Page“ (Seite), die immer erscheinen sollen. Weitere Regeln brauchen wir nicht, und nach dem Festlegen eines Titels können wir die Felder auch schon erfassen. In Abbildung 3 sind die einzelnen Felder zu sehen. Sie bedeuten Folgendes:

  • „Bezeichnung“ entspricht dem Namen eines Felds. Dieser wird dann später auch exakt so wie hier angegeben in der Eingabemaske angezeigt.
  • „Name“ ist an dieser Stelle irreführend. Im Prinzip bezeichnet es die programmiertechnische Kennung des Felds. Der „Name“ wird später für die Ausgabe im Template verwendet und muss deshalb so gewählt sein, dass eine Programmiersprache ihn versteht: nur Kleinbuchstaben, keine Leerzeichen oder Sonderzeichen und stattdessen Bindestriche oder Unterstriche. Gibt man eine Bezeichnung an, macht Advanced Custom Fields automatisch einen Vorschlag für den Namen.
  • „Feld-Typ“ definiert die Art der zu erfassenden Daten. In der Regel ist es der bereits voreingestellte Typ „Text“. Es kann aber z. B. auch ein Bild oder der WYSIWYG-Editor gewählt werden.
  • „Feld-Anweisungen“ entspricht einem Hilfetext, der dem Redakteur angezeigt wird, wenn er das Feld verwendet. Dieser Text kann beliebig komplex sein; bleibt das Feld leer, erscheint kein Hilfetext. Dies ist möglich, wenn die Bezeichnung des Feldes bereits aussagekräftig genug ist, z. B. bei einem Feld mit der Bezeichnung „Unterüberschrift“.
  • „Erforderlich?“ In der Regel ist hier „Nein“ ausgewählt. Stellt man es auf „Ja“, wird das neue Feld zu einem Pflichtfeld. Der Redakteur kann dann eine neue Seite nur speichern, wenn er einen Wert in diesem Feld erfasst.

Alle weiteren Felder bleiben in der Regel leer. Sie erlauben aber die bessere Steuerung des Zusatzfelds, das erstellt werden soll. Beispielsweise lassen sich dem neuen Feld Texte voranstellen (wie „Quelle:“) oder Werte für das Feld vorgeben (wie die Vorwahl für eine Telefonnummer). Hat man alle Felder angelegt, darf man nicht vergessen, oben rechts auf Veröffentlichen zu klicken. Erst dann erscheinen die Felder in der Eingabemaske.
Für das Beispiel der Rezepte könnte eine Eingabemaske dann wie in Abbildung 4 aussehen. Wie man sieht, sind einige Eingabefelder hinzugekommen, während das eigentliche WordPress-WYSIWYGFeld verschwunden ist.

Advanced Custom Fields im Template

Um ein Zusatzfeld auch im Template auszugeben, braucht man nur dessen Namen. Man kann das Feld dann an beliebiger Stelle in das Template integrieren . Hierzu reicht der folgende PHP-Befehl:

<?php the_field('name_des_feldes'); ?>

Das wars dann auch schon. Natürlich gibt es Feldtypen, die zusätzliche Parameter zulassen. Es lassen sich jedoch alle Feldtypen mit the_field in standardisierter Form ausgeben. Man kann aber auch komplexere Formen der Ausgabe wählen, z. B. für Bilder, um die Standard- WordPress-Funktionen für die Ausgabe von Bildern zu verwenden.

International PHP Conference 2018

Getting Started with PHPUnit

by Sebastian Bergmann (thePHP.cc)

Squash bugs with static analysis

by Dave Liddament (Lamp Bristol)

API Conference 2018

API Management – was braucht man um erfolgreich zu sein?

mit Andre Karalus und Carsten Sensler (ArtOfArc)

Web APIs mit Node.js entwickeln

mit Sebastian Springer (MaibornWolff GmbH)

Das Interessante an Advanced Custom Fields ist, dass sich die Ausgabe im Template von einem kleinen Textfeld bis hin zu einem Slider beliebig komplex gestalten lässt. Das
Gleiche gilt für die Eingabe. Man kann die Advanced Custom Fields auch dazu benutzen, ganze Blöcke im Template ein- bzw. auszuschalten. Dazu würde man statt des Befehls the_field den Befehl get_field verwenden, der den erfassten Wert in einer Variable speichert:

<?php
$variable = get_field('name_des_feldes');
// TODO: Aktion mit $variable durchführen
?>

Kostenlose Erweiterungen für die Advanced Custom Fields

Für Advanced Custom Fields gibt es einige kostenlose, inoffizielle Plug-ins, die primär die Feldtypen erweitern. Herausgehoben sei an dieser Stelle das Plug-in Table Field , das die Eingabe von Tabellen durch einen Redakteur erlaubt. Hierbei lässt sich sowohl die Anzahl der Spalten als auch der Zeilen vom Redakteur frei definieren. Das Plug-in ist interessant, weil Tabellen seit jeher sowohl Entwickler als auch Redakteure bei einer freien Verwaltung vor Probleme stellen. Dadurch, dass der Redakteur vollkommen frei bei der Eingabe ist, muss der Entwickler diese Variabilität auch im Template übernehmen, hat so aber auch den Vorteil, die Tabelle in beliebiger Form für jedwede Vorgabe anpassen zu können.

Die Pro-Version von Advanced Custom Fields

Wie inzwischen bei einigen WordPress-Plug-ins, existieren auch von Advanced Custom Fields eine Pro-Version und eine Developer-Lizenz, die bei komplexen Contentstrategien durchaus sinnvoll sein können. Alle offiziellen Plug-ins für das Tool sind in der Pro-Version enthalten. Zu den Extras in dieser Version gehören Repeater Fields, Flexibler Content und die Optionsseite. Repeater Fields lassen sich bei der Dateneingabe beliebig oft verwenden. Man könnte einmal das Feld als Bild/Porträt definieren, und der Redakteur kann es, wenn es als Repeater Field definiert ist, so häufig wie notwendig bei der Eingabe wiederholen.

Zusatzoption zwei, Flexibler Content, ist ein durchaus mächtiges Werkzeug, um Redakteuren die Gestaltung einer Seite zu ermöglichen. Hierbei sind im Backend keine Felder mehr vordefiniert. Stattdessen steht eine Auswahl an Feldern zur Verfügung. Ähnlich wie beim Visual Composer für WordPress kann der Redakteur nun eine Seite erstellen, ohne dass vorgegeben ist, in welcher Reihenfolge und ob überhaupt bestimmte Felder erscheinen. Er kann einzelne Typen auch beliebig oft wiederholen. Ein einfaches Beispiel wären z. B. die vier Felder Zwischenüberschrift, Textfeld, Tabelle, Bild. Mithilfe flexiblen Contents können diese Felder dann nach Bedarf in beliebiger Reihenfolge oder gar nicht zusammengesetzt werden.

Wenn außerdem die Optionsseite eingeschaltet ist, erscheint im Hauptmenü der neue Menüpunkt Optionsseite, worüber einer Seite eine beliebige Zahl von Feldern hinzugefügt werden kann. Es können mehrere dieser Optionsseiten hinzugefügt werden. Nach einer kleinen Änderung in der functions.php stehen die hier erfassten Daten überall im Template zur Verfügung, was hier insbesondere bedeutet: außerhalb des Kontexts eines Posts. Übliche Anwendungen für die Optionsseite sind Texte im Header oder Footer des Templates, die mit einer Optionsseite vom Redakteur bearbeitet werden können.

Fazit

Die Advanced Custom Fields bieten eine sehr gute Möglichkeit zur einfachen und schnellen Erweiterung der Eingabemasken von WordPress. Bereits Anfänger erreichen schnell ihre Ziele und können die Eingabe beliebig komplex aufbauen. Meist gehen individualisierte Felder allerdings mit Custom Post Types einher, die das Plug-in leider nicht verwaltet. Hier hilft weiterhin nur einfache Handarbeit in der functions.php oder ein zusätzliches Plug-in. Mit Advanced Custom Fields lässt sich die Eingabemaske mit minimaler Arbeit am Template erweitern, ohne die für WordPress übliche intuitive Bedienung aufgeben zu müssen.

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -