Erstelle einzigartige Websites mit Advanced Custom Fields (ACF) und Breakdance

Beim Erstellen eines neuen Website Projekts kommt man mit den Standardmöglichkeiten von WordPress oft an seine Grenzen. Hier wäre sehr nützlich benutzerdefinierte Felder integrieren zu können um benötigte Informationen zu einem Beitrag speichern zu können. Das Plugin Advanced Custom Fields (ACF) bietet hier alles was das Herz begehrt. Mit diesem Plugin kannst du verschiedene Arten von Feldern wie Texte, Bilder, URLs oder auch komplexe Wiederholungsfelder erstellen.

Deine benutzerdefinierten Felder kannst du an beliebiger Stelle in deinem Breakdance Template integrieren. Breakdance bietet hier eine einzigartige Möglichkeit mit Custom Fields umzugehen. In diesem Tutorial werde ich dir Schritt für Schritt zeigen, wie du Advanced Custom Fields (ACF) im Breakdance Builder verwenden und die erforderlichen Einstellungen vornehmen kannst.

Advanced Custom Fields (ACF) Einstellungen

1. Advanced Custom Fields (ACF) Plugin installieren

Um das Advanced Custom Fields (ACF) Plugin zu installieren, klicke auf „Plugins“ > „Neues Plugin hinzufügen“ und suchst nach „ACF“. In den Ergebnissen erscheint das Plugin welches du installieren und aktivieren kannst.

2. Feldgruppe hinzufügen

Feldgruppen sind Sammlungen von Inhaltsfeldern welche z.B. einem Post Type oder einer Seite zugeordnet werden können. Diese Felder werden nachher im Bearbeitungsmodus des Beitrags angezeigt. Um eine neue Feldgruppe anzulegen, navigiere zu „Advanced Custom Fields“ > „Feldgruppen“ und klicke auf „Neu hinzufügen“.

3. Feldgruppe einrichten

Gib deinem neuen Feld einen Titel unter „Feldgruppen-Titel“. Unter den „Einstellungen“ für die „Regeln für diese Position“ wähle „Inhaltstyp“ aus, in unserem Beispiel „Beitrag“.

In unserem Beispiel legen wir Veranstaltungsinformationen für Blogbeiträge an. Jeder Blogbeitrag soll am Ende des Inhalts, Informationen über die Veranstaltung enthalten.

4. Felder hinzufügen

Jetzt kannst du unter „Felder“ deine gewünschten benutzerdefinierten Felder hinzufügen. Klicke auf „Feld hinzufügen“ und wähle den „Feldtyp“ aus, in unserem Fall Text. Unter „Feldbeschriftung“ schreibst du den Namen als Titel, den du als Label im Backend verwenden möchtest, in unserem Fall ist es Veranstaltung Titel. Der „Feldname“ wird automatisch erstellt, wenn du ihn umbenennen möchtest, kannst du das auch tun, wir belassen ihn erstmal so wie er generiert wurde, „veranstaltung_titel„.

5. Feldgruppe speichern

Folgende Felder haben wir in unsere Feldgruppe Veranstaltung Info hinzugefügt:

• Veranstaltung Titel als Text;
• Veranstaltung Ort als Text;
• Veranstaltung Kontakt als WYSIWYG-Editor (WordPress Textbereich);
• Veranstaltung Bild als Bild;

Wenn du alle benötigten Felder hinzugefügt hast, klicke einfach auf „Änderungen speichern“.

Template mit ACFs erstellen

6. Informationen zum Beitrag hinzufügen

Nachdem du die Felder im Advanced Custom Fields (ACF) Plugin eingerichtet hast, kannst du nun die Informationen in deine neu erstellten, benutzerdefinierten Feldern hinzuzufügen. Unter „Veranstaltung Info“ habe ich die folgenden Informationen im „Demo Post 1“ Beitrag hinzugefügt:

7. Neues Template erstellen

Jetzt gehst du in Breakdance zu „Templates“, um die „Single Post“-Vorlage zu bearbeiten, denn wir möchten unsere benutzerdefinierten Felder, die mit Advanced Custom Fields (ACF) erstellt wurden, im „Single Post“-Vorlage ganz unten im Inhalt jedes Beitrags anzeigen lassen.

8. Elemente in Breakdance einfügen

Ich habe dafür ein DIV-Element erstellt und in zwei Spalten meine benutzerdefinierten Felder hinzugefügt. In einer Spalte habe ich den Veranstaltung Titel, den Veranstaltung Ort und den Veranstaltung Kontakt platziert. In die andere Spalte habe ich das Veranstaltung Bild hinzugefügt.

