tl;dr: Eine WordPress-Website mit eigenen Feldern und Contenttypen ist schnell erstellt. Wer auf Elementor setzt oder andere Premium-Lösungen einsetzt wird sich etwas suchen, um die Daten auch im Frontend darstellen zu können. Was aber, wenn man sich nicht auf eine propietäre Lösung im Frontend festlegen will?
Dynamic Shortcodes ermöglicht die Ausgabe in ACF-Inhalten mit Classic- und Blockthemes aber auch mit Elementor. In diesem Artikel geht es darum, wie man dieses Tool einsetzen kann um die wichtigsten Feldtypen mit Gutenberg anzuzeigen.
[Der Artikel enthält Affiliate-Links, wurde aber weder beauftragt noch in irgend einer Weise bezahlt]
Dynamic Shortcodes ist ein kostenpflichtiges Plugin, aktuelle Preise:
Wer Elementor Pro verwendet sollte sich Dynamic Content for Elementor anschauen, da gibt es ev. eine Kombilösung für den kompletten Funktionsumfang.
AdvancedCustomFields ist der Marktführer für die Erweiterung von WordPress mit eigenen Feldern und Inhaltstypen. Für diesen Artikel wurde die Pro-Version verwendet, da hier die Feldtypen Galerie und Wiederholung (Repeater) dabei sind, die im Alltag bei vielen Projekten zum Einsatz kommen. Gerade für diese Inhaltsarten benötigt man normalerweise eigene Blöcke oder Widgets, die fast immer kostenpflichtig sind – und oft auch eine bestimmte WordPress-Umgebung (Theme, Plugins) voraussetzen.
Für diesen Artikel wurde eine aktuelle Standard-Installation mit Twenty Twentyfour als Theme verwendet. Die hier vorgestellten Techniken sollten bei allen Blockthemes, bei Themes mit Elemenetor-Unterstützung aber auch im Classic-Editor funktionieren.
Die Grundlegende Arbeitsweise mit Dynamic Shortcodes und eine kurze Einführung habe ich in diesem Artikel bereits beschrieben. Hier geht es jetzt darum, die (in meinem WordPress-Alltag) wichtigsten ACF-Felder anzuschauen und auszuprobieren, wie man den Inhalt des Feldes über das Template Einzelne Beiträge in TT4 (das Theme Twenty Twentyfour) anzeigen lassen kann. Über Templates in Blockthemes kann man hier nachlesen.
Die grundlegende (etwas spärliche) Dokumentation für ACF Dynamic Shortcodes ist hier zu finden. Wer mehr über die Felder und die Möglichkeiten mit ihnen wissen will findet in der ACF-Dokumentation die Infos.
Dieses Beispiel zeigt die Ausgabe eines Beitrages, ergänzt durch die unterschiedlichen ACF-Felder, umgesetzt über die Bearbeitungen des Templates Einzelne Beiträge im Blocktheme TT4.
Vorsicht Falle: verwendet man die Vorschau-Funktion im Blockeditor um sich den Beitrag mit den ACF-Felden anzuschauen werden diese nicht angezeigt (Ausgabe: NULL), man muß sich die Seite im Browser über den Permalink öffnen um die Felder anzuzeigen.
Der wohl häufigste Feldtyp ist ein einfaches Textfeld. Da der Rückgabewert eine Zeichenkette ist kann es sehr flexibel im Template eingesetzt werden. Feldname im Beispiel: textfeld
{acf:textfeld}
Im Unterschied zum Textfeld bietet der Feldtyp Textbereich eine mehrzeilige Eingabemaske. Das bedeuet aber nicht, dass hier Absätze oder Zeilenschalter die im Text eingegeben werden auch im Frontend ankommen. Feldname im Beispiel: textbereichfeld
{acf:textbereichfeld}
Die beiden Feldtypen Numerisch und Bereich unterscheiden sich durch die Eingabemöglichkeit im Backend (Feld oder Schieberegler), der Feldwert selber ist beim Numerisch-Feld eine Zahl, beim Bereichfeld eine Ganze Zahl.
Wer statt eines . bei der Dezimalzahl anzeigen lassen will kann zB folgenden Filter verwenden:
{post:numerischfeld |- str_replace('.',',')}
{acf:numerischfeld}
{acf:bereichfeld}
Beim E-Mail-Feld akzeptiert WordPress nur formal gültige E-Mail-Werte bei der Eingabe. Der Rückgabewert ist die E-Mail-Adresse als Zeichenkette.
Jetzt wäre es eigentlich logisch, dass man den Shortcode einfach als Ziel einer Verlinkung eingeben kann. Leider funktioniert das aufgrund einer Eigenart des Blockeditors nicht: Gutenberg setzt bei einem Linkfeld dummerweise http:// dem Link voran woduch kein gültiger Maillink erzeugt wird.
Die Lösung besteht darin, dass man auf die Als HTML bearbeiten im Blockeditor ausweichen muß (zu finden über das 
vertikale Menü im Blockeditor).
<p><strong>Das ist ein E-Mail-Link:</strong> <a href="mailto:{acf:e-mail-adressefeld}"> e-Mail</a></p>
Beim URL-Feld treffen wir aus die selbe Problematik wie beim E-Mail Feld: die Werte werden bei der Eingabe auf die technische Richtigkeit geprüft, es erfolgt weder eine Überprüfung ob die die URL/E-Mail existiert noch ob dieser überhaupt exisitieren kann (zB. durch eine Domainabfrage o.ä.). Dh. diese Felder sind eigentlich reine Textfelder mit Eingabeüberprüfung, daher laufen wir im Blockeditor in das selber Problem wie zuvor: der Editor ermöglicht uns nicht, den Shortcode einfach in ein Link-Feld zu kopieren, wie müssen wieder auf Als HTML bearbeiten im Blockeditor ausweichen muß (zu finden über das vertikale Menü im Blockeditor.
<p><strong>Das ist ein Web-Link: </strong><a href="{acf:urlfeld}">zur Website</a></p>
Auch Passwortfelder sind eigentlich Textfelder, die Passwörter werden in Klartext gespeichert. Die Sicherheit eines Passwortfeldes besteht also nur darin, dass die Zeichen im Moment der Eingabe durch Bullets ersetzt werden und daher nicht einfach mitgelesen werden können. Feldname im Beispiel: passwortfeld
{acf:passwortfeld}
ACF gliedert in die Rubrik Inhaltsfelder komplexere Felder ein. Wir beschäftigen uns hier mit den Feldtypen Bild, Datei, Wysiwyg und Galerie (benötigt ACF Pro!).
Bilder werden ja in der Mediathek gespeichert, dh der Speicherinhalt eines Bilderfeldes ist nicht das Bild selber sondern nur die ID, unter der WordPress das Bild in seiner Attachmentlogik anlegt. Umgekehrt heißt das, das die Informationen über das Bild (also wie es heißt und wo es liegt, etc.) erst über diese ID abgefragt werden müssen, damit man das Bild ordentlich verwenden kann. Dazu gibt es bei Dynamic Shortcodes die Abfrage nach media. Feldname im Beispiel: bildfeld.
{media:url @ id={post:bildfeld}}
{media:title @ id={post:bildfeld}}
{media:alt-text @ id={post:bildfeld}}
{media:caption @ id={post:bildfeld}}
{media:description @ id={post:bildfeld}}
Diese 5 Shortcodes zeigen alles rund um’s Bild an, also URL, Titel, Alt-Text, Beschriftung und Beschreibung.
Das ist natürlich nur die halbe Miete, denn im Normalfall interessiert man sich nicht für den Titel oder die URL eines Bildes, sondern man will das Bild selbst anzeigen. Dazu gibt es bei den Shortcodes nun folgende Syntax:
{media:image @ size=thumbnail id={post:bildfeld}}
{media:image @ size=medium id={post:bildfeld}}
{media:image @ id={post:bildfeld}}
Diese 3 Beispiele zeigen das Bild in verschiedenen Größen an, die unterschiedlichen Auflösungen des Bildes werden verwendet.
Auch das Dateifeld speichert nicht die Datei selbst sondern lediglich die ID des Attachments. Da Attachments auch nichts anders als ein eigener Posttyp sind, lassen sich mit Hilfe dieser ID der Titel und die URL der Datei anzeigen:
{post:title @ id={post:dateifeld}}
{post:permalink @ id={post:dateifeld}}
Aber auch hier (wie bei den Bildern) ist die Anwendung eher darin zu sehen den Titel einer Datei mit der URL zu verbinden. Hier bietet sich ein Powershortcode für die Umsetzung an.
<a href='{post:permalink @ id={acf:dateifeld}}'>{post:title @ id={acf:dateifeld}}</a>
Ein wysiwyg-Feld ist ein Textfeld, bei dem Textformatierung mittels HTML zugelassen ist. Gespeichert wird also ein HTML-Snippet. Das wäre jetzt ganz wunderbar, wenn man damit nicht in die selbe Problematik wie beim Textbereich schlittern würde: Absätze und Umbrüche werden zwar im Backend richtig dargestellt, im Frontend kommt es aber aufgrund der HTML-Logik (wenn wir den Shortcode in einem Absatz setzen kommt es zu einer verbotenen Schachtelung) zu Darstellungsproblemen: nur wenn man im Backend den Text-Editor statt dem Visuellen Editor verwendet kann man sicher sein, dass die Ausgabe klappt.
So gesehen ist das wysiwyg-Feld eben genau kein Feld, bei dem man bekommt was man sieht. Aber kann man dann nicht den Shortcode in den HTML-Block setzen statt in den Absatz? Ja, aber das führt auch wiederum zu unschönen Ergebnissen.
{acf:wysiwygfeld}
Bei ACF-Galeriefeld (benötigt ACF-Pro) verhält es sich wie beim Bildfeld: es wird keine Datei, sondern lediglich die ID gespeichert. Und weil es mehrere sein können ist der Rückgabewert ein Array, also eine Liste mehrerer Bild IDs.
Um diese anzuzeigen benötigt man ein Konstrukt, dass die Aufgabe „Zeige eines nach dem anderen an solange etwas da ist“ bewältigt.
{for:value {acf:galeriefeld} [{media:image @ID={get:value} size=thumbnail}]}
Den Bereich innerhalb der [ … ] kennen wir schon von der Bildausgabe: zeige das Thumbnail einer bestimmten ID an.
Die ID wiederum ist der Wert (get: value) der aus dem Shortcode acf:galeriefeld genommen wird.
for: bedeutet einfach, dass dieses Array durchlaufen wird solange Werte vorhanden sind.
Diese Ausgabe ist vmtl. nicht komplex genug um sinnvoll zu sein. In der Praxis wird man den Shortcode wohl in einen Powershortcode packen und mit Links auf die Bild-URL’s versehen, Abstände oder anderes konstruieren etc. Aber es funktioniert schon mal …
Auswahlfelder kann man sich wie Formularfelder vorstellen: damit zwingt man den User aus vorhandenen Möglichkeiten eine oder mehrere auszuwählen. Das kann mit einer Auswahlliste, Radio-Boxen (entweder/oder) oder auch Checkboxen geschehen.
Eine spannende Form ist auch das einfache wahr/falsch-Feld. Damit kann. man zB. einen Flag setzen ob eine bestimmter Block angezeigt werden soll oder nicht. Zu diesem Thema kann man hier weiter lesen.
Die Anzeige von Werten von Auswahlfeldern ist wie bei normalen Textfeldern einfach. Bei diesen Feldern liegt die Logik ja bei der Eingabe und Manipulation der Werte und nicht bei der Ausgabe.
{acf:auswahlfeld}
{acf:radiofeld}
ACF Pro fasst unter dem Begriff Layoutfelder ein paar ein wenig kompliziertere Dinge zusammen. Hier soll die Anwendung eines Wiederholungsfeldes beschrieben werden.
Folgendes Beispiel: für einen eigenen Inhaltstyp Produkte soll es die Möglichkeit geben, eine unterschiedliche Anzahl von Datenblättern zu jedem einzelnen Produkt zu stellen. Manche Produkte haben nur eines, andere aber 8 oder 10 Datenblätter. Wenn man jetzt Dateifelder einsetzen würde müsste man die größte mögliche Anzahl der Datenblätter kennen, um genau so viele Dateifelder anzulegen – die dann fast immer leer sind und im Backend Platz brauchen.
Ein Wiederholungsfeld löst das Problem, indem es zulässt Einträge so oft zu setzen wie man sie eben benötigt. Jeder einzelne Eintrag kann aus mehreren Feldern bestehen, in unserem Beispiel einem Namen des Datasheets und dem Dateilfeld selber.
Da die Ausgabe nicht ganz einfach ist bietet es sich an einen Powershortcode anzulegen.
<ul>
{acf-loop:repeater
[<li>{acf:repeatername} File: <a href='{post:permalink @ id={acf:repeaterdatei}}'>{post:title @ id={acf:repeaterdatei}}</a></li>]
}
</ul>
Umschlossen wird die ganze Geschichte mit den HTML-Tags für eine Liste <ul></ul>.
Dazwischen sehen wir die Konstruktion {acf-loop:repeater [ …]} die dafür verantwortlich ist, alle Einträge nacheinander anzuzeigen. Jeder einzelnen Eintrag ist immer zwischen den HTML-Tags <li></li> untergebracht.
Diese bestehende aus Shortcodes in {}, Text und Wiederum ein wenig HTML (zum Verlinken). Es werden also nur jene Dinge eingesetzt die weiter oben beschrieben wurden: ein Textfeld und ein verlinktes Dateifeld.
Mit dieser Technik kann man die Lücke zwischen ACF und dem Blockeditor (Gutenberg) schliessen, ohne eigene Blöcke schreiben zu müssen oder auf andere zusätzliche Software zugreifen zu können.
Man benötigt kein besonderes Theme, muß nicht in einer functions.php rumschreiben und schon gar kein Plugin erfinden, nur um die eigene Datenstruktur anzeigen zu können. Wer ohne den Pro-Funktionen von ACF auskommt kann so wirklich mit € 34,- p.a. durchkommen. Es geht schnell und ist vom Ansatz schon mal sehr flexibel.
Veröffentlicht am: 9. Juli 2024
Letztes Update: 10. Juli 2024