Wer zum ersten Mal mit einem Block-Theme arbeitet, kann durcheinander kommen, was wo und in welcher Reihenfolge zu tun ist. Daher teile ich hier mal meinen Workflow:
Inhaltsverzeichnis
- 1. Auswahl des richtigen Block-Themes
- 2. Block-Theme erweitern: Plugins und Proversionen
- 3. Block-Editor und Website-Editor
- 4. Seiten und erste Beiträge anlegen
- 5. Farbpalette und Schriftart(en) definieren
- 6. Navigationen definieren
- Exkurs Layoutprinzipien
- 7. Header und Footer layouten
- 8. Templates anpassen
- Noch Fragen?
1. Auswahl des richtigen Block-Themes
Bei der Arbeit mit klassischen Themes kam es noch stark auf deren vordefiniertes Aussehen an, da man ohne Programmierkenntnisse nicht weiter ins Layout eingreifen konnte.
Block-Themes hingegen sind quasi nur noch eine Leinwand für ganz individuelle Layouts nach Wunsch, die nun dank Blöcken und Vorlagen kinderleicht ohne Programmierkenntnisse zusammengestellt werden können.
Block-Themes unterscheiden sich also nicht mehr durch ihre Layoutmöglichkeiten, sondern nur durch ihre Voreinstellungen und durch die jeweils mitgelieferten Vorlagen (engl. patterns) voneinander. Diese Vorlagen sind vorgefertigte Block-Kombinationen, die man per Klick einfügen und nach Bedarf anpassen kann. Im Grunde lässt sich aber mit jedem Block-Theme (fast) jedes Layout umsetzen.
2. Block-Theme erweitern: Plugins und Proversionen
Je nach Block-Theme kann die Auswahl vorhandener Vorlagen oder Einstellungen durch passende Plugins oder Proversionen vergrößert werden. Manche liefern auch komplette vorgefertigte Startlayouts, die man benutzen kann.
Vorlagen sind klasse, sparen viel Zeit und können das Layouten abkürzen, aber wer im Umgang mit Blöcken einigermaßen geübt ist, kann sich die entsprechenden Layouts auch selbst zusammenstellen.
3. Block-Editor und Website-Editor
Die Inhalte von Beiträgen und Seiten werden über die Funktion Bearbeiten mit dem sich dann öffnenden Block-Editor (formerly known as Gutenberg) erstellt.
Alles, was zum Layout der Website insgesamt gehört (inklusive Templates, siehe Punkt 8), wird hingegen über den Website-Editor angepasst. Mehr dazu ab Punkt 5.
4. Seiten und erste Beiträge anlegen
Bevor wir mit dem Anpassen des Layouts anfangen können, brauchen wir zuerst eine Struktur für die Website :
- Aus welchen Seiten soll die Website bestehen?
- Wird es zusätzlich Beiträge geben, oder nicht?
- Sollen diese thematisch verteilt werden oder gibt es eine Blog-Seite für alle zusammen?
Alle Seiten, die direkt über Menüs erreichbar sein sollen, müssen bereits angelegt und veröffentlicht sein (Titel reicht, Inhalt kann später), um sie in einer Navigation verlinken zu können (siehe Punkt 6).
Dasselbe gilt für erste Beiträge. Sollen diese nachher z.B. nach Beitragskategorien getrennt dargestellt werden, sollte jeweils dazu wenigstens ein Beitrag angelegt sein. Gibt es nur eine Blog-Seite für alle Beiträge zusammen, reichen je nach gewünschtem Layout ein bis drei Beiträge.
5. Farbpalette und Schriftart(en) definieren
Jetzt gehen wir ans Gesamtlayout: Welche Farben sollen Hintergrund, Schrift und Akzente wie Links und Buttons haben und welche Schriftarten werden benötigt?
Jedes Block-Theme bringt im Bereich Stile mehrere vordefinierte Farb-Paletten als Vorschlag mit, die man via Website-Editor anpassen kann, oder man legt eine eigene individuelle an. Mit der so definierten Palette lassen sich dann die Hintergrundfarbe(n), sowie die Farben von Schrift, Links und Buttons global einstellen.
Schriftarten werden ebenfalls im Website-Editor definiert. Jedes Theme bringt bestimmte Vorschläge mit, die man nutzen kann, oder auch nicht. Möchte man eine andere Google-Schriftart installieren, geht das direkt von hier aus. Aber auch Schriftarten von anderen Anbietern können hochgeladen und damit lokal genutzt werden. Plugins oder sonstige Umwege sind nicht mehr nötig.
Danach können die Schriftarten für Text, Links, Überschriften und Buttons direkt global eingestellt werden. Die Schriftart für weitere Blöcke wie z.B. Zitate können über das Stilbuch ebenfalls global angepasst werden, falls man nicht die vom normalen Text verwenden möchte.
Vereinzelte Änderungen für die Verwendung nur in bestimmten Beiträgen oder Seiten können, wenn unbedingt nötig, nachher im Blockeditor vorgenommen werden. Das sollte man aber nur für Sonderfälle nutzen, weil es sonst irgendwann unübersichtlich wird.
6. Navigationen definieren
In klassischen Themes wurden Menüs bereits unabhängig von der Stelle eingerichtet, an der sie angezeigt werden. So unterscheiden auch Block-Themes das Einrichten von Menüs und das Einfügen des Navigationsblocks in Header bzw. Footer.
Gewöhnungsbedürftig ist der Zwischenschritt Seitenlink beim Auflisten von Links zu den einzelnen Seiten. Wenn man es aber recht bedenkt, ist es doch logisch, weil man ja auch andere Linkarten (externe, Kategorien, Buttons etc.) davon unterscheiden können muss.
Wie immer können auch in Block-Themes nur die Seiten oder Beiträge der Navigation hinzugefügt werden, die bereits veröffentlicht sind (s. Punkt 4). Ebenfalls wie früher fügt WordPress der automatisch erstellten ersten Navigation erstmal eine Liste sämtlicher veröffentlichter Seiten hinzu, was man dann aufräumen muss. Eine weitere Navigation erstellt man am besten durch Duplizieren der ersten und anschließendes Anpassen. Beide können dann sprechend umbenannt werden.
Exkurs Layoutprinzipien
Bevor es ans Layouten von Header bzw. Footer und der einzelnen Templates geht, möchte ich kurz die grundsätzlichen Layoutprinzipien beim Arbeiten mit Block-Themes ansprechen.
Jedes Block-Theme hat drei verschiedene Breiten
Ein Block-Theme wird mit drei vordefinierten Breiten für Inhalte oder Layout ausgeliefert:
- die standardmäßige Inhaltsbreite ist die kleinste Breite, in der alles erscheint, solange nicht anders definiert. Deshalb wird sie manchmal auch Keine genannt.
- die Weite Breite ist breiter als die Inhaltsbreite, aber nicht so breit wie die gesamte Breite.
- die Gesamte Breite füllt die komplette Layoutbreite.
Der oft verwendete Hintergrundfarbstreifen ist z.B. meist eine Gruppe mit gesamter Breite, in der dann weitere Blöcke mit weiter oder Inhaltsbreite liegen.
Die Blöcke Gruppe, Zeile und Stapel
Gruppen sind nichts weiter als Container, die die darin liegenden Blöcke zu Layoutzwecken zusammenfassen. Definiert man nichts anderes, dann werden diese Blöcke untereinander platziert.
Möchte man bestimmte Blöcke nebeneinander platzieren, kann man das entweder mit dem Spalten-Block tun (wenn feste Spaltenbreiten erwünscht sind), oder mit der Gruppenvariante Zeile (für flexible, sich dem Inhalt anpassende Abschnitte). Möchte man bestimmte Blöcke, z.B. innerhalb einer Zeile, trotzdem untereinander platzieren, gibt es dafür die Gruppenvariante Stapel.
Beispiel
Ein weit verbreitetes Headerlayout umfasst:
- Site-Logo links,
- Seitentitel und -Untertitel direkt daneben untereinander
- Rechtsbündig in derselben Zeile eine Navigation.
Die Blockstruktur könnte so aussehen:
- Gruppe (für alles samt Hintergrund)
- Zeile (für alle Inhalte, mit Option Abstand zwischen Blöcken)
- Zeile (für die Inhalte auf der linken Seite)
- Site-Logo
- Stapel (für Titel und Untertitel untereinander)
- Titel
- Untertitel
- Navigation (automatisch als Zeile der enthaltenen Links vordefiniert)
- Zeile (für die Inhalte auf der linken Seite)
- Zeile (für alle Inhalte, mit Option Abstand zwischen Blöcken)
7. Header und Footer layouten
Mit diesem Wissen können wir den Header und Footer anpassen oder selbst erstellen. Am einfachsten ist es aber, eine der vorhandenen Vorlagen, die den eigenen Wünschen am nächsten kommen, zu bearbeiten.
In der Listenansicht können wir den vorhandenen Aufbau anschauen und die gewünschten Änderungen an der richtigen Stelle einfügen.
8. Templates anpassen
Zu den genannten Voreinstellungen eines Block-Themes gehören unter anderem die standardmäßig ausgewählten Templates für Beiträge und Seiten. Auch sie lassen sich in Block-Themes ganz leicht mit Hilfe von Blöcken verändern.
Voraussetzungen zur Anpassung von Templates sind ein sicherer Umgang mit verschachtelten Blöcken und ein grundlegendes Verständnis des Template-Systems von WordPress.
WICHTIG: Templates sind Layout-Schablonen, hier werden also nicht die eigentlichen Inhalte eingefügt! Hier geht es nur um das Anordnen von Platzhaltern! Die konkreten Inhalte werden nur via Beiträge und Seiten im Backendmenü in die tatsächlichen einzelnen Beiträge und Seiten eingefügt.
Hier kommen Anfänger gern mal durcheinander. Aber wie schon in Punkt 3 gesagt, muss man nur folgende Faustregel beachten:
Globales Layout im Website-Editor bearbeiten,
eigentliche Inhalte via Beiträge und Seiten nur im Block-Editor einfügen.
Noch Fragen?
Wer sich nach Lektüre dieses Beitrags noch unsicher fühlt, die hier aufgelisteten Tipps eigenständig umzusetzen, der findet detaillierte Anleitungen zu allen genannten Schritten und mehr im Buch, zu dem diese Website gehört:
