Individuelle Startseite dank Blöcken

Nachdem ich gerade so ein Loblied auf den Block-Editor gesungen habe, wollte ich es nicht bei der Theorie belassen, sondern ihn auch mal ganz praktisch für mich selbst nutzen. So entstand eie alternative Startseite für diese Website hier, deren genaueren Aufbau (anhand der Desktopversion) ich in diesem Beitrag erklären werde:

Das Ausgangsproblem

Die bestehende Startseite ist die automatisch von WordPress befüllte Beitragsseite, eine Seite also, die ohne weitere Erklärung oder thematische Ordnung einfach die neuesten Artikel in rückwärts chronologischer Reihenfolge zeigt:

Für versierte Internetnutzer ist sowas kein Problem, zumal sie selten vie Startseite auf die Website kommen, sondern via Social Media direkt zu einem konkreten Beitrag gelangen und von dort weiterstöbern, oder die Website direkt wieder verlassen.

Besucher, die mt Blogs jedoch noch nicht so vertraut sind, hat eine solche Startseite völlig verwirrt. Einen einleitenden Erklärungstext hätte ich vor Einführung des Block-Editors jedoch nur mit einem Pagebuilder oder Custom Fields zusammen mit einer Beitragsliste auf einer Seite darstellen können.

Lösung mit Hilfe des Block-Editors

Im neuen WordPress ist das aber gar kein Problem mehr. Dank der Blöcke kann das jetzt jeder aus WordPress selbst heraus umsetzen. Für das Styling konnte ich dank Twentig ein paar Dinge abkürzen, die ich früher mit manuell hinzugefügtem CSS hätte umsetzen müssen. Doch dazu gleich mehr.

Intro in Spalten

Der Block-Editor bietet zwar auch das altbekannte Umfließen von Bildern als Option, das kann aber in der mobilen Ansicht noch immer zu zerhackten Texten führen. Im alten WordPress hätte ich deshalb entweder eine CSS-Anweisung mit passendem breakpoint schreiben müssen, oder das Bild in eine eigene Zeile mit viel Leerraum links und rechts setzen müssen. Im Block-Editor nutze ich stattdessen Spalten, um sicherzugehen, dass bei kleinen Bildschirmen der Inhalt der linken Spalte automatisch über den der rechten rutscht. Schematisch sieht das dann so aus:

Es handelt sich also um einen Spalten-Block mit zwei Spalten. In der linken befindet sich ein Bild-Block, in der rechten der Text, der wiederum aus einem Überschrift-Block und einem Absatz-Block besteht.

Der zweite Absatz darunter ist ein weiterer Absatz-Block, der jedoch außerhalb des Spalten-Blocks liegt und daher wieder über die gesamte Inhaltsbreite geht:

Vorschau-Widgets erstellen

Jetzt wird es interessant: Die unter diesem Absatz folgenden Vorschau-Widgets befüllen sich automatisch immer mit dem neuesten Beitrag der jeweiligen Blog-Kategorie. Dies habe ich wie folgt umgesetzt:

Ordnung schaffen

Ich hätte auch nur einen Spaltenblock mit je drei „Zeilen“ nehmen können, aber dann hätte der mobile Umbruch eine andere Reihenfolge als die gewünschte ergeben:

Hätte ich die Themen für die richtige mobile Reihenfolge umsortiert, wäre es auf Desktop falsch gewesen. Zuerst wollte ich die Spaltenblöcke auch dreispaltig machen, aber das hat beim Umbruch für Tablets in jeder zweiten „Zeile“ eine leere rechte Seite ergeben. So bin ich schließlich bei der jetzigen Aufteilung gelandet, die auf allen Bildschirmgrößen die richtige Reihenfolge liefert und keine Leerräume produziert..

Aufbau der Widgets

Jedes „Widget“, also jeder als Kasten designte Bereich, besteht aus einer Spalte pro Spaltenblock und darin aus einem Überschrift-Block und einem Neueste Beiträge-Block. Die Struktur für jede „Zeile“ sieht also wie folgt aus:

Jedes Widget habe ich außerdem mit einem Schatten versehen, um es an das Design der Kategorieseiten anzupassen. Zuerst wollte ich das per Hand in CSS umsetzen, stellte dann aber fest, dass Twentig dies bereits als Option Card with shadow für Spalten anbietet:

Nachdem das geklärt war, konnte es an den Inhalt gehen:

Die Widget-Überschriften

An erster Stelle kommt also wie schon erwähnt jeweils ein Block für eine Überschrift, die zu der passenden Kategorieseite verlinkt ist. Um dafür nicht das Standard-Linklayout meiner Website (rot und unterstrichen) zu behalten, habe ich zunächst die Textfarbe in den Farbeinstellungen angepasst und wollte dann per eigenem CSS noch die Unterstreichung ausblenden. Dabei fiel mir das Icon nahe dem Eingabefeld für Additional CSS Class(es) auf…

… und ich entdeckte die Twentig CSS Library! Hier sind viele CSS-Klassen, die man im Zusammenhang mit dem jeweils aktiven Block benötigen könnte, bereits benutzerfertig angelegt! Wie genial mitgedacht ist das denn?!

Ich nutze für die Überschriften also die Klasse link-hover-underline (Underline link only on hover), die nicht nur bewirkt, dass in der Standardansicht die verlinkte Überschrift nicht unterstrichen ist, sondern auch, dass die Unterstreichung bei Mausberührung wieder sichtbar und der Link als solcher erkennbar wird. Danke, Twentig, das ist ja noch besser!

Die eigentlichen Widgets „Neueste Beiträge“

Das Herzstück der Widgets ist aber der von WordPress selbst zur Verfügung gestellte Block Neueste Beiträge. Wer im Desktoplayout noch eine Sidebar nutzt, kennt das vielleicht noch via Design > Widgets von dort. Das hier ist dasselbe Prinzip, nur dass die Vorlage direkt bei den Blöcken im Editor zu finden ist und in den Inhaltsbereich eingefügt werden kann.

Jeder Neueste Beiträge-Block besteht bei mir aus Beitragsbild, Beitragsüberschrift und Textanfang:

Welche Inhalte WordPress hier hereinholt und wieviele davon, kann man nach Einfügen des Neueste Beiträge-Blocks in der rechten Spalte einstellen. Dabei kann man die Anzahl der Beiträge, die gewünschte Kategorie (oder einfach alle), das gewünschte Layout mit oder ohne Bilder, Autor- und Datumsangaben und vieles mehr definieren. Ich brauchte nur jeweils einen Beitrag pro Block. Bei mehreren hätte es z.B. auch so aussehen können:

Das Ergebnis

…sieht wie folgt aus, wobei sich der jeweils gezeigte Beitrag pro Kategorie wie gesagt automatisch aktualisiert, wenn ein neuer veröffentlicht wird. Auf diese Weise wird der Besucher der Startseite nicht mehr unkommentiert in ein Wirrwarr von Beiträgen geworfen, sondern kann sich in Ruhe einen Überblick über die Themen verschaffen und dann nach seinen Interessen weiter navigieren.