JetEngine für Elementor: Custom Post Types, Taxonomien und Beziehungen

Eine Kurskarte zeigt Titel, Bild, Thema und Dauer. Auf einem Dozentenprofil erscheinen nur die Kurse dieses Dozenten. Änderst du einen Kursdatensatz, beziehen seine dynamischen Karten die aktualisierten Angaben überall dort, wo sie angezeigt werden. Dieses Ergebnis bauen wir mit JetEngine für Elementor auf.

Das Beispiel basiert auf der offiziellen Dokumentation und ergibt ein Kursverzeichnis. Anmeldung, Quizfunktionen und Checkout würden eine eigene Umsetzung benötigen. Courses und Instructors speichern eigenständige Datensätze, Design und Development gliedern den Katalog, und eine gespeicherte Beziehung verbindet jeden Kurs mit seinem Dozenten. Das gleiche Prinzip lässt sich auf Immobilien und Makler, Projekte und Kunden oder Veranstaltungen und Vortragende übertragen.

JetEngine liefert die Datenstruktur und dynamischen Widgets. Elementor übernimmt das Layout. Aufmerksamkeit braucht vor allem das Zusammenspiel: Auch eine sauber gestaltete Karte zeigt die falschen Kurse, wenn ihre Abfrage vom falschen Objekt ausgeht.

Wir verfolgen ein Datenmodell von der Registrierung bis zur Ausgabe auf der Website. Anschließend kehren wir die Beziehung um und prüfen, warum eine Auflistung leer bleibt oder falsche Einträge enthält.

Was gehört in einen Post Type, ein Feld, eine Taxonomie oder eine Beziehung?

Schreibe vor dem Öffnen des Builders auf, welche Angaben du speichern möchtest. Ein Kurs hat in diesem Beispiel einen Titel, eine Beschreibung, ein Beitragsbild, eine Dauer und ein Thema. Ein Dozent hat einen Namen, eine Biografie und ein Porträt. Das Profil besteht unabhängig von einem einzelnen Kurs und kann mehreren Kursen zugeordnet werden.

Mit dieser Tabelle bekommt jede Information den passenden Platz:

WordPress unterscheidet zwischen einer Taxonomie und ihren Begriffen: Topic ist die Taxonomie, Design und Development sind ihre Begriffe. Die WordPress-Dokumentation zu Taxonomien erläutert dieses Klassifizierungsmodell.

Der Dozentenname könnte auch in einem Textfeld stehen. Dann würde aber jeder Kurs eine eigene Kopie speichern. Ein wiederverwendbares Profil bietet eine zentrale Stelle für Biografie und Porträt. Die Beziehung legt fest, zu welchen Kursen dieses Profil gehört. Ein Kursthema braucht dagegen keinen eigenen Inhaltsdatensatz, nur um Kurse zu kennzeichnen.

Für diese Anleitung gilt: Jeder Kurs hat einen Dozenten, und jeder Dozent kann mehrere Kurse unterrichten. Dafür eignet sich eine Eins-zu-viele-Beziehung. Können mehrere Dozenten gemeinsam einen Kurs unterrichten, wähle Viele-zu-viele. Lege diese Regel fest, bevor du Datensätze miteinander verbindest.

Was du für dynamische Inhalte in Elementor benötigst

Installiere und aktiviere JetEngine sowie Elementor. Die Elementor-Listing-Anleitung von Crocoblock verwendet Elementor Free und JetEngine für die wiederverwendbare Karte und das Listing Grid.

Eigene Templates für Einzelansichten und Archive benötigen eine zusätzliche Lösung. Verwende den Theme Builder von Elementor Pro oder ein kompatibles Template-System wie das separate Plugin JetThemeCore. Crocoblock dokumentiert Single-Templates mit JetThemeCore für Elementor Free und JetEngine. Unsere Bewertung von Elementor Pro erläutert die weiteren Möglichkeiten des Builders.

Diese Aufgaben bleiben getrennt: Ein Listing gestaltet eine wiederholte Karte. Ein Single-Template gestaltet die Detailseite, auf der solche Karten erscheinen können. Die Registrierung von Courses erzeugt keines dieser Layouts automatisch.

