Tutorial für Advanced Custom Fields: Dein ultimativer Leitfaden

WordPress Custom Fields sind ein wichtiger Teil dessen, was WordPress zu einem flexiblen Content Management System macht, und nicht „nur eine Blogging-Plattform“.

Wenn es um WordPress Custom Fields geht, ist das Freemium Advanced Custom Fields Plugin einer der bekanntesten Namen. Es macht es einfacher, mit Custom Fields in allen Aspekten zu arbeiten, und es ist auch das Thema unseres heutigen Posts.

Konkret erklären wir dir, warum Advanced Custom Fields so wertvoll ist und zeigen dir dann Schritt für Schritt, wie du es auf deine WordPress-Seite anwenden kannst.

Hier ist alles, was du in diesem Post findest:

Es gibt viel zu tun, also lasst uns eintauchen…..

Was sind WordPress Custom Fields? Was lassen sie dich tun?

Mit den WordPress Custom Fields kannst du zusätzliche Informationen zu einem Inhalt in WordPress hinzufügen, speichern und anzeigen. Auf einer eher technischen Ebene helfen dir Costum Fields beim Speichern von Metadaten.

Auch wenn du mit diesem Begriff nicht vertraut bist, können Costum Fields einen Großteil der Funktionalität in deinen Lieblings-Plugins und -Themen nutzen.

Zum Beispiel, WooCommerce, die beliebteste Art, einen eCommerce-Shop zu erstellen, verwendet Costum Fields, um zusätzliche Informationen über ein Produkt wie:

• Preis
• Gewicht
• Farbe

Oder, wenn du ein WordPress Event-Kalender-Plugin hast, verwendet dieses Plugin Costum Fields, um zusätzliche Informationen über ein Ereignis wie:

• Ort
• Start-/Endzeit
• Preis

Du kannst auch deine eigenen Costum Fields erstellen, um Informationen zu speichern, die für deine individuellen Bedürfnisse relevant sind, worum es in diesem ganzen Post geht.

Wann solltest du Costum Fields verwenden?

Nun, du fragst dich vielleicht, warum du überhaupt Costum Fields brauchst.

Wenn du zum Beispiel eine Veranstaltung auf deiner WordPress-Seite veröffentlichen möchtest, kannst du nicht einfach alle diese Informationen als normalen Text in den WordPress-Editor einfügen?

Nun, ja, das könntest du. Aber die Verwendung von Costum Fields ist aus einigen Gründen ein besserer Ansatz:

• Einfachere Eingabe – anstatt Dinge von Grund auf neu einzugeben, macht eine übersichtliche benutzerdefinierte Field Group die Dateneingabe wesentlich einfacher. Anstatt beispielsweise ein Datum einzugeben, kannst du einfach das Datum aus einem Datumspicker auswählen.
• Konsistenz – die Informationen, die du in deine Costum Fields eingibst, werden immer entsprechend deiner Konfiguration angezeigt, d.h. sie sind über deine gesamte Website hinweg konsistent.
• Einfache Updates und Wartung – wenn du etwas daran ändern möchtest, wie diese Informationen in Zukunft angezeigt werden, kannst du nur eine Sache aktualisieren, anstatt jeden Post einzeln bearbeiten zu müssen.

WordPress enthält eingebaute Costum Fields Funktionalität

WordPress enthält tatsächlich eine integrierte Funktionalität zum Hinzufügen von Costum Fields zu deinen Inhalten. Im klassischen TinyMCE-Editor kannst du dies im Bereich Screen Options aktivieren. Oder im New Block Editor kannst du ihn über den Bereich Options aktivieren:

Du kannst dann deine Costum Fields Daten über Schlüssel/Wertpaare eingeben:

Diese native Funktionalität der Costum Fields ist voll funktionsfähig, aber es ist nicht die benutzerfreundlichste Art, Dinge zu tun, weshalb sich viele Leute stattdessen an das Advanced Custom Fields Plugin wenden.