Als nächstes müssen wir für jedes Element entsprechend die dynamischen Daten aus den Advanced Custom Fields (ACF) auswählen. Klicke dazu einfach auf das Element, zum Beispiel auf den „Veranstaltung Titel“, gehe dann im linken Bereich von Breakdance über den „Text“ und klicke auf das Datenbank-Symbol, das erscheint. Dadurch wird ein Popup mit dynamischen Daten geöffnet.

9. Dynamische Daten auswählen

Aus dem geöffneten Popup mit den dynamischen Daten wähle unter „ACF“ das Feld aus, welches du benötigst. In unserem Fall ist es der „Veranstaltung Titel“. Mache dasselbe für die restlichen benutzerdefinierten Felder und speichere dann die Vorlage.

10. Ergebnis Vorschau

Herzlichen Glückwunsch! Deine Daten werden jetzt dynamisch aus den benutzerdefinierten Feldern bezogen, die du gerade mit Advanced Custom Fields (ACF) erstellt hast. Das Design sieht genau so aus, wie wir es festgelegt haben. Natürlich kannst du es nach Belieben gestalten.

Inhalte abhängig von Bedingungen anzeigen

11. Bedingungen aktivieren

Im Breakdance Builder gibt es eine sehr praktische Funktion, mit der du Elemente nur unter bestimmten, von dir definierten Bedingungen anzeigen lassen kannst. Diese Möglichkeit setzen wir direkt ein: Angenommen, du hast Beiträge, in denen du nicht möchtest, dass das von uns erstellte benutzerdefinierte Feld-Element angezeigt wird.

Mit anderen Worten soll es nur erscheinen, wenn in diesen benutzerdefinierten Feldern Inhalt hinzugefügt wurde, sonst soll es nicht angezeigt werden. Genau das werden wir jetzt tun.

Gehe zuerst zu deinem DIV-Element, da dies unser Element ist, das die benutzerdefinierten Felder enthält, und wähle auf der linken Seite im Breakdance das „Einstellungen-Symbol“ > „Conditions“ > „Edit Conditions“.

12. Neue Bedingung hinzufügen

Jetzt öffnet sich ein Popup, in dem du auf die Schaltfläche „Add Condition“ klickst.

13. Dynamic Data auswählen

Wähle nun „Dynamic Data“ aus.

14. Advanced Custom Fields (ACF) auswählen

Unter Advanced Custom Fields (ACF) wähle „Veranstaltung Kontakt“ als dynamische Daten aus.

14. Wert auswählen

Im Dropdown-Menü wähle die Option „is not empty“ aus.

Das bedeutet, dass das DIV-Element nur angezeigt wird, wenn „Veranstaltung Kontakt“ nicht leer ist. Wenn wir also etwas in dieses Feld eingetragen haben, wird das Element sichtbar sein. Wenn wir jedoch nichts in dieses Feld eingetragen haben, wird das Element nicht angezeigt.

15. Alle Bedingungen anwenden

Da wir mehrere benutzerdefinierte Felder haben, müssen wir die Einstellung für alle anderen Felder wiederholen. So können wir sicherstellen, dass das Element nur angezeigt wird, wenn mindestens eines der Felder mit Informationen gefüllt ist.

Wenn du mit dem Einstellen der Bedingungen fertig bist, klicke einfach auf „Apply Conditions“.

15. Ergebnis Vorschau

Fertig! Wir haben den „Demo Post 6“-Beitrag als Beispiel genommen und die Benutzerdefinierten Felder leer gelassen, um zu zeigen, wie es mit unseren Bedingungen aussieht. Unser DIV-Element mit den Veranstaltungsinformationen erscheint nicht. Gut gemacht!

Fazit

Die Kombination von Advanced Custom Fields (ACF) und Breakdance bietet Webdesignern ein leistungsstarkes Werkzeug, um maßgeschneiderte Websites zu erstellen. Mit benutzerdefinierten Feldern können Inhalte flexibel angepasst und auf die Bedürfnisse der Nutzer zugeschnitten werden.

Durch die Integration von ACF können wir nicht nur das Design optimieren, sondern auch die Benutzererfahrung verbessern, indem wir relevante Informationen gezielt präsentieren und die Interaktion mit der Website erleichtern. Insgesamt ermöglicht uns die Verwendung von ACF in Breakdance, Websites zu gestalten, die sowohl ästhetisch ansprechend als auch funktional sind.