Richte einen bestehenden Katalog zunächst auf einer Staging-Website ein. Notiere die technischen Bezeichner, denn Felder, Listings und Abfragen greifen später darauf zu. Sind die vorgeschlagenen Bezeichner in deiner Installation bereits vergeben, verwende andere.

Benutzerdefinierte Beitragstypen mit JetEngine und Kursfelder anlegen

Öffne JetEngine → Post Types → Add New. Lege Courses an und wiederhole den Vorgang für Instructors. Die CPT-Anleitung von Crocoblock beschreibt diese Registrierung.

Für unser Beispiel verwenden wir folgende Bezeichner:

Diese Schlüssel unterscheiden sich von den lesbaren Beschriftungen im Backend. WordPress begrenzt Post-Type-Bezeichner auf 20 Zeichen. Ein projektspezifisches Präfix hilft, Überschneidungen mit anderen Registrierungen zu vermeiden. Siehe die WordPress-Hinweise zur Registrierung.

Aktiviere in den erweiterten Einstellungen jedes CPT unter Supports die Unterstützung für Titel, Editor und Beitragsbild. Für dieses öffentliche Verzeichnis aktivierst du Is Public, Publicly Queryable und Show Admin UI, damit die Datensätze öffentliche Detailseiten und ein Bearbeitungsmenü erhalten. Aktiviere Has Archive für Courses, wenn du ein reguläres Kursarchiv möchtest. Die CPT-Einstellungsreferenz erklärt die unterschiedlichen Aufgaben dieser Optionen.

Beitragsbilder benötigen außerdem die entsprechende Unterstützung durch das Theme. Diese Voraussetzung beschreibt WordPress bei den unterstützten Beitragsfunktionen.

Möchtest du einen einzelnen Kurs oder ein Dozentenprofil direkt in Elementor bearbeiten, aktiviere den jeweiligen Post Type unter Elementor → Settings. Das steuert die Option „Edit with Elementor“. Es ist eine andere Einstellung als die Erstellung eines Listings oder die Zuweisung eines Single-Templates. Siehe Crocoblocks Einrichtung des CPT-Editors.

Kursattribute mit stabilen Feldnamen versehen

Ergänze im Metafeldbereich von Courses ein Feld Duration mit dem Typ Number. Verwende beispielsweise wpperk_duration_minutes als Bezeichner. Erkläre in der Feldbeschreibung, dass Redakteure Minuten ohne Einheit eingeben. Speichere 90; „min“ ergänzen wir im Ausgabetemplate.

Soll der Lehrplan getrennt von der Hauptbeschreibung erscheinen, füge ein optionales WYSIWYG-Feld namens wpperk_syllabus hinzu. Andernfalls reicht der normale Editor für die Kursbeschreibung, und du kannst auf das zusätzliche Feld verzichten.

JetEngine unterscheidet die sichtbare Feldbeschriftung vom gespeicherten Name/ID-Wert. Prüfe den Bezeichner vor dem Speichern, auch wenn er automatisch erzeugt wurde. Die Feldtypenreferenz dokumentiert Number, WYSIWYG und die weiteren Einstellungen.

Verwende in diesem Beispiel für alle Kurse Minuten. Eine Dauer in einer anderen Einheit würde dieselbe Kartenbeschriftung irreführend machen und Vergleiche erschweren. Schreibe „Dauer in Minuten“ in die Bearbeitungshinweise, damit auch andere Redakteure die Konvention ohne Rückfragen verstehen.

Topic-Taxonomie zuweisen und Datensätze ausfüllen

Öffne JetEngine → Taxonomies → Add New. Nenne die Taxonomie Topic, verwende einen eindeutigen Schlüssel wie wpperk_topic und ordne sie Courses zu. Speichere sie und lege anschließend über das Taxonomiemenü unter Courses die Begriffe Design und Development an.

Weise jedem Kurs einen passenden Begriff zu und speichere den Kurs. Eine registrierte Taxonomie stellt die Klassifizierung bereit; sie ordnet vorhandene Beiträge noch nicht ein. Die Taxonomie-Anleitung zeigt beide Schritte.