Advanced Costum Fields machen es viel einfacher

Einfach ausgedrückt, Advanced Custom Fields macht es viel einfacher, mit Costum Fields in WordPress in…. so ziemlich allen Aspekten zu arbeiten.

Es vereinfacht die Benutzeroberfläche zum Hinzufügen und Verwalten von Costum Fields in der WordPress-Leiste und vereinfacht auch den Prozess zur Anzeige von Informationen aus Costum Fields auf dem Frontend deiner Website. Diese Tatsache hilft nur zu erklären, warum es auf mehr als 1 Million Websites mit einer Bewertung von 4,9 Sternen in über 1.000 Bewertungen aktiv ist.

Im Backend kannst du benutzerfreundliche Meta-Boxen erstellen, die vordefinierte Feldtypen enthalten. Anstatt dieser generischen Schlüssel-Wert-Paar-Schnittstelle (wie die, die du oben gesehen hast), kannst du also Datumsauswahlen, Kontrollkästchen und mehr wie diese verwenden:

Insgesamt bietet Advanced Custom Fields mehr als 30 verschiedene Field Types, die du zu jedem Bereich in deinem Dashboard hinzufügen kannst, einschließlich Beiträge, Benutzer, Taxonomien, Medien, Kommentare und sogar benutzerdefinierte Optionsseiten.

Detaillierte Informationen zu den einzelnen Feldtypen findest du hier.

Advanced Costum Fields machen es auch viel einfacher, diese Informationen anzuzeigen, mit gut dokumentierten Funktionen, Shortcodes, Gutenberg-Blöcken und mehr.

Oder du findest Integrationen mit anderen Tools, wie z.B. einigen Drag & Drop WordPress Seitenerstellern.

Advanced Custom Fields kostenlos vs. Pro: Welches brauchst du?

Advanced Custom Fields gibt es sowohl in einer kostenlosen als auch in einer günstigen Premium-Version.

Für die meisten einfachen Anwendungen ist die kostenlose Version völlig in Ordnung. Es bietet dir Zugriff auf fast alle Feldtypen sowie auf alle oben beschriebenen zeitsparenden und benutzerfreundlichen Funktionen.

Wenn du nur ein paar zusätzliche Informationen über deinen Inhalt speichern möchtest, ist die kostenlose Version alles, was du brauchst.

Damit ist gesagt, dass die Pro-Version einige ziemlich praktische Funktionen hinzufügt, die dir helfen, Advanced Costum Fields auf interessantere Weise zu nutzen:

• Repeater-Felder – mit diesen kannst du bestimmte Felder/Gruppen von Feldern nachträglich wiederholen. Wenn du beispielsweise Informationen über einen Sprecher zu einer Veranstaltung hinzufügst, würde ein Wiederholungsfeld dir helfen, die Situation zu bewältigen, in der es mehr als einen Sprecher gibt (du könntest das/die Feld(er) für den Sprecher einfach so oft wie nötig „wiederholen“, was es dir ermöglicht, Kantenfälle zu bearbeiten, in denen es mehrere Sprecher gibt).
• ACF-Blocks – zeige deine Felder als Block Gutenberg und nicht als Meta-Box an. Dies ist besonders praktisch, wenn du eine Website für einen Kunden erstellst und ihm eine einfache Möglichkeit zur Eingabe und Visualisierung benutzerdefinierter Felddaten bieten möchtest.
• Flexibles Inhaltsfeld – Erstelle Layouts aus anderen Feldern. Es ist so etwas wie ein leichter Seitenersteller, der auf benutzerdefinierten Feldinformationen basiert.
• Galerie-Feld – Lade mehrere Bilder in ein einzelnes Feld hoch.

Es gibt auch einige andere Unterschiede, wie z.B. Optionsseiten, die Möglichkeit, Felder zu klonen, Verbesserungen an den Beziehungsfeldern und andere kleinere Optimierungen.

