Podcast, WordPress

WordPress benutzerdefinierte Felder mit Advanced Custom Fields meistern

WordPress Entwickler und Webdesigner

Advanced Custom Fields

Benutzerdefinierte Felder oder auch Custom Fields sind in WordPress sehr hilfreich, um zusätzliche Inhalte und Daten zu Seiten, Artikeln oder auch eigenen Inhalts-Typen (Custom-Post-Types) zu speichern.

Gerade wenn WordPress als Content-Management-System und nicht „nur“ als Blog-System verwendet wird, sind die benutzerdefinierten Felder eine sinnvolle Erweiterung. Denn oftmals ist es nicht ausreichend die Inhalte nur in einem großen Editor speichern zu können.

In diesem Tutorial möchte ich euch die Basics der benutzerdefinierten Felder in WordPress erklären und zusätzlich zeigen, was mit Hilfe des Plugins Advanced Custom Fields noch alles möglich ist.

Anzeige:




Wie funktionieren benutzerdefinierte Felder (Custom Fields) in WordPress

Die benutzerdefinierten Felder findet ihr direkt in der Ansicht von WordPress, in welcher ihr auch eure Artikel oder Seiten bearbeitet.

Falls der Bereich mit den benutzerdefinierten Feldern nicht von Anfang an sichtbar ist, müsst ihr diesen einblenden. Drückt dazu auf den „Optionen“ Button in der oberen rechten Ecke. In den Optionen setzt ihr nun einen Haken in der Checkbox bei „Benutzerdefinierte Felder“.

Benutzerdefinierte Felder einblenden
Benutzerdefinierte Felder einblenden

Danach sind die Felder unter dem Text-Editor zu finden. Die benutzerdefinierten Felder bestehen aus zwei Bereichen: Dem Namen und dem Wert.

Der Name identifiziert euren Wert in den meisten Fällen eindeutig. Es ist allerdings auch möglich, mehrere Werte mit dem selben Namen anzugeben. WordPress behandelt die Ausgabe in diesem Fall als Array, dieses Thema möchte ich für den einfachen Einstieg hier jedoch nicht tiefergehend beleuchten.

Namen, die im Verlauf der Nutzung schon einmal eingegeben wurden, können komfortabel aus einem Dropdown ausgewählt werden. Eine erneute Eingabe ist nicht erforderlich.

Benutzerdefinierte Felder
Benutzerdefinierte Felder

Theoretisch könnt ihr zu jedem Artikel oder jeder Seite beliebig viele Felder anlegen. Vielleicht gibt es in eurem Blog bzw. auf eurer Webseite auch bereits benutzerdefinierte Felder, die z.B. von Plugins für ihre entsprechenden Funktionen genutzt werden.

Ein Praxis-Beispiel für benutzerdefinierte Felder

Nehmen wir einmal an, ihr möchtet in eurem Blog bei bestimmten Artikeln einen Banner unter eurem Artikel anzeigen. Dann könnte diese Schaltung z.B. über die benutzerdefinierten Felder laufen.

Legt dazu bei dem gewünschten Artikel ein Feld mit dem Namen „banner“ und dem Wert „ja“ an. Statt ja könnte man natürlich auch „yes“, „true“, „1“ oder jeden anderen beliebigen Wert verwenden.

Custom-Field mit Beispiel-Wert
Custom-Field mit Beispiel-Wert

Das Feld alleine bewirkt rein gar nichts, denn dieses muss selbstverständlich noch in irgendeiner Form von eurem Theme verarbeite werden.

Für diesen Zweck gibt es die Funktion get_post_meta( $post_id, $key, $single ). Die Attribute müssen wie folgt gesetzt werden:

  • $post_id: Entspricht der ID der Seite oder des Artikels, von welchem das Feld geladen werden soll. Die aktuelle ID einer Seite oder eines Artikels kann mit get_the_ID() abgerufen werden.
  • $key: Steht für den Namen des benutzerdefinierten Feldes, den ihr selbst im Editor festgelegt habt (im Beispiel „banner“).
  • $single: Erwartet einen booleschen Wert (true oder false). Hier könnt ihr steuern ob der Wert als String (true) oder Array zurückgeliefert wird. Letzteres ist dann sinnvoll, wenn ihr mehrere Werte / Felder mit dem selben Namen hinterlegt habt.

Um nun also unser „banner“-Feld auszulesen, benötigen wir folgende Funktion:

<?php $banner = get_post_meta( get_the_ID(), 'banner', true ); ?>

