Suche
Suche
Close this search box.
ACF Elementor

Eigene Felder und Post-Typen mit Elementor

tl;dr: Für die Darstellung von speziellen Inhalten brauchen wir oft mehr als die vorinstallierten Möglichkeiten von WordPress. Hier erfährst du, wie man eigene Felder (Custom Fields) und eigene Beitragstypen (Custom Post Types)  gemeinsam mit Elementor einsetzen kann. 

Eigene Felder - wozu?

Wer ein Blog betreibt und seine Beiträge kategorisiert wird schnell merken, dass unterschiedliche Inhalte manchmal auch unterschiedlichen Informationsarten bedürfen. Zum Beispiel kann bei einem Foodblog eine Kategorie mit Gastrokritiken ein Feld mit geographischen Daten benötigen, in einem Beitrag mit einem Rezept ist aber beispielsweise die Angabe eines Schwierigkeitsgrades für die Umsetzung sinnvoll.

Um das umzusetzen wäre es doch hilfreich, eigene Felder zusätzlich zum Inhaltsfeld zur Verfügung zu haben? Dafür verwenden wir ein Plugin das unter dem Akronym ACF bekannt ist. ACF steht für Advanced Custom Fields

Alternativ zur der Kombination ACF/CPT kann man auch das kostenpflichtige Plugin Toolset verwenden. Ausserdem unterstützt Elementor auch Pods

Eigene Felder - Advanced Custom Fields - ACF

Für unser Beispiel ist die kostenlose Standardversion des Plugins ausreichend. Es liegt übrigens auch in deutscher Übersetzung vor. Nach Installation und Aktivierung sind die eigenen Felder unter Individuelle Felder im Dashboard zu finden. Eigene Felder werden in Feldgruppen zusammengefasst, wir müssen also:

  1. eine Feldgruppe anlegen
  2. innerhalb der Feldgruppe ein oder mehrere Felder anlegen
  3. Die Bedingungen (Position) festlegen, wann diese Felder auftauchen und befüllt werden.
ACF im Dashboard - Eigene Felder
Individuelle Felder im Dashboard
ACF
Feldgruppe in ACF anlegen

Mit dem Erstellen der Feldgruppe kann man gleichzeitig auch Felder anlegen. Wir klicken also auf „Feld hinzufügen“ und geben dort die Feldbeschriftung, den Feldnamen und – ganz wichtig – den Feldtyp an.  Natürlich gibt es eine Menge weitere Optionen, die teilweise selbsterklärend sind oder aber auch ein wenig Vertiefung ins Thema benötigen. ACF bietet eine sehr gute Dokumentation dazu. 

Auswahl Feldtypen
Die Auswahl an möglichen Feldtypen ist lang.
Feld anlegen
Mit der Veröffentlichung legen wir die Feldgruppe an und erstellen gleich das erste Feld.

Wichtig: Elementor unterstützt nicht alle möglichen Feldtypen. Alle Typen, die hier gelistet sind, werden unterstützt: Elementor Integration with ACF. Wer Unterstützung für Beziehungsfelder (Relationship) oder Wiederholungsfelder (Repeater) benötigt wird um die Installation eines zusätzlichen Plugins nicht herum kommen. Nicht ganz einfach in der Bedienung aber wirklich sehr mächtig ist das Plugin: Dynamic Content for Elementor, eine genauere Betrachtung lohnt sich!

Als nächsten Schritt müssen wir nun die Bedingung anlegen, wann das Feld auftauchen soll. Auch hier ist die Auswahl groß, ich wähle hier im Beispiel aus, dass das Feld dann auftauchen soll, wenn ein Beitrag in der (natürlich zuvor angelegten) Kategorie „Gastrokritiken“ auftauchen soll.

Position ACF
Das Beispielfeld soll nur dann auftauchen, wenn einem Beitrag eine bestimmte Kategorie zugeordnet wird.
Beitrag ACF Fekd
Wenn ich nun einem Beitrag die entsprechende Kategorie zuordne taucht das neue Beispielfeld auf.

So kommen nun alle mögliche individuelle Inhalte in die Datenbank hinein. Der nächste Schritt besteht nun darin, diese Inhalte innerhalb der Elementor Umgebung sichtbar zu machen. Elementor unterstützt die wichtigen Tools ACF,  Toolset und Pods von Haus aus. Wir müssen also nur das Template (oder auch eine einzelne Seite oder einen Beitrag) anweisen, das angelegt Feld auszulesen. 

Dazu verwenden wir ein geeignetes Widget wie zB. Text-Editor oder Überschrift und klicken auf das kleine „Dynamisch“ rechts oben. Hier können wir dann ACF-Feld auswählen und in weiterer Folge durch Daraufklicken auch den „Schlüssel“, also den Feldnamen auswählen. 

Elementor ACF-Feld nutzen
Wenn man auf >Dynamisch< klickt tacht ganz unten in der Auswahl ACF-Feld aus.
Elementor Feld dynamisch mit ACF füllen
Wenn der richtige Schlüssel (=Feldname) gewählt wird taucht der dynamische Inhalt sofort im Editor auf.

Dieses kleine oben Video zeigt, wie man eine Überschrift einbindet und den Inhalt aus einem ACF-Feld einbindet.

Das ist jetzt schon mal sehr praktisch. Ab sofort kann ich also meine Inhalte so strukturieren, dass sie zusammenhängend nur dann angezeigt werden, wenn ich sie wirklich benötige. Ausserdem bieten mir die vielen vorbereiteten Feldtypen – bis hin zu Feldern für Dateien, Maps und Datumsfeldern schon eine grosse Flexibilität – die dann weiter durch Repeater-Felder (in deutsch ein wenig unglücklich mit Gruppe übersetzt) gesteigert werden. Also der Option, zB. in einem Beitrag das Eigene Feld Datenblatt so anzulegen, dass ich nicht nur eines sondern beliebig viele Datenblätter zuordnen kann. 

