Custom Post Types im Breakdance Builder

Was kannst du tun, wenn Beiträge und Seiten als Beitragstypen für deine WordPress Website nicht ausreichen? Vielleicht brauchst du noch Termine, Pressemitteilungen oder ähnliches? Abhilfe dafür können sogenannte Custom Post Types (CPT) schaffen. Damit kannst du beliebig viele Beitragstypen anlegen, welche du nachher auf deiner Breakdance Seite verwenden kannst.

Um Custom Post Types (CPT) zu erstellen, gibt es mehrere Wege. Du könntest den CPT über ein PHP Script in deine functions.php schreiben oder ein Plugin nutzen, welches diese Funktion bietet. Gute Plugins dafür wären z.B. Custom Post Type UI oder Advanced Custom Fields (ACF). Beide bieten eine übersichtliche Oberfläche um eigene Beitragstypen zu erstellen.

In diesem Beispiel nutzen wir das ACF-Plugin, da wir dieses auch für das Erstellen von benutzerdefinierten Feldern benutzen. Wir werden gemeinsam ein CPT erstellen und ein Template dafür einrichten. Als Beispiel legen wir den Beitragstyp Auto an.

Custom Post Types Einstellungen

1. Custom Post Types (CPT) erstellen

Gehe zum „Advanced Custom Fields (ACF) Plugin“ > „Inhaltstypen“ und klicke auf „Neu hinzufügen“.

2. Custom Post Type einrichten

Fülle folgende Felder aus:

• Plural Label: Der Pluralname (Mehrzahl) des benutzerdefinierten Beitragstyps („Autos“).
• Singular Label: Der Singularname (Einzahl) des benutzerdefinierten Beitragstyps (z.B. „Auto“).
• Post Type Key: Der eindeutige Key des benutzerdefinierten Beitragstyps (z.B. „auto“).
• Public: Wähle „Ja“, wenn der Beitragstyp öffentlich sein soll.
• Hierarchical: Wähle „Ja“, wenn der Beitragstyp hierarchisch sein soll (wie Beiträge und Seiten).

3. Erweiterte Einstellungen

Unter „Supports“ du kannst die unterstützten Funktionen für diesen Beitragstyp (z.B. Titel, Autor, Auszug, usw.) auswählen. Die anderen Einstellungen kannst du so lassen, wie die sind, das funktioniert einwandfrei. Natürlich kannst du die Einstellungen durchgehen und nach deinen Wünschen ändern. Zum Beispiel kannst du unter „URLs“ auch das Archiv aktivieren, wenn du ein Archiv für deinen benutzerdefinierten Beitragstyp verwenden möchtest usw.

Wenn du alle Einstellungen vorgenommen hast, klickst du auf „Änderungen speichern“.

4. Custom Post Type Ansicht

Das war’s! Du hast jetzt deinen neuen benutzerdefinierten Beitragstyp namens „Autos“ erstellt. Du findest den neuen Menüeintrag im WordPress Seitenmenü.

5. Benutzerdefinierte Felder (ACF) erstellen

Wir erstellen nun einige benutzerdefinierte Felder für den Auto Beitragstyp. Dazu gehen wir zu „Feldgruppen“ unter „ACF“ und klicke auf „Neu hinzufügen“.

Die Feldgruppe nennen wir „Auto Info“. Unten kannst du die Beispiel-Felder sehen, die ich für den benutzerdefinierten Beitragstyp „Autos“ hinzugefügt habe. Diese dienen nur als Beispiel. Hier ist es sehr wichtig, den richtigen „Inhaltstyp“ auszuwählen bei welchem die Felder angezeigt werden sollen, in unserem Fall wählen wir „Auto“.

6. Demo-Daten erstellen

Jetzt, da wir mit den Einstellungen für den benutzerdefinierten Beitragstyp „Autos“ fertig sind, können wir einige Demo-Autos erstellen. Gehe zu „Autos“ > „Neues Auto hinzufügen“ und fülle die Felder nach Belieben aus.

