Dynamische Inhalte Elementor CPT UI und ACF
WPC - Dein WordPress Blog

Dynamische Inhalte mit Elementor (CPT & ACF)

Video Tutorials Serie: Was sind dynamische Inhalte und wie werden diese in Elementor eingebunden?

Bei unserem letzten Elementor Meetup in München haben wir das Thema „Dynamische Inhalte mit Elementor“ behandelt. Zusammen mit meinem Kollegen aus dem Meetup Organisationsteam Andreas Hartmann habe ich das Thema vor ca. 35 Teilnehmern vorgestellt. Da das Interesse zu diesem Thema in der Elementor Community sehr groß ist, habe ich eine Video Tutorials Reihe darüber aufgenommen und in diesem Beitrag zusammengefasst.

Elementor Meetup in München in der tollen Location "Heinrich Marketing"
Elementor Meetup in München in der tollen Location „Heinrich Marketing“

Statische Websites vs. Dynamische Websites

Was ist eigentlich der Unterschied zwischen statischen und dynamischen Webseiten? Statische Webseiten bestehen im wesentlichen aus HTML und CSS Code. Der Inhalt, der im Quellcode steht wird 1:1 im Browser wiedergegeben. Die statischen Seiten verwenden weder ein Content Management System (CMS) noch eine Datenbank. Im Gegensatz dazu, handelt es sich bei den meisten Seiten, die mit einem CMS erstellt wurden, um dynamische Webseiten. So auch bei WordPress.

Je nachdem welche Seite durch den Besucher aufgerufen wird, verwendet WordPress das entsprechende Template, um den Inhalt anzuzeigen. In diesem Template ist jedoch nicht der finale Inhalt enthalten, der den User interessiert, sondern weitere PHP Anweisungen und Unter-Templates (sog. Template Tags). Um mehr über dieses Thema zu erfahren, empfehle ich dir meinen Beitrag über WordPress Templates bearbeiten und verstehen. Durch diesen PHP Code werden die richtigen Inhalte gemäß dem Aufruf des Users aus der Datenbank geholt. Da WordPress für die Darstellung aller Seiten Templates verwendet, kann man sagen, dass in WordPress alle Inhalte dynamisch sind.

Was ist mit dynamischen Inhalten in Elementor gemeint?

Ich muss zugeben, der Titel des Elementor Meetups und damit auch der Titel der Video Serie ist nicht ganz glücklich gewählt worden. Denn wenn alle Inhalten in WordPress dynamisch sind, dann sind natürlich auch alle Inhalte in Elementor dynamisch. Was meinen wir also damit, wenn wir von dynamischen Inhalten in Elementor sprechen?

Wenn man mit Elementor eine Seite erstellt, positioniert man die ausgewählten Widgets auf der Seite und füllt diese mit Text, Bildern, Links etc. aus. Diese Art von Seiten haben ein gewisses statisches Verhalten, da sich ihr Inhalt nicht ändert, solange man den Content im Elementor Editor nicht anpasst. Das gleiche ist auch der Fall, wenn man mit dem WordPress Editor eine Seite erstellt.

Im Unterschied dazu, können wir mit Elementor Templates die Inhalte dynamischer gestalten. Wenn wir z. B. wie in der Videoreihe ein Elementor Single Template für einen Inhaltstyp (Post Type) erstellen, ist der final angezeigte Content abhängig davon, welche Einzelansicht des Inhaltstyps der User aufgerufen hat. Diese dynamischen Inhalte lassen sich in WordPress bequem mit weiteren Attributen wie Custom Fields oder Custom Taxonomies erweitern, wie in den Videos zu sehen ist.

Strukturierung von WordPress Inhalten

Bevor man sich mit dynamischen Inhalten in Elementor und allgemein in WordPress beschäftigt, ist es wichtig, sich Gedanken über die Strukturierung der WordPress Inhalte auf der eigenen Seite zu machen. Die richtigen Fragen dazu solltest du dir stellen, noch bevor du anfängst, deine WordPress Seite aufzusetzen.

In meinem WordPress Kurs findest du einen Abschnitt, der sich mit dem Thema Strukturierung und Klassifizierung von WordPress Inhalten beschäftigt:

Um dein Wissen über Custom Post Types (CPT), Custom Taxonomies und Custom Fields zu vertiefen, empfehle ich dir ebenfalls den WordPress Kurs. In der Video Reihe werden die Begriffe auch kurz erklärt.

Tutorials Serie: Dynamische Inhalte mit Elementor

Die Videoreihe besteht aus 5 Folgen und ist kostenlos auf YouTube verfügbar:

Teil 1: Elementor & Custom Post Types mit dem Plugin CPT UI

In diesem Video werden wir einen neuen Custom Post Type anlegen und eine einfache Portfolio Seite für unseren neuen CPT mit Hilfe des Portfolio Widgets von Elementor Pro erstellen. Während der Erstellung des CPTs werden wir auch gleichzeitig eine Archivseite anlegen, damit wir alle Inhalte des neuen Inhaltstyps gruppiert auf einer Seite anzeigen können. Am Ende des Videos zeige ich dir noch eine Funkton des CPT UI Plugins, welches das Plugin sehr sympathisch macht und warum ich das Plugin lieber verwende als beispielsweise das Pods Plugin.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Teil 2: Elementor Single Template erstellen

Wenn du mehr über die Vorlagen in Elementor erfahren möchtest, empfehle ich dir meinen Beitrag Elementor Templates. Der verlinkte Artikel zeigt auch, warum du das Single Template mit Bedacht einsetzen solltest.

In diesem Tutorial werden wir ein Single Template mit Elementor Pro erstellen und es unserem neuen Custom Post Type zuordnen. Das Single Template werden wir verwenden, um alle Inhalte unseres zuvor erstellten Inhaltstyps gleich darzustellen und in der Optik klar von anderen Inhaltstypen wie Beiträge oder Seiten zu trennen. In dem Single Template werden wir anschließend die ersten Inhalte des Custom Post Types anzeigen lassen. Bei den dynamischen Inhalten handelt es sich um Beitragsbild, Beitragstitel und Beitragsinhalt.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Teil 3: Elementor & Advanced Custom Fields mit dem Plugin ACF

Damit wir unseren Custom Post Type klassifizieren können, werden wir in diesem Video eigene Custom Fields mit dem Plugin Advanced Custom Fields (ACF) erstellen. Diese individuellen Felder werden wir dann ebenfalls in unserem Single Template einsetzen. Damit ergänzen wir die Inhalte des Custom Post Types um Unterscheidungsmerkmale wie Größe, Preis, Erscheinungsdatum etc.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Teil 4: Elementor & Custom Taxonomies

Es gibt Unterscheidungsmerkmale, für die lieber eine Custom Taxonomie als ein Custom Field verwendet werden sollte. Im folgenden ein paar Hinweise, die für eine Custom Taxonomie sprechen:

  • Die Unterscheidungsmerkmale lassen sich in Bereiche zusammenfassen (z. B. Erscheinungsjahr anstelle des genauen Erscheinungsdatums)
  • Die Unterscheidungsmerkmale besitzen nur wenige Werte
  • Du benötigst für dieses Unterscheidungsmerkmal eine Archivseite

Wenn diese Bedingungen zutreffen, ist es sinnvoller eine Custom Taxonomie zu erstellen. Beim Gegenteil legst du lieber ein Custom Field für das Unterscheidungsmerkmal an.

Kostenlose WordPress & Elementor Video Tutorials

YouTube Kanal von WPC abonnieren und keine Tutorials mehr verpassen!

Wir werden in dem Video zwei neue Custom Taxonomies erstellen und diese in unserem Single Template einspielen. Dabei zeige ich dir auch einen entscheidenden Unterschied zwischen hierarchischen und nicht hierarchischen Taxonomien. Du erfährst auch, warum es manchmal Sinn macht, eine hierarchische Taxonomie zu erstellen, obwohl du keine Hierarchie verwenden möchtest.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Teil 5: CSS Klassen dynamisch vergeben mit Elementor & ACF

Das ist wirklich ein Klasse-Tipp, den Andreas Hartmann mit der Elementor Community geteilt hat: CSS Klassen dynamisch vergeben! Du kannst jedem Element auf deiner Seite eine dynamische CSS Klasse zuordnen. Das Design ist somit abhängig vom aufgerufenen Inhalt und wird gemäß der definierten CSS Anweisung angepasst.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Noch mehr Elementor Tutorials?

Wenn du Lust auf weitere Elementor Tutorials von WPC hast, kannst du einen Blick auf meinen neuen Elementor Kurs werfen. Dort erstelle ich u. a. eine Top-10 Elementor Seite Schritt-für-Schritt – großer Lernerfolg und eine Menge Spaß sind garantiert. 🙂

Vielen Dank fürs Teilen dieser Seite

