Internetkurse Köln

Wer schon mal versucht hat, mit einem WordPress FSE Theme zu arbeiten, ist sicherlich über die Template Teile gestolpert. WordPress FSE Theme, das meint ein Block Theme wie Twenty Twenty-Two. Diese neue Art von Theme ist für das sogenannte Full Site Editing gedacht. Das bedeutet, dass Sie sich nicht länger mit PHP herumschlagen müssen, wenn Sie mal an einem Template des Block Themes etwas ändern wollen. Dafür bekommen Sie es aber mit Templates und Template Teilen zu tun, die aus Blöcken bestehen.

In diesem Beitrag geht es konkret um die drei Headers, die Twenty Twenty-Two bietet: Header, Header (Dark, small) und Header (Dark, large). Alle drei sind WordPress FSE Template Teile. Das heißt, sie sind dafür gedacht, Teil einer Vorlage wie die für Seiten oder Beiträge zu sein. Einer dieser drei Header ist aber auch der wesentliche Template Teil der beiden anderen Header. Und das muss man erst einmal verinnerlichen.

Definition: Theme vs. Template vs. Template Teil

Vorab sollten wir uns aber erst einmal auf Begriffe einigen. Allzu oft verwischt hier die Trennschärfe, das ist nicht gut.

Template heißt auf gut Deutsch nichts anderes als Vorlage. Und ja, man kann auf die Idee kommen, statt Theme den Begriff Template zu benutzen. Aber WordPress hat da nicht umsonst für eine eigene Begrifflichkeit gesorgt. Denn so ein Theme besteht aus unterschiedlichen Templates. Und die Templates beinhalten dann bei Bedarf Template Teile.

• Twenty Twenty-Two ist also ein Theme.
• Die Vorlage für alle Seiten oder alle Beiträge, das sind Templates.
• Und ein Template für alle Seiten benutzt Template Teile. Zum Beispiel den Header oder den Footer.

Dieses Konzept gilt schon immer. Es gilt aber eben auch für die sogenannten Block Themes. Der Unterschied ist dabei ganz einfach benannt. Bislang waren diese Templates PHP-Dateien und hießen single.php (für Beiträge) oder page.php (für Seiten). Und sie benutzten Template Teile wie die content.php oder die content-single.php. Das allein zeigt, wie komplex die Arbeit mit Template Teilen schon immer war. header.php und footer.php gab es natürlich auch schon immer.

Nun sind diese Templates und ihre Teile keine PHP-Dateien mehr. Das bedeutet, dass Sie auch kein PHP schreiben müssen, wenn Sie diese Vorlagen verändern wollen. Denn genauso wie Seiten oder Beiträge bestehen diese Templates und ihre Teile nur aus Blöcken. Und bearbeiten können Sie diese Templates und die Teile über den neuen Design > Editor.

WordPress FSE Template Teile: drei Twenty Twenty-Two Header

Twenty Twenty-Two bringt nun also drei Header mit. Den einen, der einfach nur Header heißt. Den anderen, der Header (Dark, small) heißt. Und den dritten, der Header (Dark, large) heißt.

Die beiden dunklen Header, ob groß oder klein, haben in meinen Augen aber eigentlich nur die Funktion zu zeigen, wie das Prinzip funktioniert. Denn wer will schon überall Vögel haben?

Die gute Nachricht: Sie können selbst so viele Header erstellen, wie Sie möchten. Und dabei können Sie auf den kleinen schlichten Header, der wie eine Kopfzeile daherkommt, zurückgreifen. Den Rest basteln Sie dann selbst. Zum Beispiel eine Variante, die eine Krümelspur ausgibt.

Denkbar ist aber auch eine Variante für Blogbeiträge, die das Beitragsbild und daneben den Auszug (Excerpt) ausgibt. Auf gestreiftem Grund (der nur ein kleiner CSS-Spaß ist und nichts direkt mit dem Thema zu tun hat). Und mit der Breadcrumb unterhalb des gestreiften Spalten-Konstruktes.

Der wesentliche Unterschied zwischen den beiden Beispielen mit Katze ist nicht das Beitragsbild oder der gestreifte Hintergrund. Der wesentliche Unterschied ist die Breadcrumb. Denn dass die Breadcrumb einmal direkt unterhalb der Kopfzeile und bei der anderen Variante unterhalb des großen gestreiften Konstruktes erscheint, liegt allein daran, dass es zwei Template Teile für den Header gibt.