Jetzt ist in der Variable $banner der Wert gespeichert, welchen wir im WordPress Backend dem Feld zugewiesen haben. Der Rest ist mehr oder weniger nur noch Standard-Arbeit.

Wir können z.B. mit einer einfachen Abfrage prüfen, ob $banner den Wert „ja“ enthält und wenn dies der Fall ist, liefern wir das besagte Banner aus:

<?php
$banner = get_post_meta( get_the_ID(), 'banner', true );
if( $banner == 'ja' ) {
    echo '<a href="#"><img src="banner.jpg" alt="" /></a>';
}
?>

Sicher wäre es wesentlich einfacher, wenn es im Backend irgendwo eine Checkbox gäbe, mit der das Banner ein- oder ausgeschaltet werden könnte statt der Lösung mit Eintrag des Wortes „ja“. Doch genau diese Möglichkeit besteht, diese und noch vieles mehr.

Mit dem Plugin Advanced Custom Fields lassen sich unglaublich viele und auch sehr komplexe und umfangreiche individuelle Lösungen auf Basis von benutzerdefinierten Feldern entwickeln.

Die Möglichkeiten mit benutzerdefinierten Feldern und Advanced Custom Fields

Die Möglichkeiten beim Einsatz von benutzerdefinierten Feldern, vor allem in Kombination mit dem Plugin Advanced Custom Fields (zu deutsch erweiterte benutzerdefinierte Felder), sind schier unbegrenzt.

Generell lassen sich mit den Feldern bereits viele Funktionen umsetzen. Die Funktion, eigene Werte zu Inhalten zu speichern ist an sich bereits sehr wertvoll. Eine weitere, sehr hilfreiche Funktion ist die mögliche Filterung von Inhalten auf Basis der Werte in einem benutzerdefinierten Feld.

Es ist z.B. möglich über einen angepassten Query nur Inhalte anzuzeigen, die einen bestimmten Wert gesetzt haben, z.B.:

query_posts(array(
    'meta_key' => 'banner',
    'meta_value' => 'ja'
));

Weiterhin ist es möglich Vergleiche auf Basis der Felder durchzuführen, z.B. ob der Wert (erfordert entsprechend einen numerischen Wert) eines Feldes größer als 20 ist:

query_posts(array(
    'meta_key' => 'anzahl',
    'meta_value' => 20,
    'meta_compare' => '>',
    'orderby' => 'meta_value',
    'order' => 'ASC'
));

WordPress selbst bietet euch für die benutzerdefinierten Felder lediglich die Möglichkeit, einfache Texte oder Zahlen in einem Feld zu hinterlegen. Advanced Custom Fields steigert diesen Funktionsumfang um ein vielfaches.

Die Felder werden nicht nur um weitere Eingabemöglichkeiten, wie z.B. Select-Felder, URL-Felder, Checkboxen, Radio-Buttons, Bild-Uploads, Datei-Uploads, E-Mail Felder, Galerien, interne Links, Repeater uvm. erweitert, sondern es besteht auch die Möglichkeit, die Felder entsprechend zu validieren und an Bedingungen zu knüpfen.

Dabei handelt es sich natürlich um signifikante Verbesserungen, die gerade für Endkunden sehr wichtig sind. Denn wenn wir einmal ehrlich sind: Die einfache Eingabeform der benutzerdefinierten Felder, wie sie von WordPress gestellt wird, ist nicht sehr anwenderfreundlich, zumindest wenn komplexere Eingaben getätigt werden sollen.

Der Umfang von Advanced Custom Fields

Kurz vorweg: Für das Plugin Advanced Custom Fields (ACF) gibt es eine kostenpflichtige Pro-Version mit erweiterten Funktionen, die ich hier teilweise auch mit aufführen möchte.

Die im weiteren Verlauf gezeigten Funktionen und Beispiele lassen sich aber alle problemlos mit der kostenlosen Version des Plugins umsetzen bzw. ist der Umfang der kostenlosen Version bereits unglaublich hoch, so dass die Pro-Version tatsächlich als das typische Sahne-Topping zu sehen ist.

Advanced Custom Fields bietet unter anderem folgende Felder an:

  • Text
  • Textfeld
  • Nummer
  • E-Mail
  • Url
  • Passwort
  • WYSIWYG-Editor
  • Bild-Upload
  • Datei-Upload
  • Galerie
  • Auswahlmenü
  • Checkbox
  • Radio-Button
  • Ja/Nein Abfrage
  • Beziehung zu einem Beitrag
  • Link zu einer Seite oder Artikel
  • Google Map Karte
  • Farbauswahl (Color-Picker)
  • Datum (mit jQuery Kalender-Funktion)
  • und noch einige mehr …