Hier siehst du alle Funktionen von ACF PRO.

ACF PRO beginnt bei $25 für die lebenslange Nutzung an einer einzigen Seite. Oder du kannst 100 $ für die lebenslange Nutzung auf unbegrenzten Websites bezahlen.

Beginne im Zweifelsfall mit der kostenlosen Version, bis du genau herausgefunden hast, welche Funktionalität du brauchst. Du kannst jederzeit später upgraden, wenn nötig.

Advanceds Costum Fields Tutorial: So fügst du deine Felder hinzu

Lass uns nun in das eigentliche Advanced Custom Fields Tutorial einsteigen und ich zeige dir, wie du deinen ersten Satz von Custom Fields erstellen und anzeigen kannst.

Für dieses Beispiel, nehmen wir an, du hast einen Blog über das Laufen. Du bist wie….wirklich auf Laufen und möchtest deine täglichen Trainingseinheiten mit deinen Lesern teilen. Insbesondere möchtest du mit jedem BlogPost die Ergebnisse eines Runs teilen:

• Zweck – nehmen wir an, du hast zwei verschiedene Arten von Laufen: „Geschwindigkeitsarbeit“ und “Konditionierung“.
• Distanz – wie lang dein Lauf war.
• Startzeit – wann du deinen Lauf gestartet hast.
• Endzeit – wann du deinen Lauf beendet hast.
• Ort – wo dein Lauf stattgefunden hat.

Um diese Informationen zu sammeln, musst du fünf Costum Fields hinzufügen.

Es ist wichtig zu beachten, dass die Prinzipien, die du in diesem Tutorial für Advanced Costum Fields lernen wirst, für jeden Anwendungsfall gelten. Wir wählen nur ein konkretes Beispiel aus, weil es hilft, ein konkretes Beispiel für die Verbindung zu haben.

Wir werden dieses Tutorial in zwei Teile unterteilen:

1. Wie du deine Costum Fields im Backend hinzufügen und verwalten kannst.
2. Wie du Costum Field Information auf dem Frontend deiner Website anzeigen kannst.

1. Erstellen einer neuen Field Group

Sobald du die kostenlose Version von Advanced Custom Fields von WordPress.org installiert und aktiviert hast, gehe zu Custom Fields > Add New, um deine erste Field Group zu erstellen.

Eine “ Field Group “ ist eine Gruppe von einem oder mehreren Costum Fields, die zusammen in deinem WordPress Dashboard angezeigt werden.

In diesem Beispiel erstellst du eine Field Group, die fünf Costum Fields enthält.

Gib deiner Field Group einen Namen und wähle dann ihren Standort. Für dieses Beispiel möchten wir diese Costum Fields für normale WordPress-Blogbeiträge anzeigen, so dass du sie als Standard Post belassen kannst.

Wenn du deine Costum Fields jedoch an anderer Stelle anzeigen möchtest, z.B. neben einem Costum Posttyp oder mit einer Taxonomie, solltest du dies ändern. Du kannst auch mehrere Regeln einrichten, um deine Felder an mehreren Stellen anzuzeigen:

2. Costum Fields hinzufügen

Klicke anschließend auf + Add Field, um dein erstes Costum Field hinzuzufügen:

Dies wird eine Menge Optionen eröffnen, aber du musst nicht unbedingt alles ausfüllen.

Die beiden wichtigsten Entscheidungen sind:

• Field Label – das ist es, was im Editor erscheint. Es wird auch verwendet, um den Feldnamen zu generieren, den du im Code verwenden wirst. Du musst den Feldnamen nicht ändern (obwohl du es kannst, wenn du willst).
• Field Type – dies ist die Art von Informationen, die du sammeln möchtest. Du möchtest beispielsweise, dass ein Zahlenfeld Zahleninformationen sammelt oder ein E-Mail-Feld, um eine E-Mail-Adresse zu sammeln.