Für diese zwei Themen reicht eine flache Taxonomie. Benötigst du später Design → Interface Design und Design → Graphic Design, kann eine hierarchische Taxonomie diese Struktur abbilden. Diese Begriffshierarchie bleibt getrennt von der Beziehung zwischen Dozent und Kurs.

Lege nun drei Dozenten und drei Kurse an. Die folgenden Namen und Werte dienen als Beispieldaten zur Kontrolle der Einrichtung:

Erstelle Maya Chen, Omar Ali und Lena Ortiz unter Instructors. Ergänze Beschreibungen und Beitragsbilder der Kurse, trage die Dauer als Zahl ein und veröffentliche die Beispieldatensätze, die im Verzeichnis sichtbar sein sollen. Lass Lena zunächst ohne Kurse, um später eine leere Ergebnismenge zu prüfen.

Eine Felddefinition ohne gespeicherten Wert liefert keine sinnvolle Daueranzeige. Ein Listing-Template ohne Datensätze hat nichts zu wiederholen. Fülle diesen kleinen Datenbestand, bevor du den Katalog gestaltest.

JetEngine-Beziehungen einrichten und Einträge verbinden

Öffne JetEngine → Relations → Add New. Erstelle die Beziehung Instructor Courses: Parent object ist Instructors, Child object ist Courses, Relation type ist One to many, also Eins-zu-viele.

Aktiviere die Bearbeitungsfunktionen für beide Objekte. So können Redakteure Verknüpfungen sowohl im Dozentenprofil als auch im Kursdatensatz verwalten. Die Relations-Einstellungsreferenz erläutert die verfügbaren Funktionen und Beziehungstypen.

„Elternobjekt“ und „Kindobjekt“ beschreiben hier die Richtung der Verknüpfung. Sie machen einen Kurs nicht zu einem untergeordneten Beitrag des Dozenten in der nativen WordPress-Hierarchie. Berücksichtige diesen Unterschied beim Aufbau der Abfrage.

Öffne Maya Chens Profil, suche den Bereich der verbundenen Kindobjekte, wähle die beiden vorhandenen Design-Kurse aus und speichere. Verbinde Omar Ali mit WordPress Development Basics. Sind die entsprechenden Bearbeitungsfunktionen aktiviert, kannst du die Elternverknüpfung auch vom Kurs aus verwalten. Crocoblock beschreibt das Bearbeiten konkreter verknüpfter Einträge getrennt von der Registrierung der Beziehung.

Öffne anschließend einen Kurs und prüfe, ob der richtige Dozent verbunden ist. Übereinstimmende Namen, Taxonomiebegriffe oder WordPress-Beitragsautoren stellen diese Beziehung nicht her. Entscheidend ist die gespeicherte Verbindung zwischen den beiden Datensätzen.

Die Biografie bleibt beim Dozenten, die Dauer beim Kurs. Erlaubst du später gemeinsames Unterrichten und benötigt jeder Dozent je Kurs eine andere Lehrrolle, gehört diese Rolle auf die Verbindung. JetEngine unterstützt Beziehungsmetadaten und ihre dynamische Ausgabe.

Eine Kurskarte erstellen und mit Listing Grid wiederholen

Erstelle unter JetEngine → Listings/Components ein Listing mit Posts als Quelle, Courses als Post Type und Elementor als Ansicht. Nenne es Course Card. Die Listing-Template-Referenz beschreibt diese Quelleneinstellungen.

Füge ein Dynamic Image mit Post thumbnail als Quelle hinzu. Ergänze ein Dynamic Field mit Post/Term/User/Object Data und dem Objektfeld Title. Dazu kommt ein Dynamic Link mit Permalink als Quelle. Diese JetEngine-Widgets sollen den aktiven Kursdatensatz auslesen und keinen Text enthalten, den du aus dem ersten Beispielkurs kopiert hast.