7. Demo-Daten Ansicht

Unsere Daten werden jetzt im neuen CPT angezeigt. Wir haben 3 Demo-Autos hinzugefügt, damit wir das Template für unseren neuen Beitragstypen aufbauen können.

Custom Post Type Design

8. Demo – Card Design erstellen

Jetzt, da alles vorbereitet ist, können wir unser Design erstellen. Hier verwenden wir ein Post Loop Builder Element, das im Breakdance Builder verfügbar ist. Mit diesem Element werden wir alle unsere Autos auf einer Seite namens Autos anzeigen, die wir im Menü unserer Website verlinken werden.

Zuerst erstellen wir einen globalen Block, den wir für das Post Loop Builder Element benötigen werden. Gehe zu „Breakdance“ > „Global Blocks“ und klicke auf „Add Global Block“. Ich habe ihn „Autos – Card“ genannt. Klicke dann auf „Edit in Breakdance“, um den Breakdance Builder Editor zu öffnen.

9. Demo – Card einstellen

Hier kannst du den Aufbau meines Designs und die verwendeten Elemente sehen. In der linken Spalte habe ich das Beitragsbild (Features Image) verwendet, in der rechten Spalte den Titel und alle unsere benutzerdefinierten Felder, die wir für den Auto Beitragstyp erstellt haben.

Ich habe alle Daten dynamisch eingefügt, sodass alles, was wir in unseren benutzerdefinierten Feldern hinzufügen, automatisch in jedem Autobeitrag erscheint. Wie du mit Advanced Custom Fields arbeitest, kannst du in unserem Tutorial nachlesen. Dieses Design wird auf alle Autobeiträge angewendet.

10. Demo Seite erstellen

Nachdem du eine Seite namens „Autos“ erstellt hast, gehe zur Bearbeitung der Seite in den Breakdance Builder und füge das „Post Loop Builder“ Element hinzu. Klicke einfach auf „Add“ auf der linken Seite, tippe „post loop“ in das Suchfeld ein und wähle dann das „Post Loop Builder“-Element aus.

11. Global Block auswählen

Im „Repeated Block“ wähle den zuvor erstellten globalen Block „Autos – Card“ aus. Bei „Query“ wähle „Custom“ aus. Hier sehr wichtig ist, dass du bei „Post Type“ > „Autos“ auswählst. Ich habe bei „Posts per page“ 3 eingestellt, hier kannst du deinen Gewünschten Wert eintragen.

12. Demo Seite Vorschau

Das war es schon. In der Vorschau kannst du sehen, wie unsere Autos auf der Seite Autos mit allen Daten, die wir erstellt haben, aussieht.

Fazit

In diesem Tutorial haben wir einen benutzerdefinierten Beitragstyp „Autos“ mit dem Advanced Custom Fields (ACF) Plugin erstellt. Nach der Konfiguration der erforderlichen Felder haben wir ein ansprechendes Layout mit dem Breakdance Builder erstellt, um Autos auf einer dedizierten Seite anzuzeigen. Die Verwendung des Post Loop Builder Elements im Breakdance Builder ermöglicht es, automatisch alle Autos auf der Seite „Autos“ darzustellen.

Die Erstellung eines Custom Post Type mit dem Breakdance Builder war ein intuitiver Prozess, der es uns ermöglichte, schnell und einfach an unser Ziel zu kommen. Mit der benutzerfreundlichen Drag-and-Drop-Schnittstelle konnten wir problemlos verschiedene Elemente hinzufügen, bearbeiten und anpassen, um das gewünschte Layout und die Funktionalität zu erreichen. Die Möglichkeit, globale Blöcke zu erstellen und zu verwenden, erleichterte die Konsistenz des Designs und sparte Zeit, da wir Elemente nicht wiederholt neu erstellen mussten. Insgesamt hat uns der Breakdance Builder ein effizientes Werkzeug zur Verfügung gestellt, um unsere benutzerdefinierten Post-Typen einfach und professionell zu gestalten.