Für dieses erste Feld möchtest du einen Radio Button-Feldtyp:

Weiter unten kannst du die Auswahlmöglichkeiten der Auswahlknöpfe im Feld Auswahlmöglichkeiten eingeben:

Es gibt auch eine Reihe anderer Optionen, die du treffen kannst, wie z.B. ob ein Feld erforderlich ist oder nicht und ein Standardwert. Du kannst diese gerne nach deinen Wünschen konfigurieren.

Betrachten wir ein weiteres Beispiel: ein benutzerdefiniertes Feld, um die Distanz der Strecke zu sammeln. Diesmal möchtest du eine Feldtyp Nummer:

Du kannst die Dinge auch etwas benutzerfreundlicher gestalten, indem du die Entfernungseinheit anhängen wählst. Und wenn du willst, kannst du auch eine Validierung mit einem Minimalwert und einem Maximalwert hinzufügen. Zum Beispiel, du gehst wahrscheinlich nicht auf 1.000-Meilen-Läufe (und wenn du das tust… OMG, du bist der ultimative Forrest Gump)!

Wiederhole einfach den Vorgang für alle anderen Costum Fields, die du sammeln möchtest. Wenn es fertig ist, sollte es ungefähr so aussehen:

3. Einstellungen konfigurieren und veröffentlichen

Um die Sache abzuschließen, scrolle nach unten zu Einstellungen. Hier kannst du steuern, wie deine Felder im WordPress Editor angezeigt werden.

Meistens kannst du diese als Standardeinstellungen beibehalten. Aber zögere nicht, die Dinge zu ändern, wenn du willst. So kannst du beispielsweise deine Costum Fields über dem normalen WordPress-Editor anzeigen lassen:

Sobald du deine Entscheidungen getroffen hast, veröffentliche deine Field Group, um sie live zu erleben.

4. Hinzufügen einiger Informationen im WordPress Editor

Sobald du deine Field Group veröffentlicht hast, werden deine Felder angezeigt, wenn du einen neuen Post erstellen möchtest.

Standardmäßig werden sie sowohl im klassischen TinyMCE-Editor als auch im neuen Blockeditor gemeinsam unter dem Editor angezeigt:

Die Informationen, die du hier eingibst, werden in der WordPress-Datenbank deiner Website gespeichert, um einen einfachen Zugriff zu ermöglichen (das findest du im nächsten Teil unseres Tutorials Advanced Custom Fields).

Erforschung von Conditional Logic

Bevor wir weitermachen, machen wir einen kurzen Umweg.

Siehst du, einer der Gründe, warum Advanced Custom Fields so beliebt ist, ist wegen all der interessanten Implementierungen, die es erlaubt.

Und eine leistungsstarke Option ist hier die Conditional Logic, mit der du Felder ein- und ausblenden kannst, basierend darauf, wie ein vorheriges Feld beantwortet wurde.

Schauen wir uns ein kurzes Beispiel an, wie das funktioniert…..

Nehmen wir an, dass du über Essen, deine Reisen oder etwas anderes als Laufen bloggen möchtest. Wenn du über ein nicht ausgeführtes Thema schreibst, macht es nicht viel Sinn, die Costum Fields für Informationen über den Lauf anzuzeigen, oder?

Was wäre, wenn du, anstatt automatisch alle Costum Fields, die du gerade erstellt hast, anzuzeigen, ein benutzerdefiniertes Feld hinzufügen könntest, das lautet: „Ist dieser Post ein Lauf?

Wenn du das Kontrollkästchen aktivierst, werden die Laufinformationsfelder automatisch angezeigt. Wenn du es nicht anklickst, bleiben sie versteckt:

Das ist es, was die Conditional Logic dir erlaubt zu tun!

Um dies einzurichten, würdest du deine Field Group bearbeiten und ein neues True / False-Feld für „Is this a run?“ hinzufügen:

Dann würdest du die vorhandenen Felder bearbeiten und Conditional Logic einschalten, so dass jedes Feld nur angezeigt wird, wenn das Feld „Ist das ein Lauf?“ markiert ist:

So zeigst du Advanced Costum Fields auf dem Frontend an

Ok, wir sind auf halbem Weg durch unsere Advanced Custom Fields Reise. Du kannst nun Informationen zu deinen Costum Fields hinzufügen, sie mit dem entsprechenden Poststyp verknüpfen und in deiner Datenbank speichern.

Es gibt jedoch noch ein mögliches Problem: Die Informationen aus deinen Costum Fields erscheinen noch nirgendwo auf dem Frontend!

Das heißt, obwohl du dem Editor für deine Blog-Posts einige Costum Fields hinzugefügt hast, sieht dein Blog-Post immer noch wie ein normaler Blog-Post am Frontend aus:

Lasst uns das in Ordnung bringen.

Es gibt einige Möglichkeiten, wie du die Daten von Advanced Custom Fields auf dem Frontend deiner Website anzeigen kannst. Die genaue Methode, die du wählst, hängt von deinen Bedürfnissen und deinem Wissensstand ab. Hier gibt es drei verschiedene Möglichkeiten, dies zu erreichen:

1. Die Vorlagendateien deines Themas – dies erfordert ein wenig technisches Wissen, aber es ist meistens der beste Ansatz, besonders wenn du dich in den Vorlagendateien deines Themas wohl fühlst.
2. Mit einem Shortcode – das ist super einfach und eine gute Option, wenn du nur von Fall zu Fall eigene Felddaten einfügen möchtest. Allerdings erfordert es viel mehr manuelle Arbeit, da Sie jedem Post Shortcodes hinzufügen müssen.
3. Mit Elementor Pro – das ist großartig, weil es die Arbeit mit PHP komplett überflüssig macht, aber es ist ein Premium-Produkt und bedeutet auch, dass du Elementor Pro für dein Templating verwenden musst.

Du kannst oben klicken, um direkt zu einer bestimmten Methode zu gelangen, oder du kannst sie alle durchlesen. Es liegt an dir.

So fügt man Advanced Costum Fields in Themenvorlagendateien hinzu

Die erste Möglichkeit, deine benutzerdefinierten Feldinformationen anzuzeigen, besteht darin, die PHP-Funktionen von Advanced Custom Fields direkt zu den Vorlagendateien deines untergeordneten Designs hinzuzufügen.

Dies ist ein wenig fortgeschritten, da du dich in die Vorlagendateien deines Designs einarbeiten musst, aber es stellt sicher, dass deine Costum Fields jedes Mal automatisch an der gleichen Stelle angezeigt werden.

Insbesondere musst du die einzelne Vorlage für den jeweiligen Posttyp bearbeiten.

Für einen normalen Blog-Post ist dies single.php. Oder einige Themen zerlegen die Dinge in Vorlagenteile. Zum Beispiel musst du für das TwentyNineteen-Thema den Template-Teil content-single.php bearbeiten.

Wenn du dich hier verloren fühlst, solltest du vielleicht eine andere Methode verwenden.

Sobald du die Themenvorlagendatei für deinen einzelnen Post gefunden hast, kannst du die Funktion Advanced Custom Fields‘ the_field() verwenden, um die Informationen eines Feldes anzuzeigen. Zum Beispiel,

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

Mehr dazu erfährst du hier.

Um beispielsweise das Feld „Zweck“ anzuzeigen, würdest du Folgendes verwenden

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

Du findest den Feldnamen, wenn du eine Field Group bearbeitest:

Wenn du also ein kleines HTML-Markup mit PHP kombinierst, bekommst du vielleicht so etwas wie dieses, um alle Felder anzuzeigen:

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

Um dies über dem regulären Post-Inhalt hinzuzufügen, füge dies zu deiner Themenvorlagendatei über the_content() hinzu:

Und jetzt, nach der Aktualisierung des Blog-Posts, kannst du die benutzerdefinierten Felddaten über dem normalen WordPress-Inhalt sehen:

Um mehr zu erfahren, lies die vollständige Dokumentation der Advanced Custom Fields.

So zeigst du Advanced Custom Fields Data mit einem Shortcode an

Für eine viel einfachere Möglichkeit, die Daten deiner Costum Fields anzuzeigen, kannst du auch Shortcodes verwenden. Der Nachteil dabei ist jedoch, dass du den Shortcode jedes Mal hinzufügen musst, wenn du ein benutzerdefiniertes Feld anzeigen möchtest. Es gibt keine einfache Möglichkeit, diese Aufgabe zu automatisieren.

Der Shortcode lautet wie folgt:

[acf field="FIELD_NAME"]

Zum Beispiel, wenn du dies im WordPress-Editor eingegeben hast:

Verwendung von Shortcodes zur Anzeige von ACF-Daten

Dann würde das Frontend deiner Website genau so aussehen wie die vorherige Theme-Template-Methode:

Wie man mit Elementor Pro Advanced Custom Fields anzeigt

Elementor ist einer der beliebtesten WordPress-Seitenersteller. Es ermöglicht dir, deine Designs mit visueller Drag-and-Drop-Bearbeitung zu erstellen. Auf einer Sidenote ist Elementor einer der offiziellen Partner von Kinsta.

Mit Elementor Pro, dem kostenpflichtigen Add-on, kannst du auch die Vorlagendateien deines Designs erstellen, einschließlich einer Option zum Einfügen dynamischer benutzerdefinierter Felddaten aus Advancedn Costum Fields in deine Designs.

Dies ist eine großartige Option, wenn du die Flexibilität möchtest, automatisch benutzerdefinierte Felddaten in deine Vorlagen aufzunehmen, dich aber nicht wohl dabei fühlst, direkte Codeänderungen an den Vorlagendateien deines Designs vorzunehmen.

Um zu beginnen, gehe zu Templates > Theme Builder und erstelle eine neue Elementor-Vorlage für deine Post Single:

Du könntest die regulären Elementor-Widgets für deinen Poststitel und deinen Post Inhalt hinzufügen. Um dann die Costum Field Daten anzuzeigen, füge normale Texteditor-Widgets hinzu. Der einzige Unterschied besteht darin, dass du statt den Text zu bearbeiten, die Option Dynamic wählen würdest:

Danach kannst du das ACF-Feld aus der Dropdown-Liste auswählen:

Von dort aus kannst du das spezifische Feld auswählen, das du mit Advanced Custom Fields hinzugefügt hast:

Und du kannst auch den Tab Advanced Accordion verwenden, um Informationen voranzustellen oder hinzuzufügen, mit der du Labels und Einheiten hinzufügen kannst:

Ganz einfach, oder? Jetzt einfach für andere Costum Fields wiederholen!

Zusammenfassung

Mit Hilfe von Advanced Custom Fields kannst du deine Seiten und Blog Posts mit mehr Daten und Informationen mit einer einfach zu bedienenden Lösung bereichern. Mehr noch: Du kannst damit beginnen, zusätzliche Informationen für alle Inhalte auf deiner Website zu sammeln und diese dann auf dem Frontend für deine Besucher anzuzeigen.

Um das zu tun, hast du 3 Möglichkeiten:

• Die Vorlagendateien deines Themas
• Mit einem Shortcode
• Mit Elementor Pro

Das Wissen, das du in diesem Post gewonnen hast, wird es dir ermöglichen, das tiefe Potenzial von WordPress zu erschließen, 100% benutzerdefinierte Websites zu erstellen, die weit über die Blogging-Wurzeln von WordPress hinausgehen.

Die einzige Frage, die noch offen ist, ist diese:

Was wirst du mit den Advancedn Costum Fields erstellen? Teile es uns in den Kommentaren unten mit.