Individuelle Inhaltstypen in WordPress mit Impreza & CPT UI

In diesem Video zeige ich dir, wie du schnell und einfach in WordPress mit Impreza und dem Plugin CPT-UI individuelle Inhaltstypen für deine Website erstellen kannst. So, hier sind wir jetzt auf einer Demoseite mit Impreza und das erste, was wir tun müssen, um einen individuellen Inhaltstypen anzulegen, ist es, das Plugin CPT-UI zu installieren. Das kann man standardmäßig über die Erweiterung von Impreza hier über diese Oberfläche machen. Da ist das standardmäßig schon hinterlegt. Oder du installierst das einfach über den Plugin Store. Genau, das habe ich jetzt schon installiert. Dementsprechend wird das hier links im Menü angezeigt und dort klicken wir auf Inhaltstypen hinzufügen und können dann hier einen neuen Inhaltstypen anlegen. Für das Beispiel nehmen wir jetzt einfach mal Stellenangebote. Wir wollen jetzt den Inhaltstypen Stellenangebote erstellen, weil wir Stellenanzeigen auf unserer Webseite veröffentlichen wollen. So nenne ich den jetzt auch einfach mal Stellenangebot bzw. Stellenangebote. Und hier haben wir jetzt die Möglichkeit bzw. müssen wir einmal die Beschriftung des Stellenangebots hinterlegen im Plural und in der Einzahl und das ist dafür da, wie das halt auf der Webseite zum Beispiel im Hauptmenü dargestellt wird. In dem Fall ist es hier dann auch wieder Stellenangebote und die Einzahl ist dementsprechend Stellenangebot. Wenn wir weiter runtergehen, haben wir die Möglichkeit noch viele weitere zusätzliche Beschriftungen zu hinterlegen. Meistens passt es, wenn man diese beiden Beschriftungen richtig hinterlegt hat. Aber wie du siehst, kann man hier diese ganzen weiteren Einträge bzw. Positionen, wo der Name des Inhaltstyps erscheint, auch noch individuell anpassen. In dem Fall lassen wir das jetzt so. Der nächste wichtige Punkt wäre in dem Fall jetzt eigentlich das Icon anzupassen. Wir haben hier noch viele weitere Einstellungen, wie zum Beispiel ob es öffentlich sein soll oder nicht, ob es hinter der Benutzeroberfläche angezeigt werden soll im Navigationsmenü. Das lassen wir jetzt alles erstmal so auf Standard. Das passt soweit für dieses Beispiel. Wie gesagt, hier der nächste wichtige Punkt für dieses Beispiel ist jetzt genau hier das Menü Icon, gerade wenn man vielleicht mehrere individuelle Inhaltstypen anlegen möchte, macht es da ja auch Sinn ein passendes Icon zu unterlegen. Das kann man ziemlich easy hier über Choose Dash Icon machen. Da werden dann die Standard WordPress Icons angezeigt, wo man sich eins aussuchen kann. Das Schöne ist, diese sind dann passend zu den anderen Icons, die schon im Menü vorhanden sind. Für dieses Beispiel nehmen wir jetzt einfach mal hier zum Beispiel das Megafon. Das passt denke ich ganz gut. Man hätte auch die Möglichkeit, ein eigenes Icon hochzuladen, aber ich bin immer ein Freund davon, die Standard-Icons zu verwenden, weil wie gesagt, die passen sich ganz gut zu dem Rest des Menüs an. Der nächste wichtige Punkt ist es anzugeben, welche standardmäßigen Felder bzw. Funktionen, die von WordPress schon vorhanden sind, hinterlegt werden sollen bzw. für den Inhaltstyp vorhanden sein soll. Einen Titel brauchen wir natürlich in jedem Fall. Dann einen Editor auch, um dementsprechend Inhalt zu hinterlegen. Ein Beitragsbild brauchen wir jetzt nicht unbedingt für das Stellenangebot. Textauszug auch nicht, das auch nicht, das auch nicht. Was ich immer gut finde, sind die Revisionen, dass man vorherige Versionen wiederherstellen kann und die weiteren brauchen wir eigentlich auch nicht. Im nächsten Video gehe ich noch darauf ein, wie man weitere individuelle Felder anlegen kann. Beim Stellenangebot ist es ja zum Beispiel auch Punkte anzugeben, die man ja als dynamisches Feld am besten nutzen kann, damit man die auch für weitere Stellenangebote dann wieder verwenden kann. Das zeige ich im nächsten Video, wie man diese hinterlegen kann. Dann haben wir hier noch die Möglichkeit, Taxonomien zu aktivieren. Hier werden gerade die Standard-Taxonomien von WordPress eingegeben, die kann man nutzen. Würde ich aber nicht empfehlen, weil das dann irgendwie mit anderen Inhaltstypen in die Quere kommen könnte. Stellenangebote, gerade wenn man mehrere verschiedene anlegen möchte, wie zum Beispiel Teilzeit, Vollzeit, Minijob, dann macht es Sinn eigentlich dafür eine eigene Taxonomie anzulegen, was wir jetzt im nächsten Schritt machen werden. So, dann gehen wir hier auf Inhaltstyp hinzufügen und wie du siehst, wird dann dieser hier auch automatisch im Menü angezeigt. Wir können die Position im Menü auch noch anpassen. Ich glaube, das kann man tatsächlich auch hier in den Einstellungen anpassen. Ich glaube, hier unten gibt es irgendwo einen Punkt, wo ich sagen kann… wo der angezeigt werden soll. Genau hier unter Einstellungen gibt es hier unten glaube ich den Punkt Menü Position. Darüber mache ich das tatsächlich nicht, weil ich das Menü immer über ein anderes Plugin aufräumen oder für mich organisieren. Dazu nutze ich das Plugin Menu Editor. Dazu habe ich auch schon mal ein anderes Video gemacht, um zu zeigen, wie man da gut mitarbeiten kann. Und hier wird mir jetzt auch angezeigt, dass ein neuer Inhaltstyp vorhanden ist. Diesen schiebe ich dann einfach nach oben und möchte den hier bei meinen anderen Inhaltstypen haben. Ich setze den jetzt mal unter Beiträge hier auf Speichern. Und dann wird er mir hier oben als Inhaltstyp angezeigt. So, wenn wir jetzt in das Stellenangebot einmal reingehen, sehen wir, dass wir hier jetzt ganz normal einen Titel angeben können und können auch hier Inhalt einfügen. Was jetzt noch fehlt, ist die Taxonomie, die ich eben angesprochen habe, dass wir dementsprechend den zweiten Schritt, den es zu erledigen gibt. Dazu gehen wir dann hier im Plugin auf den Punkt Taxonomie hinzufügen und erstellen dann hier diese Taxonomie, die wir brauchen. In dem Fall würde ich jetzt sagen, dass wir das nach Beschäftigungsart machen, dass wir die Möglichkeit haben anzugeben, ob es sich um einen Teilzeitjob, Vollzeitjob, Minijob oder was auch immer handelt. Und das nennen wir jetzt mal, ja, Beschäftigungsart. Schönes deutsches Wort. Beschäftigungsart. Und nennen das hier dementsprechend auch so. Hier dann natürlich groß geschrieben und hier können wir auch Umload verwenden. Beschäftigungsart und hier haben wir die Einzahl. So, hier haben wir natürlich auch die Möglichkeit, weitere Beschriftung anzugeben. Aber in dem Fall sollte es mit den beiden Angaben auch soweit funktionieren. Und dann ganz wichtig können wir hier unter diesem Punkt diese Taxonomie einem Inhaltstypen zuweisen. In dem Fall ist es ja Stellenangebote, der, den wir gerade erstellt haben. Ich gehe auf Taxonomie hinzufügen und dann wird mir dieser hier bei dem Inhaltstyp angezeigt. So haben wir jetzt hier den Punkt Beschäftigungsarten und können dann dementsprechend die verschiedenen Beschäftigungsarten hinterlegen, die wir dann als Kategorisierung für unsere Stellenangebote verwenden können. Ich lege jetzt einfach mal zwei an, zum Beispiel Vollzeit und Teilzeit. Ja, also, nee, das ist ja die Titelform. Genau, jetzt haben wir hier Vollzeit und dann machen wir das auch noch einmal mit. Teilzeit und so haben wir jetzt zwei verschiedene Kategorien, die wir nutzen können. Wenn wir jetzt in das Stellenangebot an sich reingehen bzw. wenn wir ein neues erstellen wollen, dann haben wir hier die Möglichkeit über das Plus zum Beispiel dann Teilzeit zu hinterlegen oder auch mehrere, je nachdem wie man dann dieses Stellenangebot kategorisieren möchte. Genau, das ist eigentlich der erste, beziehungsweise das sind die ersten beiden Punkte, die es zu erledigen gibt, um einen Inhaltstypen anzulegen. Das nächste ist es, dass wir natürlich diesen Inhaltstypen auch irgendwie ins Frontend bringen wollen. Ich lege jetzt erst noch mal ein Beispiel Stellenangebot an. Das nennen wir jetzt einfach mal Stellenangebot 01. Hier setze ich jetzt einfach mal nur einen WebSum Text rein. Wir machen den nur für Teilzeit und veröffentlichen das einmal. So, jetzt haben wir hier unser Beispiel Stellenangebot und wie gesagt, jetzt wollen wir das ja natürlich auch irgendwie ins Frontend bekommen. Wenn ich mir den jetzt einmal anschaue, dann sehen wir, dass halt hier irgendwie nur der Inhalt dargestellt wird, aber das müssen wir auch noch irgendwie definieren, wo welche Inhalte dargestellt werden, sondern wie der… wo zum Beispiel der Titel angezeigt werden soll, wo der Inhalt angezeigt werden soll. Und dafür können wir in Empresa wunderbar ein eigenes Template dafür anlegen, beziehungsweise eine Seitenvorlage. Und das findest du unter Templates Seitenvorlagen. Und hier kannst du dann eine Seitenvorlage hinzufügen, die nennen wir jetzt Template. Stellenangebote. und können dann hier über dem Backend Editor unser Template so gestalten, wie wir das wollen. Da sollte man dann natürlich mit dynamischen Elementen arbeiten, wie zum Beispiel Titel- und Beitragstitel. In dem Page Builder hier geht das so, indem wir dann hier über Beitragselemente erst einmal den Beitragstitel hinzufügen. Da können wir dann noch angeben, ob es zum Beispiel eine H1, H2, H3 oder was auch immer sein soll. In dem Fall machen wir daraus jetzt eine H1. und darunter setzen wir jetzt vielleicht nochmal so eine Trennlinie. Und darunter dann den Beitragsinhalt. Das findet man auch unter Beitragselemente. Hier habe ich dann den Punkt Beitragsinhalt und darüber kann ich sagen, dass der volle Inhalt, den ich in dem Editor von dem einzelnen Stellenangebot hinterlegt werden soll, in dem Template geladen wird. Dazu klicke ich dann hier auf voller Inhalt. und platziere den dann hier dementsprechend und klicke auf Aktualisieren. So, dann müssen wir jetzt dieses Template, was wir eben erstellt haben, noch dem Inhaltstypen zuweisen. Das geht in Empresa so, indem wir auf Seam Optionen klicken und dann auf Seiten-Layout gehen. Und hier finden wir dann den neuen Inhaltstypen Stellenangebote und können dann hier unter Seitenvorlage sagen, dass das Template Stellenangebote dafür verwendet werden soll. Man kann zum Beispiel auch anderen Kopfbereich verwenden oder auch einen anderen Fußbereich, wenn sich das vom Rest der Seite unterscheiden soll. Wenn wir uns jetzt das Stellenangebot ansehen, werden wir sehen, dass sich zusätzlich zu dem Inhalt, den wir gerade schon gesehen haben, auch der Titel hier wiederfindet und die Trennlinie, die wir gerade angelegt haben. Und so kann man sich das Template dann eigentlich mit allen Elementen, die man für das Stellenangebot haben möchte, dann zusammenbauen. Man könnte dann zum Beispiel noch ganz unten die Kontaktdaten hinterlegen, die unterscheiden sich ja meistens auch nicht. So könnte man dann sagen, ok unter jedem. Stellenangebot sollen immer diese Kontaktdaten erscheinen. Das können wir vielleicht einfach mal kurz machen. wieder in das Template reingehen. Hier unten noch jetzt vielleicht kann man hier ja, ich leg jetzt hier an Wand mal noch eine weitere Trennlinie an und dann sagen wir okay, hier sollen jetzt die Kontaktdaten angezeigt werden. Dafür nehme ich jetzt einfach mal einen einfachen Textblock und sage so Kontaktdaten oder Bewerbungen an. Beispiel at mail.de Was doch? Wenn wir uns das Stellenangebot jetzt nochmal anschauen, dann sehen wir, dass jetzt hier dieser Textblock dann angezeigt wird. Und das Schöne ist, wenn wir jetzt ein weiteres Stellenangebot anlegen, dann wird das halt dementsprechend genauso übernommen. Wir legen jetzt einfach mal ein zweites Stellenangebot an, 0.2. Das ist ein anderes Stellenangebot. Und das machen wir jetzt nur auf Vollzeit. Ach so, das können wir ja auch noch laden. Können wir gleich auch noch kurz machen. So, wenn wir uns das jetzt anschauen, dann haben wir hier das andere Stellenangebot. Aber dieser Text ist der gleiche geblieben. Und so wird er dann für alle Stellenangebote, die man einlegt, übernommen. Jetzt wollen wir noch die Kategorie laden bzw. das Beschäftigungsverhältnis. Das geht auch ziemlich einfach. Dazu gehen wir dann wieder in die Seitenvorlage. und die wollen wir, ja ich würde sagen unter dem Titel anlegen und dafür gibt es das Element. Beitrags-Taxonomie, das finde ich auch hier unter Beitragselemente. Und wenn ich das auswähle, kann ich hier aus allen Taxonomien von der Website auswählen. Und dementsprechend nehme ich jetzt hier Beschäftigungsarten und kann jetzt hier noch ein paar Gestaltungseinstellungen vornehmen, wie zum Beispiel soll es als Text oder als Schaltfläche dargestellt werden. Wir machen jetzt mal hier Darsteller als Text und können dann auch noch hier eine Verlinkung angeben. Das wollen wir jetzt aber nicht machen, sondern könnte man dann zum Beispiel zu weiteren Stellenangeboten von dieser Kategorie verlinken. Das nehmen wir jetzt raus. Linkfarbe brauchen wir dann dementsprechend auch nicht. Genau, wir lassen das jetzt einfach mal so. Schieben den unter den Titel und speichern das Ganze einmal und gucken mal, wie das ausschaut. Und so haben wir jetzt hier Teilzeit und bei dem anderen müsste es jetzt Vollzeit sein. Genau. So können wir dann uns die dynamischen Elemente in dem Template hinterlegen. Und das ist dann auch schon der dritte Punkt, den es zu beachten gibt. Als nächstes wollen wir ja eine Übersichtsseite erstellen, wo die Stellenangebote angezeigt werden und dafür legen wir einfach eine ganz einfache Seite an. Die nenne ich jetzt auch einfach mal. Den nenne ich jetzt mal offene Stellenangebote oder Karriere nennt sich das ja häufig. Und machen hier gleich erst weiter. Um die Stellenangebote auf einer Übersichtsseite vielleicht untereinander oder nebeneinander anzuzeigen, ist es notwendig, ein sogenanntes Raster anzulegen. Und in Impreza können wir unter Templates unter dem Punkt Raster Layouts können wir verschiedene Raster anlegen. Dazu gehen wir auf Raster Layout hinzufügen und können aus einer großen Auswahl an Vorlagen schon Ja, vorgefertigte Designs auswählen. mal gucken, ob hier vielleicht schon eins dabei ist, was wir nutzen können. Wir haben ja eigentlich nur Text. Okay, hier haben wir jetzt den Title Only. Nehmen wir einfach mal das hier, Text Card. Da haben wir jetzt oben die Kategorie, den Beitragstitel und das Datum der Erstellung. Das können wir eigentlich rausschmeißen und die Kategorie müssen wir ja noch ändern. Also hier haben wir auch wieder den Baustein Beitrags-Taxonomie. In dem Fall ändern wir den jetzt wieder auf Beschäftigungsart. Den Link nehmen wir wieder raus und hier haben wir noch den Beitragstitel von dem Stellenangebot. Das lassen wir jetzt auch einfach mal so. Ja genau und hier können wir sagen, dass wenn ich auf diesen Titel klicke, dass man dann dementsprechend zu dem Stellenangebot gelangen soll. Das lassen wir jetzt auch einfach mal so. Das Design lassen wir auch. Also hier über diesen Raster Layout Bilder, so nenne ich ihn jetzt mal. hat man die Möglichkeit auch mit verschiedenen Bausteinen sich seinen Raster für dynamische Elemente zusammenzubauen. Wir haben hier verschiedene Elemente, die man nutzen kann, wie zum Beispiel Beitragsbild, Titel, Datum, Taxonomie. Weiter so wichtige sind noch zum Beispiel horizontaler Umschlag und vertikaler Umschlag. Damit kann man dann halt definieren, ob Elemente nebeneinander oder untereinander innerhalb des Rasters dargestellt werden sollen. Für das einfache Beispiel reicht diese Auflistung jetzt reicht dieser Aufbau jetzt eigentlich so wie er ist. Also wir haben hier auch einen vertikalen Umschlag und hierüber kann ich dann halt die Elemente untereinander anzeigen lassen. Den vertikalen Umschlag an sich kann ich dann auch gestalten. In dem Fall haben wir jetzt glaube ich einen einfachen Rand und ein bisschen Abstand. Und hier kann ich dann zum Beispiel noch sowas wie Randradius angeben und Schatten und so weiter. Wir schauen jetzt einfach mal wie das ausschaut. müssen dieses Raster jetzt aber natürlich erst mal auf unserer Karriere-Seite hinterlegen, damit unsere Stellenangebote dort dargestellt werden. Dazu gehe ich hier wieder an den Page-Bilder. Ich lege erst noch mal eine Überschrift an. Dazu gehe ich wieder hier auf Beitragselemente und sage ok Beitragstitel laden. In dem Fall ist es wieder eine H1. Da haben wir nochmal wieder eine schöne Trennlinie darunter. So und dann nehmen wir das Element. wo ist es hier? Rasterauflistung. So, und da kann ich jetzt erstmal mein eben erstelltes Design auswählen unter dem Punkt Design. Wie haben wir es jetzt genannt gerade? Ich glaube, das war das Rasterlayout 2. Das macht natürlich Sinn, das auch irgendwie nach Karriere oder so was zu benennen. In dem Fall war es jetzt das Rasterlayout. Schauen wir nochmal kurz. Ah ja, das Rasterlayout 2. und wählen das hier aus. Unter allgemeiner Einstellung können wir dann sagen, was angezeigt werden soll. In dem Fall natürlich unsere Stellenangebote. So und jetzt können wir hier zum Beispiel noch sagen, ob nur bestimmte Kategorien angezeigt werden sollen. In dem Fall wollen wir beide anzeigen lassen. Ich kann hier sagen, wie die Reihenfolge sein soll. Da machen wir jetzt einfach mal Datum der Erstellung. und können hier sagen, wie viele angezeigt werden sollen. Wir haben jetzt nur zwei Stück, dann lassen wir das mal auf 10, weil man mehrere hat. Dann macht es vielleicht Sinn, auf 99, 99, wie auch immer zu stellen. Und ja, können hier dann noch sagen, was angezeigt werden soll, wenn keine Stellenangebote vorhanden sind. Da kann man jetzt zum Beispiel eine individuelle Nachricht hinterlegen. Man kann eine Seitennummerierung anlegen, wenn man zum Beispiel sagt, okay, es sollen irgendwie nur die ersten drei angezeigt werden. auf eine Schaltfläche klicken, damit weitere angezeigt werden, aber das brauchen wir für das Beispiel jetzt nicht. Wir waren gerade schon im Punkt Design. Hier können wir jetzt noch sagen, wie das Raster dargestellt werden soll. In dem Fall machen wir ein reguläres Raster. Man kann zum Beispiel, wenn man Inhaltstypen mit Beitragsbildern zum Beispiel, das macht zum Beispiel bei einem Portfolio vielleicht Sinn, dann hat man die Möglichkeit, dass als Mauerwerk, so nennt es sich jetzt hier, oder als Metro Also das ist dann halt eine verschiedene Anordnung der Inhaltstypen. Ist jetzt aber gerade nicht so wichtig, wir nehmen das reguläre Raster und wollen, dass es in einer Spalte untereinander angezeigt wird. Dementsprechend kann ich hier noch auswählen, in wieviel Spalten die Inhaltstypen angezeigt werden sollen. Wir machen das jetzt in einer Spalte, sodass wir ein Stellenangebot haben, darunter dann noch ein Stellenangebot, darunter noch eins. Das sieht nicht nebeneinander angezeigt. Das Ganze können wir auch unter dem Punkt responsive definieren. Hier kann ich verschiedene Screengrößen anlegen und wir wollen jetzt aber eigentlich überall, dass es in einer Spalte angezeigt wird und speichern das Ganze jetzt mal. So, dann gehen wir auf Aktualisieren und dann schauen wir mal, wie unsere Karriere-Seite jetzt ausschaut. Und so haben wir jetzt hier ein ganz einfaches Raster mit unseren Stellangeboten. Die Abstände sind noch ziemlich groß. Die können wir jetzt vielleicht noch mal ein bisschen kleiner machen. Dazu gehen wir dann wieder hier in Raster-Layout. Wählen unser Raster-Layout 2 aus, das nenne ich jetzt auch mal um. Vielleicht in Raster-Stellenangebote. Ich habe das eben schon gezeigt. Wir können dann hier in die Einstellung von den vertikalen Umschlag gehen und haben dann hier unter dem Punkt Gestaltung die Möglichkeit, einen Abstand zu definieren. In dem Fall haben wir jetzt 10% an allen Seiten hinterlegt. Das scheint mir ein bisschen viel. Machen wir jetzt einfach mal 3% an allen Seiten und schauen mal, wie das aussieht. Das sieht schon deutlich besser aus, das sieht schon mehr nach einer Auflistung von Stellenangeboten aus. Und wenn ich jetzt hier auf den Titel klicke, komme ich dann dementsprechend zu dem Stellenangebot. Und ja, das war es eigentlich auch schon so weit. Das sind so die vier Schritte, die du machen musst oder machen kannst. So mache ich es zumindest immer, um individuelle Inhaltstypen mit Impreza zu erstellen und diese dann dementsprechend… im Frontend anzeigen zu können. Im nächsten Video zeige ich dir, wie wir noch weitere individuelle Felder für das Stellenangebot anlegen können und diese dann auch im Bearbeitungsmodus verwenden können.