Für die Dauer ergänzt du ein weiteres Dynamic Field: Wähle Meta Data als Quelle und wpperk_duration_minutes als Feld. Aktiviere Customize field output und trage %s min ein. Der Platzhalter steht für den gespeicherten Wert. Entscheide bei optionalen Angaben, ob das Widget ausgeblendet wird oder einen hilfreichen Ersatztext zeigt. Die Dynamic-Field-Referenz beschreibt Formatierung und den Umgang mit leeren Werten.

Zeige Topic mit dem Dynamic-Terms-Widget von JetEngine an und wähle deine Topic-Taxonomie. Themenkennzeichnung und Dauer kommen damit aus unterschiedlichen Quellen, auch wenn sie auf der Karte ähnlich aussehen.

Halte die Karte übersichtlich: Bild, Titel, Thema, Dauer und ein klarer Link zur Detailseite. Die vollständige Beschreibung und der optionale Lehrplan gehören auf die Kurs-Einzelansicht. Verwende eine Überschriftenebene, die zur umgebenden Seite passt, und prüfe lange Titel auf schmalen Bildschirmen.

Speichere das Listing. Füge auf einer normalen Elementor-Seite ein Listing Grid hinzu und wähle Course Card, um den grundlegenden Katalog anzusehen. Prüfe vor der Beziehungsabfrage, ob verschiedene Kurse unterschiedliche Titel, Bilder und Dauerangaben anzeigen. So trennst du Fehler beim Auslesen der Daten von Fehlern bei der Auswahl der Einträge.

Nur die Kurse des aktuellen Dozenten anzeigen

Die Kurskarte steuert das Aussehen. Die Abfrage entscheidet, welche Datensätze erscheinen. Für eine Auswahl allein anhand der Beziehung erstellst du unter JetEngine → Query Builder → Add New eine Relations Query namens Courses for Current Instructor.

Wähle Relations Query als Abfragetyp und Instructor Courses als Beziehung. Lass die Kindobjekte eines festen Elternobjekts abrufen und verwende das aktuelle Objekt als Ausgangspunkt. Die genauen Einstellungen sind:

Speichere die Abfrage und erstelle dann das Instructor-Single-Template in deinem Template-System. Öffne mit JetThemeCore Crocoblock → Theme Builder, erstelle ein Seitentemplate und setze die Bedingung auf Include → Singular → Instructors → All. Erstelle ein Elementor-Template für den Inhaltsbereich. Mit Elementor Pro erstellst du ein Single-Post-Template und legst Instructors als Anzeigebedingung fest.

Verwende dynamische Widgets für den Dozentennamen, das Porträt als Beitragsbild und die Biografie aus dem Beitragsinhalt. Füge darunter ein Listing Grid ein. Wähle Course Card, aktiviere im Bereich Custom Query Use Custom Query und wähle Courses for Current Instructor. Speichere das Template und prüfe, ob seine Bedingungen für Dozentendatensätze gelten.

Auf einer tatsächlichen Dozenten-URL beginnt die Abfrage mit der ID dieses Dozenten und ruft die verbundenen Kurs-IDs ab. Die Relations-Query-Referenz dokumentiert die Richtung und die Optionen für das Ausgangsobjekt.

Öffne die öffentlichen Profile von Maya Chen, Omar Ali und Lena Ortiz. Maya sollte zwei Kurskarten anzeigen, Omar eine und Lena keine. Gestalte den leeren Zustand bewusst, damit Besucher verstehen, dass noch keine Kurse aufgeführt sind.

Posts Query für ausdrückliche Beitragsbedingungen verwenden

Eine direkte Relations Query eignet sich für die Auswahl anhand der Beziehung. Für eine ausdrücklich auf veröffentlichte Beiträge beschränkte Liste, eine Sortierung oder zusätzliche Taxonomie- und Metadatenbedingungen erstellst du eine separate Posts Query.

Wähle Courses als Post Type und Published als Beitragsstatus. Verwende unter Post & Page → Post In das Makro Related Items. Wähle Instructor Courses, rufe Child Object ab und beziehe die Ausgangs-ID aus Current Object ID. Speichere die Abfrage und wähle sie als Custom Query des Listing Grid. Die Anleitung für Beziehungen zwischen Beiträgen zeigt diesen Weg.