Ihr seht also, dass ACF euch mit diesen Feldern eine riesengroße Auswahl an Möglichkeiten zur Gestaltung von Eingaben bietet.

Weiterhin können die Inhalte und Eingabemöglichkeiten nach bestimmten Regeln validiert oder an Bedingungen geknüpft werden. Hierdurch seid ihr noch flexibler mit der Verwendung der Eingabemöglichkeiten.

So funktioniert das WordPress Plugin Advanced Custom Fields (ACF)

Einen umfangreichen Einblick mit entsprechenden Beispielen habe ich euch als Video-Podcast / Screencast aufgezeichnet. Daher möchte ich im weiteren Verlauf nur noch die wichtigsten Basics erklären. Ein umfangreiches Tutorial findet ihr in diesem Video:

ACF organisiert die benutzerdefinierten Felder in sogenannten „Felder-Gruppen“. Diese Gruppen können über verschiedene Felder verfügen und über Bedingungen an bestimmte Templates, Post-Types, Kategorien und viele andere Bedingungen geknüpft werden.

Als erstes können verschiedene Felder zusammengestellt werden und zum Teil über Layout-Elemente, wie z.B. Tabs, optisch getrennt und besser gegliedert werden.

Advanced Custom Fields - Felder Gruppe
Advanced Custom Fields – Felder Gruppe

Pro Feld können verschiedene Einstellungen festgelegt werden, die je nach Funktion variieren. Auf dem Screenshot ist ein Textfeld zu sehen, welches noch die Möglichkeiten für Standardwerte, Filter für eine bedingte Anzeige und Eingrenzungen der Texte anbietet.

Der Feld-Name hat in ACF dieselbe Funktion, wie auch in den normalen benutzerdefinierten Feldern von WordPress. Er dient zur Identifikation der Felder.

Advanced Custom Fields - Bedingungen für Anzeige
Advanced Custom Fields – Bedingungen für Anzeige

Unterhalb der Felder wird die Gruppe mit einer Bedingung an Inhalte geknüpft. In diesem Beispiel wird die Felder Gruppe für alle Seiten angezeigt, die das Page-Template (Seiten-Vorlage) „Projekte“ verwenden.

Auf einer entsprechenden Seite würde das Ganze dann z.B. wie folgt aussehen:

Advanced Custom Fields - Felder im Editor
Advanced Custom Fields – Felder im Editor

Mit Hilfe von ACF könnt ihr euch also auf eine relativ bequeme Art & Weise eigene Eingabemasken für individuelle Inhalte zusammenbauen.

Diese müssen nun nur noch im Theme ausgelesen werden. Dies funktioniert ähnlich, wie auch mit den normalen benutzerdefinierten Feldern:

<?php the_field('feld-name'); ?>
<?php echo get_field('feld-name'); ?>

Nun könnt ihr mit den Werten der Felder so ziemlich alles anstellen! Ich persönlich verwende Advanced Custom Fields mittlerweile in fast jedem oder zumindest jedem zweiten Projekt, um die Eingabemöglichkeiten zu erweitern und einfach anwenderfreundlicher zu gestalten.

Nun wünsche ich euch viel Spaß mit dem obigen Video und beim Ausprobieren.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

