Wählbare Inhaltsfelder mit ACF (Advanced Custom Fields)

In diesem Video zeige ich dir wie du mit dem Plugin ACF oder auch genannt Advanced Custom Fields auf deiner WordPress Seite für deine Seitentemplates wählbare Inhaltsfelder erstellen kannst. Und zwar so, dass man zum Beispiel entscheiden kann, ob an einer bestimmten Stelle ein Video oder ein Bild geladen werden soll. Ich hatte nämlich letztens mal bei einem Kundenprojekt genau diesen Use Case. Ich hatte verschiedene Seitentemplates angelegt mit ACF. ohne dass der Anwender letztendlich im Page Builder oder so arbeiten muss, um Inhalte zu bearbeiten. Und an einer Stelle hatte ich es halt so, dass dort ein Bild oder ein Video geladen werden soll und dass man halt als Anwender an dieser Stelle auswählen kann. Und da bin ich dann in dem Plugin auf die Funktion Bedingte Logik gestoßen. Ich hatte vorher schon mal öfter gesehen. dass es das auch gibt. Ich habe mir auch schon ansatzweise gedacht, was es ist, aber hatte irgendwie nie die Möglichkeit, das mal auszuprobieren. Und jetzt in diesem Projekt hatte ich mal die Möglichkeit, mich damit auseinanderzusetzen und finde es eine ziemlich coole Funktion, die ich dir jetzt gerne einmal in dem Video vorstellen möchte. So, los geht’s. Für dieses Video habe ich einmal den Use Case aus dem Kundenprojekt ziemlich easy nachgebildet. Und zwar war es da so, dass ich ein Template erstellt habe dem Anwender die Möglichkeit geben wollte, dass er an einer bestimmten Stelle zwischen Bild und Video direkt im Backend, ja im Seitenbearbeitungsmodus auswählen kann, ob jetzt an der einen Stelle ein Bild oder ein Video geladen werden soll. Und ja, dafür habe ich einmal die Seite erstellt und dementsprechend das Template. wo gesagt wird, ok wir haben Bild und Video und diese Elemente habe ich mit ACF erstellt. Dafür habe ich die Feldgruppe hier jetzt mal wählbare Inhaltsfelder genannt erstellt, wo ich sage, ok wir haben ein Bild und wir haben ein Video und Dafür möchte ich jetzt einmal die Auswahlmöglichkeit erstellen. So, in Bearbeitungsmodus sieht es nämlich aktuell so aus, dass ich beides gleichzeitig sehe. Ich habe auf der linken Seite das Bild und auf der rechten Seite das Video. So, und das möchte ich jetzt in einem Dropdown quasi komprimieren, sodass ich die Möglichkeit gebe, zwischen beiden Medien auswählen zu können. Und das geht folgendermaßen, indem wir in ACF einfach ein weiteres Feld anlegen, was sich nennt Auswahl und das nennen wir jetzt einfach auch mal Medium-Auswahl. und können jetzt hier Auswahlmöglichkeiten eingeben und da nehmen wir jetzt natürlich dementsprechend Bild. Video und diese Auswahlmöglichkeiten müssen wir jetzt natürlich irgendwie noch mit diesen beiden Feldern verknüpfen. So und dafür gibt es diese wunderbare Funktion Bedingte Logik und wir fangen jetzt mal bei dem Bild an und hier kann ich sagen wenn ich diese aktiviere dieses Feld anzeigen, Somit sage ich, dass das Feld mit dem Bild nur angezeigt werden soll, wenn ich in dem Auswahlfeld ausgewählt habe Bild. Also der Wert ist gleich Bild, dann wird das angezeigt. So und genau das gleiche machen wir jetzt auch mit dem Video. Ich aktiviere hier die bedingte Logik und sage dieses Feld anzeigen, falls Mediumauswahl den Wert Video hat. So, das speichere ich jetzt einmal und dann schauen wir uns das mal in dem Bearbeitungsmodus erneut an. So und jetzt haben wir hier, genau einmal die Medium-Auswahl und kann jetzt sagen Bild oder Video und so wird mir jetzt halt, je nachdem was ich auswähle, das Video angezeigt oder das Bild angezeigt. So, wir wollen jetzt einmal das Bild hinterlegen. Das Video schmeißen jetzt einmal raus. So, dass wir jetzt aktuell, wir können uns das jetzt nochmal anschauen. Wenn wir uns jetzt die Seite anschauen. Genau, jetzt haben wir nur den Text und nur das Platzhalterbild, was dann automatisch geladen wird, wenn kein Bild hinterlegt wird. Und jetzt muss ich diese Logik, die ich jetzt für das Backend angewendet habe, auch noch für das Frontend anwenden und bei dem Impreza-Theme ist das sehr schön, dass ich in PageBuilder ziemlich einfach die individuellen Felder, die ich mit ACFS stelle, über den Punkt Beitragselemente einfach hier mit Benutzer-Definite-Betragsfeld laden kann und hier dann auch noch ein paar Einstellungsmöglichkeiten habe und hier kann ich ganz easy sagen, ok, dieses Element ausblenden, wenn sein Wert leer ist. Und das mache ich jetzt mal für beide Eben. So bei dem Bild sage ich so ausblenden wenn es leer ist, Video ausblenden wenn es leer ist. Und somit haben wir jetzt dieselbe Logik für das Frontend auch. So und jetzt können wir das ja einmal durchspielen. So ich möchte jetzt die Seite bearbeiten und möchte jetzt auf meiner Seite, die aktuell so aussieht. Jetzt haben wir auch kein Bild. Platzhalter wird jetzt auch nicht geladen, weil ich sage, okay, wenn das leer ist, bitte nichts anzeigen. Somit haben wir jetzt nur Text und ich bin jetzt der Anwender und sagen wir mal, ich möchte jetzt ja ein YouTube Video hinterlegen. und bin jetzt hier in der Seitenbearbeitung und kann jetzt hier ganz easy auswählen, ok Bild oder Video und jetzt kann ich hier einfach den Videolink eingeben, speicher die Seite. dann schauen wir uns das mal an und wir sehen es wird nur das Video geladen. Das gleiche machen wir es auch noch mal mit dem Bild. Das Video schmeiße ich wieder raus und wähle jetzt hier das Bild aus. Wähle ein Bild aus meiner Mediathek. und Das schauen wir uns jetzt auch einmal an. Und jetzt haben wir das Bild. Und ja, so kann man ziemlich easy die Usability im Backend verbessern. Man kann das natürlich auch noch mit vielen anderen Feldern machen. Man hat ja hier bei ACF auch in der kostenfreien Version schon sehr viele Möglichkeiten, die man hier hinterlegen kann. Und ja, mit der bedingten Logik kann man das dann eigentlich mit allen möglichen Feldern so einstellen. Und ja, das war es eigentlich auch schon. So kannst du ziemlich schnell und ja auch ziemlich einfach, finde ich, wählbare Inhaltsfelder für deine Templates im WordPress Backend erstellen. Und ja, ich hoffe, ich konnte dir mit dem Video weiterhelfen und wünsche dir viel Spaß beim Nachmachen.