5 Kommentare zu „Dynamische Inhalte mit Elementor (CPT & ACF)“

  1. P

    Hallo Danijel,
    vielen dank für Deine tollen Tutorials. Ich habe eine Menge lernen können. Leider bekomme ich bei meinem Projekkt den letzten Schritt nicht hin. Ich habe eine Sammlung von Python-Anweisungen erstellt. Wenn ich dann eine Elementorseite erstelle in der alle Beiträge meines Typs in voller länge angezeigt werden sollen, zeigt sie mir die ACF nicht an, nur die Überschriften von WordPress. Kann es sein, dass ich dafür die kostenpflichtige Version von ACF benötige?
    In der Vorschau für mein Single werden die Überschrift von WP und darunter (wie ich es angelegt habe) die ACF. Alles schön formatiert.
    Vielen Dank nochmals für Deine Mühe und die vielen tollen Tuts
    Peter Bark

    1. D

      Hallo Peter,
      vielen Dank für das tolle Feedback. Es ist natürlich schwierig den Fehler remote zu finden. Ich nehme mal an, dass Du die Python-Anweisungen wirklich als Code darstellen möchtest. Bin mir gar nicht sicher, ob ACF das überhaupt kann. Welchen Field Typ verwendest Du dafür? Ich habe das zwar noch nicht ausprobiert aber ich hätte angenommen, dass man dafür Filter Hooks braucht, um den Code richtig im Frontend anzuzeigen.
      Andere Frage: Brauchst Du überhaupt ACF für diesen Anwendungsfall? Wenn Du eh Elementor verwendest, gibt es tolle Addons, die durch ein Code-Widget den Code sehr stylisch im Frontend präsentieren.
      Schöne Grüße, Danijel

  2. M

    Vielen Dank für den schnellen und einfachen Einblick der dynamischen Inhalte.
    Bin gerade dran die Plugins zu installieren gehe mal einige Use Cases durch. Können die dynamischen Inhalte auch mit Bedingunge verknüpft werden?
    Ausgangsalge : Du hast Produkt A und B . Produkt A hat 3 Eigenschaften, Produkt B hat 5 Eigenschaften. Beim Produkt A kennst du die Eigenschaft 4 und 5 noch nicht.
    Nun machst du ein Textfeld und befüllst es mit den 5 dynamischen Elementen. Wird Produkt B aufgerufen, erscheinen alle 5 Elemente. Wird Produkt A aufgerufen, erscheinen die ersten drei Elemente, aber Elemente 4 und 5 bleiben leer und du als Besucher siehst dass hier noch zwei Infos nicht vorhanden sind.

    Kannst du diesen ACFs eine IF Bedingung hinzufügen? Wenn Feld leer, dann nichts einfügen.

    Cheers, Mariano

    1. M

      Hi Daniel, ich konnte mittlerweile zwei lösungen finden.
      Lösung 1 geht über PHP. Für mich als Laie für den Moment nicht in Frage. Darum bin ich auf…

      Lösung 2 ausgewichen. Ein Plugin Namens „Dynamic Conditions“. Nach der Installation, ist es in Elementor integriert, in der Registerkarte „Erweitert“. Dort kannst du auswählen ob unter welchen Bedingungen ein Feld angezeigt oder versteckt werden soll. Du kannst somit auch zwei oder mehrere Verknüpfungen zusammenschalten.
      Cheers, Mariano

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Table of Contents

QUIZ: Teste dein WordPress Wissen!

0%

Wann erschien die erste Version von WordPress?

Correct! Wrong!

Die erste Version von WordPress erschien am 27.03.2003. Damit ist WordPress älter als Facebook und Twitter.

Welches der genannten Optionen ist kein WordPress Page-Builder?

Correct! Wrong!

Gravity Forms ist eins der beliebtesten Premium Formular Plugins.

In welcher Datei befinden sich die Sicherheitsschlüssel?

Correct! Wrong!

In der wp-config.php Datei.

Wie werden WordPress Themes wie Genesis und Beans noch genannt?

Correct! Wrong!

Ein Theme Framework ist ein vorprogrammiertes Set an Funktionen und Features, um die (Child) Theme Entwicklung zu beschleunigen.

Um den Adminbereich aufzurufen, muss die eigene Domain wie folgt erweitert werden:

Correct! Wrong!

Um beispielsweise von der Domain https://wpconsultant.de den Adminbereich aufzurufen, muss die Domain wie folgt ergänzt werden: https://wpconsultant.de/wp-admin. Möglich ist auch die URL-Endung https://deine-domain.de/wp-login.php

Welche Dateien braucht ein WordPress Theme mindestens, um zu funktionieren?

Correct! Wrong!

