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:

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

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.

Wie cool sind Costum Fields in WordPress, ähm? 👨💻 Lerne wie du diese mit dem erstaunlichen @wp_acf in unserem neuesten Leitfaden nutzen Kannst! 💪Click to Tweet

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:

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:

Wie man im Block Editor auf Costum Fields zugreift

Wie man im Block Editor auf Costum Fields zugreift

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

Die eingebaute WordPress-Funktionalität für Costum Fields

Die eingebaute WordPress-Funktionalität für Costum Fields

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:

Advanced Costum Fields im Blockeditor

Advanced Costum Fields im Blockeditor

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:

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:

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:

Erstellen einer neuen ACF-Field Group

Erstellen einer neuen ACF-Field Group

2. Costum Fields hinzufügen

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

Ein neues Feld hinzufügen

Ein neues Feld hinzufügen

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

Die beiden wichtigsten Entscheidungen sind:

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

Konfigurieren eines Feldes

Konfigurieren eines Feldes

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

Optionen für die Radiobox eingeben

Optionen für die Radiobox 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:

Erstellen eines Zahlenfeldes

Erstellen eines Zahlenfeldes

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)!

Weitere Feldeinstellungen

Weitere Feldeinstellungen

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:

5 verschiedene ACF-Felder

5 verschiedene ACF-Felder

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:

Konfigurieren der ACF Field Group Einstellungen

Konfigurieren der ACF Field Group Einstellungen

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:

Advanced Costum Fields im Blockeditor

Advanced Costum Fields im Blockeditor

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?

Beispiel für Conditional Logic

Beispiel für Conditional Logic

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

Die anderen Felder werden angezeigt, wenn sie markiert sind

Die anderen Felder werden angezeigt, wenn sie markiert sind

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:

Hinzufügen eines True/False-Feldes

Hinzufügen eines True/False-Feldes

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:

Hinzufügen von Conditional Logic zu anderen Feldern

Hinzufügen von Conditional Logic zu anderen Feldern

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:

Keine Costum Fields am Frontend

Keine Costum Fields am Frontend

Lasst uns das in Ordnung bringen.

Müde von WordPress-Problemen und einem langsamen Host? Wir bieten erstklassigen Support von WordPress-Experten, die rund um die Uhr verfügbar sind und schnelle Server betreiben. Schauen Sie sich unsere Pläne an

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:

Wo man einen ACF-Feldnamen findet

Wo man einen ACF-Feldnamen findet

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:

Wo man Code in der Themenvorlagendatei hinzufügen kann

Wo man Code in der Themenvorlagendatei hinzufügen kann

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

Du kannst nun Felder auf dem Frontend sehen

Du kannst nun Felder auf dem Frontend 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

Verwendung von Shortcodes zur Anzeige von ACF-Daten

Verwendung von Shortcodes zur Anzeige von ACF-Daten

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

Die Shortcodes sehen identisch mit der Theme-Template-Datei aus

Die Shortcodes sehen identisch mit der Theme-Template-Datei aus

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:

Erstellen einer neuen Elementor Single Vorlage

Erstellen einer neuen Elementor Single Vorlage

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:

Die Option

Die Option „Dynamic“ von Elementor Pro

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

Wähle

Wähle „ACF-Feld“.

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

Wähle das spezifische Feld aus, das du anzeigen möchtest

Wähle das spezifische Feld aus, das du anzeigen möchtest

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

Informationen voranstellen oder anhängen

Informationen voranstellen oder anhängen

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:

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.


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an