WordPress FSE Template Teil: Header mit Breadcrumb erstellen

Zuletzt hatte ich einen alten Beitrag zur Nutzung der Yoast Breadcrumbs überarbeitet und wieder veröffentlicht. Dabei war ich schon mal kurz auf den Einsatz des Blocks im Rahmen eines Block Themes eingegangen.

Heute will ich dieses Beispiel heranziehen, um zu zeigen, wie das mit den Template Teilen funktioniert, die auch Teil eines Template Teils sein können.

Sagen wir, Sie wollen eine Website erstellen, die unterschiedliche Header nutzt. Die Startseite und die Beiträge sollen große Bilder (oder Beitragsbilder) im Header ausgeben. Andere sollen dies nicht. Alle Seiten und Beiträge sollen aber eine Krümelspur zeigen.

Das lässt sich mit den vorhandenen Twenty Twenty-Two Headers nicht realisieren. Zumindest nicht auf eine übliche Art und Weise. Nämlich der, dass die Breadcrumbs zwischen Header und Content erscheinen.

Es braucht also zwei dieser schlichten Kopfzeilen. Eine mit und eine ohne Breadcrumbs Block. Den Header mit Krümelspur benutzen Sie im Rahmen des Templates für alle Seiten. Und den Header ohne Breadcrumbs Block nutzen Sie für die beiden dunklen Header, bei denen Sie den Breadcrumbs Block an passender Stelle einfügen. Alles andere führt nur zu tiefer Verzweiflung.

Natürlich könnten Sie auch für jeden Ihrer Header, die Sie so bauen wollen, diese Kopfzeile immer wieder neu erstellen. Dann als feste Block-Bestandteile Ihres Template Teils. Aber glauben Sie mir: Das wollen Sie nicht…

Vielmehr werden Sie froh und glücklich sein, wenn Sie es geschafft haben, den vorhandenen Header einmal so nachzubauen, dass er so aussieht wie der vorhandene. Mit dem einzigen Unterschied, dass der eine die Yoast Breadcrumbs nutzt und der andere nicht. Denn Full Site Editing hat im Detail noch immer Tücken, die wahrlich kein Quell der Freude sind.

Deshalb folgt nun hier die Anleitung für das Erstellen eben dieser Kopfzeile.

Der Aufbau des Twenty Twenty-Two Template Teils »Header«

Bevor es an das Machen geht, vorab die Grundstruktur des Twenty Twenty-Two Template Teils Header. Der besteht aus verschachtelten Zeilen, die von einer Gruppe umfasst werden.

Die Struktur sieht also so aus:

• Template Part
  • Gruppe
    • eine Zeile
      • Zeile mit Logo und Site Titel
      • Navigation

Dies gilt es nun mit Blöcken nachzubauen. Schließlich soll er im Ergebnis ja so aussehen wie der vorhandene – abgesehen von der Krümelspur. Und dies ohne die Chance, sich das Ganze in einer Code Ansicht anzuschauen und gegebenenfalls zu korrigieren. Denn der Website Editor bietet leider keine Code Ansicht. Großer Fehler!

Natürlich könnte man dieses Konstrukt auch mit einem HTML-Editor nachbauen und dann auf dem Server in das entsprechende Verzeichnis hochladen. Aber wir reden hier ja vom Full Site Editing im Rahmen des Website Editors. Also arbeiten wir hier. Mit allen Tücken, die das zur Zeit bereithält.

1. Gruppe mit Zeile und Navigation erstellen

Im ersten Schritt geht es darum, einen Template Teil hinzuzufügen und ihm dabei einen Namen zu geben (zum Beispiel Header mit oder auch ohne Breadcrumb). Die Option finden Sie in der Liste aller vorhandenen Template Teile über den Button oben rechts.

Dafür, dass das Konstrukt übergeordnet als Template Part ausgezeichnet wird, müssen Sie nichts tun. Dafür sorgt WordPress von sich aus.

In der ziemlich leeren Ansicht fügen Sie über Klick auf den Plus-Button oben links einen Gruppe-Block hinzu.