Damit ein WordPress Theme richtig funktioniert, benötigt es mindestens 2 Dateien: index.php und style.css. Die index.php Datei ist das Standard Template für das Theme und im Header der style.css Datei werden die notwendigen Informationen über das Theme eingetragen wie z. B. Name, Autor etc.

Was ist kein typischer Anwendungsfall für eine WordPress Multisite?

Correct! Wrong!

Um eine Landing Page zu erstellen, benötigt man nicht die Multisite Installation. Dafür reicht entweder ein wenig HTML und CSS oder eins der vielen Landing Page Plugins. Mein Tipp: Mit dem kostenlosen Plugin Elementor kannst du professionelle Landing Pages schnell erstellen. Hier erfährst du mehr über WordPress Multisite - Anwendung & Installation.

Welche Sprache spricht die WordPress Software nicht?

Correct! Wrong!

Die WordPress Software basiert auf den Sprachen PHP und MySQL. 10% der Software besteht mittlerweile aus Javascript (Tendenz steigend).

Was ist kein typischer Anwendungsfall für ein Child-Theme?

Correct! Wrong!

Eine Kopie der gesamten Website erstellt man z. B. mit dem Plugin Duplicator. Die verschiedenen Anwendungsfälle eines Child Themes und die richtige Erstellung erfährst du in dem Artikel WordPress Child Theme erstellen 2020.

Was ist ein WordPress Loop?

Correct! Wrong!

Eine Funktion, die Daten aus der Datenbank holt und sie verändert, bevor sie im Browser angezeigt werden, nennt man in WordPress einen Filter bzw. einen Filter-Hook. Eine Aktion, die an einer bestimmten Stelle im Programmablauf ausgeführt wird nennt man Action oder Action-Hook. Ein Loop ist ein PHP Code, der vordefinierte Beiträge (oder Custom Post Types) aus der Datenbank holt, um sie auf speziellen Template Dateien innerhalb eines Themes anzuzeigen.

In welchen Ordner (Verzeichnis) werden Medien wie z. B. Bilder hochgeladen?

Correct! Wrong!

In der Regel besteht der uploads-Ordner aus den einzelnen Jahres-Ordnern, die wiederum aus mehreren Monats-Ordnern bestehen.

Welches Feature ist keine Empfehlung für das WordPress Hosting (gemäß wordpress.org)?

Correct! Wrong!

Auf wordpress.org unter Requirements findest du die Empfehlung für das WordPress Hosting. Hier auf WPC findest du auch meine Hosting Empfehlung für 2020.

Welche Einstellungen gehören nicht in die wp-config.php Datei?

Correct! Wrong!

Die Integration von Javascript- und CSS-Dateien in das jeweilige Theme erfolgt in der functions.php Datei und zwar mittels wp_enqueue_scripts bzw. wp_enqueue_style.

Welche Rolle gehört nicht zu den 6 Standard User-Rollen?

Correct! Wrong!

Die 6 User Rollen in WordPress sind: Super Admin, Administrator, Editor, Author, Contributor und Subscriber.

Was kann man unter dem Menüpunkt "Einstellungen" im Adminbereich nicht tun?

Correct! Wrong!

Website Daten exportieren erfolgt unter dem Menüpunkt "Werkzeuge".

WordPress Quiz
Kein Grund zur Sorge!

Schau doch öfters mal hier auf WPC vorbei und melde dich am besten gleich für unseren Newsletter an! Du kannst auch den WPC YouTube Kanal abonnieren mit vielen kostenlosen WordPress und Elementor Tutorials. Und falls es ein bisschen mehr sein darf, gibt es da noch den WordPress Kurs von WPC ;-)
Gar nicht so schlecht!

Du weißt schon einiges über WordPress! Um dein Wissen noch weiter auszubauen, empfehle ich dir die Beiträge hier auf WPC, meinen YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinen WordPress Kurs von WPC :-)
Wow! Das kann sich sehen lassen!

Herzlichen Glückwunsch! Du bist auf dem besten Weg, ein WordPress Experte zu werden. Bleib am Ball, am besten mit den Beiträgen hier auf WPC, meinem YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinem WordPress Kurs von WPC :-)
Hast du dich gerade ein wenig gelangweilt? :-)

Aber keine Sorge, bald erscheint hier auf WPC ein Quiz für Fortgeschrittene WordPress User. Am besten du meldest dich gleich für den Newsletter an, damit du es nicht verpasst! ;-) In der Zwischenzeit kannst du ja mal dein Datenschutz-Wissen mit dem DSGVO Quiz testen.
Related Posts

Ähnliche Beiträge