Öffne für das Makro die erweiterten Einstellungen und setze einen Fallback auf eine Beitrags-ID, die nachweislich nicht in deiner Installation existiert. Ein leeres Einschlussmakro kann sonst dazu führen, dass die Abfrage alle Einträge zurückgibt. Das erklärt die Anleitung zu Query-Builder-Makros. Gehe nicht davon aus, dass eine Beispielnummer auf deiner Website unbenutzt ist.

Prüfe Lenas Profil erneut. Verbinde anschließend einen Kursentwurf und bestätige, dass die Abfrage für veröffentlichte Beiträge ihn ausschließt. Diese Abnahmekontrollen musst du auf deiner Installation durchführen. Eine Vorschau im Editor bestätigt noch nicht das endgültige Verhalten der öffentlichen Seite.

Auf der Kursseite die Richtung umkehren

Erstelle aus Instructors ein Listing namens Instructor Card. Verwende im Course-Single-Template eine zweite Relations Query: Items to Get → Get Parent Items for Fixed Child, Initial Object From → Current Object ID. Sie ruft Elternobjekte für ein festes Kindobjekt ab. Der Kurs ist jetzt das Ausgangsobjekt.

In unserem Eins-zu-viele-Modell hat ein Kurs einen verbundenen Dozenten. Ein Viele-zu-viele-Modell kann mehrere zurückgeben. Eine andere Ausgaberichtung ändert diese grundlegende Regel nicht.

Den aktuellen Objektkontext bewusst wählen

Innerhalb eines Instructor-Listings kann das aktuelle Objekt der Dozent der gerade ausgegebenen Karte sein. Innerhalb eines verschachtelten Course-Listings kann stattdessen der Kurs zum aktuellen Objekt werden. Verwende Default WordPress Object (for current page), wenn du unabhängig vom aktiven Listing-Eintrag bewusst das Objekt der äußeren Einzelansicht benötigst.

Dieses globale Objekt muss weiterhin ein Dozent sein, wenn du dessen Kurse abrufen möchtest. Auf einer gewöhnlichen Landingpage ist es die Landingpage, kein automatisch ausgewählter Dozent. Die Anleitung zum Beziehungskontext erklärt den Unterschied. Trage Mayas ID nicht fest in ein Template ein, das für alle Dozenten gelten soll.

Vor einer Designänderung die Daten prüfen

Wenn das Listing falsch aussieht, verfolge zuerst die gespeicherten Datensätze und die Auswahlabfrage:

Verwende Post Parent ID nicht als Ersatz für die JetEngine-Beziehung. Diese Einstellung betrifft die native WordPress-Beitragshierarchie. Beim Makroweg gehören die verknüpften Beitrags-IDs in Post In. Siehe die Posts-Query-Einstellungen.

Trenne einen Kurs von Maya und bestätige, dass er aus ihrem Grid verschwindet, aber als Kursdatensatz bestehen bleibt. Ändere seine Dauer und prüfe den neuen Wert überall, wo seine Karte erscheint. Kontrolliere außerdem die umgekehrte Abfrage auf der Kursseite, das mobile Layout und die Detailseitenlinks.

Ergänze nach diesen Kontrollen Besucherfilter, wenn der Katalog sie benötigt. Crocoblocks Filterung für Listing Grid verwendet das separate Plugin JetSmartFilters. Für Einreichungen im Frontend kann JetFormBuilder Formularfelder Beiträgen zuordnen und mit JetEngine die Aktion Connect Relation Items ausführen. Dafür ist eine eigene Formulareinrichtung nötig; eine Backend-Beziehung erzeugt diesen redaktionellen Ablauf nicht automatisch.

Beginne mit den drei Beispielkursen und bestätige Datenmodell, Verbindungen und beide Abfragerichtungen. Erweitere den Katalog anschließend über dieselben Bearbeitungsfelder. Der nächste Kurs benötigt einen neuen Datensatz, sein Thema und eine Dozentenverknüpfung. Das wiederverwendbare Elementor-Layout ist dann bereits für die Anzeige vorbereitet.