Ausgehend von dieser Gruppe gilt es, die folgenden Schritte zu befolgen:

1. Sie erstellen in der Gruppe eine Zeile.
2. Nun aktivieren Sie die obere Werkzeugleiste, weil Sie sonst kaum Zugriff auf den wesentlichen Plus-Button haben.
3. In der Zeile erstellen Sie eine Navigation.
4. Sie richten die Elemente der Navigation rechts aus.
5. Sie schalten die obere Werkzeugleiste wieder ab. Sonst können Sie nicht den Zeile-Block auswählen.
6. Nun können Sie den Zeile-Block auswählen.
7. In der Zeile erstellen Sie eine weitere Zeile.
8. Sie verschieben diese neue Zeile nach links, das heißt vor den Navigations-Block.
9. Und weil es so schön ist, aktivieren Sie wieder die obere Werkzeugleiste.

Dass es sich um eine Verschachtelung handelt, erkennen Sie immer daran, dass sich links neben der Toolbar noch ein Icon befindet. Sagen wir, das für die Zeile eine Ebene höher. Allerdings ist aktuell das Icon für Zeilen identisch mit dem für Gruppen…

2. Website-Logo und -Titel einfügen und die Elemente der Zeile ausrichten

Nun haben Sie also eine Gruppe mit einer Zeile erstellt, in der sich die Navigation und eine weitere Zeile befinden. Diese weitere Zeile dient dem Website-Logo und dem Website-Titel.

10. Also erstellen Sie nun in der Zeile das Website-Logo. Vielleicht müssen Sie noch dessen Größe anpassen.
11. Um die Zeile mit dem Logo auswählen zu können, deaktivieren Sie wieder die obere Werkzeugleiste.
12. Sie wählen die Zeile mit dem Logo aus.
13. Nun fügen Sie den Website-Titel ein. Wenn Sie an das entsprechende Plus-Zeichen nicht herankommen, müssen Sie die obere Werkzeugleiste halt wieder aktivieren. Vielleicht müssen Sie noch Größe und Farbe des Website-Titels anpassen.
14. Nun wählen Sie die Zeile mit Logo und Titel aus.
15. Dann wählen Sie die Zeile aus, die alles umfasst.
16. Schließlich wählen Sie für diese Zeile die Ausrichtung »Abstand zwischen Elementen«.

Sie sehen: Es braucht sechzehn Aktionen, um diesen Header nachzubauen. Und das auch nur, wenn Sie sich nicht verklicken. Es ist wahrlich nicht so einfach, bei solchen Konstrukten den Überblick zu bewahren. Sicher zu sein, dass Sie sich auf der richtigen Ebene befinden und nicht das falsche Element modifizieren.

Und genau das passiert auch, wenn Sie diesen Template Teil dann in ein Template oder einen anderen Template Teil einbauen. Glauben Sie mir, ich habe schon oft unwillentlich an meinem Header etwas verändert, das ich gar nicht verändern wollte!

Zuordnung der WordPress FSE Template Teile

Wenn Sie nun also zwei Kopfzeilen haben – eine mit und eine ohne Breadcrumbs Block – können Sie jene ohne Krümelspur den dunklen Headers zuordnen. Das erfolgt natürlich auch über den Design > Editor.

Haben Sie es einmal geschafft, sich zum Template Part Block zu klicken, bietet der die Option Ersetzen. WordPress zeigt Ihnen dann alle vorhandenen Header. Also auch alle missglückten Versuche.

Den Yoast Breadcrumbs Block können Sie dann unterhalb des Gruppe Blocks, der für die Dunkelheit des Headers sorgt, einfügen. Je ein Abstandhalter Block vorweg und danach sorgt für … nun ja, er sorgt für Abstand.

So können Sie Ihre Template Teile dann auch den jeweiligen Templates zuordnen. Auch hier bietet der Template Part Block die Option Ersetzen. Auf diese Weise könnten Sie also dafür sorgen, dass der kleine dunkle Header auf der Startseite (das tut er es schon) und auf allen Beiträgen erscheint, während alle weiteren Seiten nur die kleine Kopfzeile zeigen.

Beitragsbilder: Britta Kretschmer