16 Antworten zu “WordPress benutzerdefinierte Felder mit Advanced Custom Fields meistern”

  1. Hallo Pascal,

    ein sehr interessanter Beitrag. Ich beschäftige mich auch gerade mit ACF und da hilft das schon weiter.
    Ich hätte aber noch eine Frage dazu. Vielleicht kannst du ja helfen.
    Ich möchte in meinem Theme auf den Kategorieseiten ein zweites Beschreibungsfeld hinzufügen. Wie gehe ich dabei am besten vor? Bzw. wo muss ich was anlegen. Habe dazu bislang noch nichts finden können.

    Beste Grüße
    Micha

  2. Hallo Pascal. Sehr schön erklärt und auch dein Video finde ich super.

    Aber eine Frage hätte ich dennoch, die auch in den zahlreichen Youtube Tutorials noch nicht beantwortet wurde.

    Wie binde ich sinnvoll mehrere Feldgruppen ein?

    Beispiel: Ich habe mehrere Feldgruppen, die ich bei unterschiedlichen Taxonomien/Kategorien einsetze. Bei Taxonomie A greift Feldgruppe A, bei Tax. B greift Feldgr. B etc. Es sollen bei diesen bestimmten Taxonomien nur die Feldgruppen ausgegeben werden, in denen auch tatsächlich etwas steht.

    Bei ACF Pro habe ich die Möglichkeit, unter Werkzeuge, einen PHP Code zu erzeugen.

    Dort steht: „Der nachfolgende Code kann dazu verwendet werden eine lokale Version der ausgewählten Feld-Gruppe(n) zu registrieren. Eine lokale Feld-Gruppe bietet viele Vorteile; schnellere Ladezeiten, Versionskontrolle sowie dynamische Felder und Einstellungen. Kopiere einfach folgenden Code und füge ihn in die functions.php oder eine externe Datei in Deinem Theme ein.“

    Es fängt mit „if( function_exists(‚acf_add_local_field_group‘) ):“ an.

    Vielleicht kannst du einen Tipp geben, wie ich das in mein Template bekomme und nur die Felder ausgebe, die auch tatsächlich im Backend ausgefüllt wurden? Viele Felder werden pro Feldgruppe nicht verwendet. Daher scheint mir der Code, den mir ACF Pro ausspuckt, auch eher das Gegenteil zu bewirken und die Ladezeiten zu erhöhen. Außerdem scheint mir das nicht updatesicher zu sein. Wenn ich ein Feld änder, muss ich auch den Code anpassen. Und zu guter Letzt: Der Code enthält auch kein echo. Soweit meine php Kenntnise noch reichen, scheint es so als könne ich mit diesem Code gar nichts ausgeben?!

    Über ein Tutorial würde ich mich auch sehr freuen. Bin bestimmt nicht der einzige sein, der mehrere Feldgruppen ausgegeben haben möchte.

    Freue mich auf deine Antwort.

    Marcel.

    • Hallo Marcel,

      ich bin mir nicht ganz sicher, ob ich dich richtig verstanden habe. Aber so wie ich deine Infos interpretiere, meinst du die PHP Export Datei für ACF?
      Was aber willst du damit genau ausgeben? Die Export Datei dient lediglich für die Übernahme von ACF Strukturen, also Feldern und Grupen, nicht aber deren Inhalten.
      Diese Export Funktion dient z.B. dafür, dass du die ACF Struktur automatisch mit dem Theme in einem neuen WordPress Blog importieren kannst. Mit der Ausgabe irgendwo auf der Seite hat diese Funktion nichts zu tun.
      Wenn du Felder erweiterst, so muss auch die Export-Datei neu erstellt werden.

      Beste Grüße
      Pascal

  3. Hi Pascal,

    du hast vollkommen recht. Ich habe da etwas durcheinander gebracht.
    Natürlich meine ich die Ausgabe einer ganzen Gruppe innerhalb meines Themes. Damit hat die Exportdatei natürlich nichts zu tun.

    Mittlerweile bekomme ich es hin, eine Gruppe auszugeben. Aktuell werden aber tatsächlich alle im Profil hinterlegten Gruppen ausgegeben. Vom Theme selbst werden noch ein paar definiert, die aber nicht ausgegeben werden sollen. Das zu regeln, dafür reichen meine php Kenntnisse nicht mehr aus.

    Wenn du aktuell Zeit hast, freue ich mich über weitere Nachrichten und ein Angebot von dir. Kannst mich gerne über meine E-Mail Adresse anschreiben.

    • Hallo Boris,

      das Theme sollte eigentlich wesentlich mehr Daten haben, außer du arbeitest in einem Child-Theme, dann verhält es sich noch einmal anders.
      Wenn du möchtest, können wir dich bei WordPress-Arbeiten im Rahmen unserer Agentur-Tätigkeit unterstützen: https://www.pascal-bajorat.com/

      Schreib uns einfach eine Mail mit weiteren Details und was du genau vor hast.

      Beste Grüße
      Pascal

  4. Mal noch ein Noob-Frage dazu, wozu die ACFs überhaupt da sind. Ich möchte folgendes tun:

    Ich habe ein Hauptprojekt – dieses kann und soll ruhig als „Blog“ funktionieren. Dann habe ich 4-6 (die Anzahl steht noch nicht fest) Unterprojekte, die ich als „Seite“ anlegen will. In der Seite sollen mehrere Inhaltselemente verfügbar sein:

    [Inhalt 1] [Inhalt 2]
    [Event-Plugin Kategorie X]

    [Inhalt 2] besteht aus mehreren Elementen. Einige Elemente sollen in mehreren Unterprojekten gleichzeitig vorkommen, aber jeder Block „Inhalt 2“ ist anders zusammengestellt.

    Nun die eigentliche Frage: Sind die ACFs überhaupt dazu gedacht? Das Einarbeiten wird sicher einige Zeit in Anspruch nehmen. Ich will ja nur dahingehend abkürzen, dass ich wissen will, ob das Einarbeiten lohnt, oder ob ich doch lieber die Zeit in ein anderes CMS investieren sollte (z.B. Typo3, da habe ich dann die Baustelle Responsive Design vor mir – irgendwas ist halt immer 😉

    LG Markus

    • Hi Markus,

      genau dafür sind die ACF-Felder gedacht, du kannst die Inhalte damit beliebig erweitern und das ganze so umsetzen.
      WordPress hat auch genau für solche zusätzlichen Inhalte im Core schon zusätzliche Felder integriert, ist also alles in Ordnung und du kannst es so erweitern.

      Beste Grüße
      Pascal

  5. Hallo Pascal,
    ein Bekannter von mir baut gerade eine medizinische Seite über unerwartete Behandlungserfolge auf. Da er überhaupt keine Ahnung von WordPress hat und ich mir selber ein wenig Ahnung verschafft habe (beim Aufbau meiner Seite bibelwelt.de) bat er mich, ihm dabei zu helfen.

    Er wünscht sich, dass Besucher seiner Homepage direkt im Frontend in einer von uns konfigurierten Eingabemaske Texte eingeben können, die dann Beiträgen gespeichert werden und von anderen Besuchern angesehen und kommentiert werden können.

    Nun wurde uns das Plugin ACF empfohlen, um „mit etwas Code“ eine solche Eingabemaske zu entwickeln. Ich habe das Plugin testweise ausprobiert, habe auch ein Gruppenfeld mit mehreren Feldern definiert. Aber leider reichen meine Code-Kenntnisse nicht aus, um zu erreichen, dass dieses Gruppenfeld nun auf einer Seite im Frontend auch gezeigt wird, um es dort auszufüllen.

    Meine Englischkenntnisse scheinen wiederum nicht auszureichen, um dem Supporter von ACF klarzumachen, was ich eigentlich vorhabe. (Er bleibt zwar immer höflich, scheint aber letzten Endes ausdrücken zu wollen: lerne erstmal Codieren, bevor du hier dumme Fragen stellst…).

    Meine Frage an dich: Geht das, was ich vorhabe, mit ACF überhaupt – ein Formular im Frontend anzuzeigen? Ich stelle mir das gar nicht so schwer vor – habe aber keine Ahnung, welcher genau der richtige Code ist, um an genau welcher Stelle eingesetzt zu werden, um das zu bewerkstelligen…

    Viele Grüße
    Helmut Schütz

  6. Hallo Pascal, danke für die schnelle Antwort und den guten Tipp!

    Sehe ich das richtig – die Empfehlung der Kurse hat jetzt nichts mit der konkreten Frage zu tun, sondern da geht es allgemein um WordPress-Kurse?

    Hab gerade mal in GravityForms reingeschaut – scheint auf den ersten Blick zu klappen. Es kostet 59 Euro, steht dabei – weißt du, ob das ein einmaliger Preis ist oder ob auch Update-Kosten anfallen? Ich will halt meinem Bekannten nicht zumuten, irgendwelche Katzen im Sack zu kaufen. Sicher muss etwas, was gut ist, auch nicht unbedingt kostenfrei sein, aber bei einer nicht-kommerziellen Seite möchte man die Kosten schon gerne eingrenzen.

    • Hi Helmut,

      Updates kosten jeweils jährlich, ja. Dafür macht das Plugin, soweit ich das verstanden habe, relativ genau was du suchst. Es geht auch mit selber bauen günstiger, dann muss man allerdings die eigene Zeit in die Arbeit investieren und für die Umsetzung lernen. Es sind schon ein paar umfangreichere Arbeiten erforderlich, wenn man es komplett selber lösen möchte. Am Ende geht also sowohl die eine wie auch die andere Variante 😉

      Zum Kurs: Das war bzw. ist eine allgemeine Empfehlung, wenn du bzw. dein Bekannter frisch in der Materie sind, aktuell haben wir den Kurs für lediglich 10€ im Angebot, da kann man also für den gelungenen WordPress Einstieg nicht viel falsch machen, falls das für dich / euch interessant ist. Mehr Details zum Umfang und Inhalt findest du direkt auf der Angebotsseite.

      Beste Grüße
      Pascal

  7. Hallo,

    wie kann ich im Adminbereich einen eigenen Menüpunkt schaffen um dort INhalte zu erfassen? Ich möchte z.B. ein Orte und Künstler in eigenen Menüpunkten erfassen. Nicht als Zusatz zu den normalen Seiten.

    Danke
    Markus

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.