Eigene Beitragstypen - Custom Post Types - CPT

Es kann also ganz schön weit führen, wenn man sich die Möglichkeiten hier mit ein wenig Kreativität ausmalt. Trotzdem kann es sinnvoll sein, wenn man die gewünschte Flexibilität nicht (nur) auf der Ebene der Felder, sondern auf der Ebene der Posttypes, also der Beitragstypen, einbaut. WordPress arbeitet von Haus aus mit mehreren Beitragstypen, augenscheinlich sind die Typen Seiten und Beiträge, doch auch jedes Bild nutzt einen Beitragstyp, und zwar Attachment. 

Es liegt also nahe, einen eigenen Beitragstyp anzulegen wenn man Inhalte besonders zusammenfassen möchte, zB. wenn man Produkte in einer Art Produktdatenbank verwalten möchte. Ein Plugin welches die Anlage und Verwaltung von CPTs erleichtert heißt Custom Post Type UI und liegt auch in einer deutschen Übersetzung vor. Nach der Installation kann man recht einfach einen neuen Typ anlegen. Eigentlich muss man nur den Namen des Types in verschiedenen Formen angeben und sich danach Gedanken machen, welche Einstellungen (und da gibt es viele) für den neuen Typ sinnvoll sind. 

Wenn man nun CPT mit ACF kombinieren will kann man in diesen Einstellungen auch festlegen, dass der neue Typ Produkte die Fähigkeit haben soll, eigene Felder zu unterstützen. 

CPT anlegen
Ein eigener Posttyp ist mit dem Plugin CPT UI schnell angelegt.
PostType im Dashboard
Im WP-Dashboard taucht (je nach Einstellungen) dann der Posttype auf.
Elementor Nachhilfe
Noch Fragen? Harry Martin hilft dir weiter. Auch einzelne Nachhilfestunden.
Nachhilfe

CPT und Elementor - wie man das verbindet

Wenig überraschend (es ist ja zB. auch bei der internen Suche so) funktioniert der Zugriff auf den neuen Post Type mit einem Template über ein Archiv. Wir müssen also einfach im WordPress 

Dashboard > Theme Builder > Archiv

gehen und ein neues Archiv anlegen.  Wie auch immer wir das Archiv gestalten ist eine Sache, wichtig ist einfach, dass wir in dem Widget, mit dem wir die Beiträge anzeigen, die Abfrage entsprechend anpassen. Gleich unter Quelle taucht der neue Post Type auf.

CPT Anzeige
Unter Abfrage kann man nun den angelegten Post-Typ auswählen.

Für die Detailseite, also in unserem Fall die Seite für das einzelne Produkt, legen wir ebenfalls ein Template an. In dem Fall eben ein Single-Template. Also Theme Builder > Single.

Auch dort stehen uns wieder alle Gestaltungsmöglichkeiten offen (Siehe auch hier unter 5. Blogpost). Zusätzlich zu den Widgets für Single-Posts können wir – sofern wir zB. ein eigenes Feld für eine Produktnummer angelegt haben – diese Nummer dynamisch einblenden. 

Single Template
Im Single Template können wir nun eigene Felder in unserer Darstellung eines eigenen Post Types mit den Standardfeldern wie Titel und Beitragsbild kombinieren.

Arbeiten mit Toolset

Der zweite große Player am Markt neben ACF ist Toolset. Der Preis beginnt bei US$ 69,- pro Jahr, dafür bekommt man die notwendigen Funktionen um eigene Posttypen zu erstellen und diese dann auch einzubinden.

Im Wesentlichen funktioniert die Einbindung wie auch bei ACF, nur dass eben statt einem ACF-Feld ein Toolset-Feld ausggewählt werden muss.

Toolset Field

Toolset lässt sich um eine (im Paket enthaltene) Erweiterung namens Toolset Views erweitern. Damit kann man (HTML und CSS-Kenntnisse schaden nicht!) eigene Ansichten zu den angelegten eigenen Feldtypen erstellen. Diese Views lassen sich dann wiederum über ein Elementor Widget einbinden.

Toolset Elementor Widget

Eine andere Lösung, um Toolset-Felder (also deren Inhalte) in einem Template anzuzeigen liegt in Shortcodes. Toolset generiert zu jedem angelegten Feld einen Shortcode, der sich dann auch über das einfache Text-Widget einbinen läßt.

Beispiel:

[types field='kurztitel'][/types]

Zeigt das Toolset-Feld mit dem Namen Kurztitel an. Formatiert wird es dann wiederum über die Stil-Funktionen im Widget:

 

Toolset Shortcode
Die Toolset Shortcode Einbindung über das Text Widget. Formatiert als H2.

Fazit

Es ist also wie immer: es ist besonders hilfreich, wenn man vorher weiss, was man eigentlich will. Die sinnvollste Vorgehensweise ist folgende: 

  1. Definieren ob man einen eigenen PostTyp braucht, wenn ja anlegen.
  2. Festlegen, welche Informationen nicht innerhalb der bestehenden WordPress-Felder untergebracht werden können. Diese mit ACF oder Toolset anlegen.
  3. Ein Archivtemplate in Elementor erstellen (soferne wir einen eigenen Posttype angelegt haben).
  4. Ein Single-Template erstellen und dort die eigenen Felder dynamisch einblenden.
Veröffentlicht: 19.Dezember 2019
Letztes Update: 4. Januar 2024