Kategorieseiten in WordPress besser gestalten – ein Gewinn für Benutzerfreundlichkeit und SEO

Bis WordPress 5.9 war die Bearbeitung der sogenannten Archivseiten aus dem Backend heraus nur äußerst knapp bemessen. Ohne Plugins waren es nur der Name, der Slug und ein kleines Textfeld. Darum haben sich Plugins entwickelt, die Bearbeitung und verbesserte Darstellung übernommen haben. Um vielfältig und flexibel zu sein, waren komplexe Einstellungen nötig, und es war nicht immer einfach, jeder Kategorie ein eigenes Layout/eine eigene Funktion zu geben.

Wer mehr Flexibilität wollte, hatte auch die Möglichkeit, die automatischen thematischen Übersichten zu deaktivieren und durch (halb) manuelle Seiten zu ersetzen. Viele SEO-Plugins bieten die Möglichkeit, die Archive zu deaktivieren. Dann eine neue Seite angelegt und mit Mehrwert und ggf. automatischer Liste von Beiträgen oder Produkten ausgestattet. So wurden oft deutlich bessere thematische Übersichten erzeugt.

Diese haben aber meistens den Nachteil, dass die URL-Struktur und Breadcrumb-Navigation verloren gehen. Letzteres ist ein wichtiges Hilfsmittel für die Besuchenden. Und beides sind wichtige Mittel für Suchmaschinen, um die Webseite zu verstehen. Außerdem bieten die Links der Breadcrumb-Navigation auch weitere Links, die im Suchindex landen können.

Mit den neuen WordPress-Blöcken kann man Kategorieseiten wie z.B. Listen individueller gestalten und organisieren, hier eine Vorher-Nachher-Ansicht. 

Blöcke machen es möglich

Mit dem Einzug des Site-Editors in Version 5.9 und der Umwandlung der Templates von PHP zu Blöcken entstanden ganz neue Möglichkeiten. Die Archive sind vollständig flexibel, und es kann ganz nach den eigenen Vorstellungen mehr oder weniger individualisiert werden.

Um diese Freiheiten zu bekommen, muss das aktive Theme ein sogenanntes „Block-Theme“ sein. Um zu prüfen, ob das eigene Theme bereits ein Block-Theme ist, hilft ein Blick in das Hauptmenü im WP-Admin. Wenn der Menüpunkt „Design“ einen Unterpunkt „Website-Editor“ hat, ist ein Block-Theme aktiv.

Da der Website-Editor mit den klassischen Themes komplett inkompatibel ist, ist in dem Fall ein Wechsel auf ein anderes Theme nötig. Das aktuelle Standard-Theme Twenty Twenty-Four ist so ein Theme. Es gibt auch Themes, die neben ihrer klassischen Version auch eine Block-Version haben. Ein Beispiel dafür ist Neve.

Außer dem Theme können auch Plugins Templates mitbringen, um ihre Inhalte auch im Auslieferungszustand gut aussehen zu lassen. So kann zum Beispiel ein FAQ-Plugin die Übersichten mit Akkorden und frei von Bildern liefern, so wie es die Erwartung der Webseiten-Besuchenden ist. Diese Vorlagen werden als Dateien ausgeliefert und können nun komplett über eine grafische Oberfläche im Backend überschrieben werden.

So kann für jede Taxonomie – z.B. Schlagworte, Kategorien oder Produktkategorien in WooCommerce – ein jeweiliges Layout erstellt werden. Aber auch innerhalb einer Taxonomie kann individualisiert werden. So kann zum Beispiel eine einzelne Kategorie (in WordPress ein Term genannt), die mit Inhalten versehen ist, großzügig die schönen Bilder bereits in der Übersicht zur Schau stellen. Eine andere Kategorie, für die es keine Bilder gibt, kann dagegen ein Textlayout nutzen. Damit werden langweilige Platzhalterbilder vermieden, und die lesefreudige Zielgruppe wird viel besser angesprochen.

Es gilt weiterhin die Template-Hierarchy, die von super spezifischen zum allgemeingültigsten Template das passende auswählt. So kann z.B. für eine Taxonomie Produktkategorien ein neutrales Layout erstellt werden.

Die im weiteren Verlauf des Textes erstellten Templates und Spielarten lassen sich auch programmatisch umsetzen. Dieser Artikel fokussiert sich auf die Umsetzung über den Site-Editor, da dieser allen zur Verfügung steht und auch bei einer späteren Verteilung mittels Code/Theme/Plugin ein praktisches, kostenfreies Werkzeug ist. Der Site-Editor kann seit Version 5.9 Templates erstellen oder ganze Themes exportieren.

Templates erstellen

Um ein individuelles Template umzusetzen, wird der Site-Editor geöffnet: Dieser ist im Hauptmenü des WP-Admin unter Design -> Website-Editor zu finden. Im Navigationsbereich auf der linken Seite geht es auch direkt zu den „Templates“. Die Liste führt wortkarg die Namen der Templates auf. Der schnellste Weg zum eigenen Template bietet das kleine + neben der Überschrift am oberen Ende der Liste.


Für eine detailliertere Auflistung der bestehenden Templates und ihrer Funktionen befindet sich am unteren Ende der Liste ein Link mit der Aufschrift „Alle Templates verwalten“. Die große Liste ist für den Einstieg sehr hilfreich, da sie eine genaue Beschreibung der einzelnen Templates liefert. Mit einem Klick auf den Namen lässt sich ein bestehendes Template bearbeiten. Wenn das gewünschte noch nicht existiert, ruft der Button „Neues Template hinzufügen“ am oberen rechten Fensterrand den Prozess zur Erstellung auf.

Der erste Schritt bei der Erstellung ist die Auswahl des Template-Typen. In diesem Fall wählen wir „Kategorie-Archiv“.

Es folgt die Entscheidung, ob das Layout für alle Kategorien genutzt werden soll oder nur eine bestimmte.

Der Klick auf „Kategorie“ bringt uns zum dritten Schritt – der Auswahl, welche Kategorie genau das neue Layout bekommen wird.

Nach dem nächsten Klick ist der letzte Schritt des Prozesses erreicht, und es kann aus einer Auswahl bestehender Archiv-Layouts gewählt werden, um schneller ans Ziel zu kommen. Zum Einstieg ist die Anpassung einer Vorlage empfehlenswert. Mit mehr Erfahrung und genauen Vorstellungen kann auch leer gestartet werden, dafür ist unten der „Überspringen“-Link.

Damit ist das neue Template angelegt und zeigt auch direkt, wenn bereits Inhalte in der ausgewählten Kategorie vorhanden sind, eine Vorschau der Inhalte. 

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Erkunden und verstehen

Die Möglichkeiten innerhalb eines Templates sind groß, aber es sind ein paar technische Punkte zu berücksichtigen, um die reibungslose Funktionalität zu gewährleisten. 

Damit der Überblock nicht verloren geht und eine zielgerichtete Bearbeitung von Elementen möglich ist, ist die Struktur-Übersicht Gold wert. In der Leiste am oberen Fensterrand im linken Bereich befindet sich ein Button mit drei gestuften Strichen – dieser dient dem Ein- und Ausblenden der „Listenansicht“. Wenn nur wenig Platz auf dem eigenen Bildschirm zur Verfügung steht, ist das Erlernen des Tastaturkürzels eine gute Sache.

Mit der sichtbaren Struktur lassen sich die Bausteine des Layouts erkennen. Im Regelfall befinden sich neben dem Header- und den Footer-Template-Teilen (erkennbar an den blauen Icons) auch eine Gruppe auf der obersten Ebene der Struktur. Der Header und Footer werden gemeinsam mit den anderen Layouts der Webseite genutzt. Daher sollten Änderungen daran nur vorgenommen werden, wenn es überall auf der Webseite so sein soll. Wichtiger für ein Archiv sind die Elemente dazwischen.

Der erste Block, der so nur für Archiv-Templates zur Verfügung steht, ist „Archiv-Title“. Dieser Block ist ein Baustein, den WordPress automatisch mit dem Namen der Kategorie füllt, und alle üblichen Bearbeitungsmöglichkeiten, die Blöcke haben können, zur Verfügung stellt. Selbst bei Templates, die spezifisch für eine bestimmte Kategorie erstellt werden, empfiehlt es sich, den Platzhalter zu verwenden. Dies sorgt für die beste Kompatibilität mit möglichst vielen Plugins. Andere Plugins benötigen den Platzhalter ggf. als Anker für gewünschte Funktionen.

Die strukturell wichtigsten Einstellungen lassen sich direkt am Block in der Werkzeugleiste einstellen. So lässt sich das Überschriften-Level des Titels (z.B. H1 oder H2) oder die Ausrichtung des Textes ganz einfach umstellen.

Um wirklich alle Einstellungen und Gestaltungsmöglichkeiten zu sehen, lässt sich die rechte Seitenleiste einblenden. Dafür ist in der Leiste am oberen Fensterrand im rechten Bereich eine kleine Grafik von einem Fenster mit Seitenleiste zu finden. Die Einstellungsliste in der Seitenleiste bietet als erste direkt eine Einstellung an, die früher nicht so einfach umsetzbar war: Das Wort „Kategorie“ vor dem Namen der Kategorie lässt sich mit dem Schalter „Den Archivtyp im Title anzeigen“ mit nur einem Klick ausblenden. Für weitere Einstellungen und Gestaltungsmittel kann die Seitenleiste erkundet werden.

Der nächste und wichtigste Block in der Struktur eines Archives ist der „Abfrage-Loop“, dieser liefert die Hauptfunktionalität. Der Loop – englisch für Schleife – ist verantwortlich für das Auslesen der Blogbeiträge mit der entsprechenden Kategorie aus der Datenbank, damit sie dargestellt werden. Wenn dieser Block in einem Archiv nicht vorhanden ist, kann das Archiv nicht funktionieren. Theoretisch sind Header und Footer optional, aber der Abfrage-Loop mit den im folgenden besprochenen Unterblöcken ist ein Muss.

Der Abfrage-Loop hat drei funktionale Unterblöcke, die alle bei der Bearbeitung gleichzeitig sichtbar sind, aber bei der Darstellung des Layouts für Besucher über eine Logik ein- und ausgeblendet werden:

1. Keine Ergebnisse: Eine Art Gruppenblock mit eingebauter Logik ist nur sichtbar, wenn der Abfrage-Loop keine Inhalte gefunden hat, z.B. weil es noch keine Blogbeiträge in der aktuellen Kategorie gibt.
2. Beitrags-Template: Eine Art Gruppenblock, der so oft wiederholt wird, wie es Blogbeiträge in der Abfrage gibt, bis das Seitenlimit erreicht ist. Innerhalb des Abfrage-Loops der wichtigste Block.
3. Seitennummerierung: Ein Block, der nur sichtbar wird, wenn es mehr Beiträge gibt, als gemäß Seitenlimit auf die Seite passen.

Es lassen sich auch andere Blöcke direkt in den Abfrage-Loop einfügen, um z.B. Abstände oder Gestaltungselemente zu platzieren. Was dabei gut funktioniert, lässt sich gut mit Ausprobieren erlernen.

Der Abfrage-Loop: Übung macht den Meister

Die Befüllung des Beitrags-Template-Blocks und die Gestaltung der Unterblöcke erfordert Übung und mutiges Ausprobieren. Das Wichtigste ist zu verstehen, dass die Blöcke in diesem speziellen Block automatisch wiederholt werden und unter anderem die folgenden Blöcke Platzhalter für die eigentlichen Daten sind. Eine Auswahl an Blöcken mit Platzhalterwirkung:

• Titel
• Datum
• Name des Autors
• Textauszug
• Weiterlesen

Alle Blöcke, die keine Platzhalterfunktion haben, werden bei jedem Schleifendurchlauf eins zu eins wiederholt. Dies kann man sich zunutze machen, um Gestaltungselemente zu platzieren, z.B. Trennlinien, Begleitwörter wie „Vom: [Datum]“ oder kleine Grafiken.

Nicht alles gehört in die Schleife

Ein gutes Template besteht aus der Hauptschleife und den „statischen“ Elementen, die vor und hinter den Einträgen stehen. Dies sind die zusätzlichen Inhalte, die Webseiten-Besuchenden Mehrwert liefern. So ist eine thematische Handlungsaufforderung mit dem Link zum passenden Produkt eins der einfachsten Dinge, das sich nun in jeder thematischen Übersicht einbauen lässt.

Je nach Inhaltstyp kann die Schleife einen kleinen Teil ausmachen oder wie bei Blogposts viel Raum einnehmen. Mit einem guten Konzept und Kreativität lassen sich so tolle, thematische Landingpages erstellen, mit denen sich die eigene Webseite von den anderen abhebt.

Seitenweise Wiederholung

Wenn eine Kategorie mehr Einträge hat, als auf eine Seite passen (Seitenlimit), greift die automatische Aufteilung auf Seiten und ermöglicht das Navigieren zwischen diesen über den Seitennummerierungsblock. Da WordPress nur ein Template pro Taxonomie bzw. Term kennt, werden auf der zweiten Seite die gleichen dekorativen bzw. informativen Elemente rund um die Auflistung der eigentlichen Elemente dargestellt. Je nach Umfang der Elemente oberhalb der Auflistung kann das bei der Benutzung nerven. Schließlich wurden die Inhalte schon konsumiert. Außerdem schwächt dies die erste Seite zum Thema in den Suchergebnissen.

Dank der Vielfalt der Plugins im offiziellen Repository gibt es dafür Abhilfe. Das quelloffene Plugin Block Control bietet die Möglichkeit, Blöcke unter bestimmten Umständen ein- und auszublenden, z.B. nur auf mobilen Geräten oder nur für Personen, die eingeloggt sind.

Das Plugin lässt sich direkt über das Dashboard im Hauptmenü unter „Plugins“ -> „Neues Plugins hinzufügen“ suchen und installieren. Anschließend gibt es im Editor in der rechten Seitenleiste bei den Blockeigenschaften einen neuen Eintrag „Sichtbarkeit“. Dieser lässt sich durch Anklicken aufklappen. Hier steht nun eine ganze Reihe an Möglichkeiten zur Verfügung. 

In diesem Fall interessiert uns aber nur ein Eintrag im Unterbereich „Für spezifische Seiten-Typen ausblenden“. Mit dem Haken neben dem Eintrag „Nummerierte Seiten“ werden einzelne Blöcke nur noch auf der ersten Seite eines Archives dargestellt und auf den „nummerierten“ Seiten also 2, 3, usw. ausgeblendet. Damit nicht alle Blöcke einzeln mit der Eigenschaft versehen werden müssen, empfiehlt sich die Nutzung einer Gruppe.

Kategorienseiten - Fazit: Kategorien mit Blöcken bearbeiten 

Nicht nur der Umgang mit dem Website-Editor, auch die vielen Möglichkeiten, die sich plötzlich eröffnen, erfordern etwas Übung. Aber ich gehe davon aus, dass wir in den kommenden Monaten tolle Layouts auf Archivseiten von verschiedenen Webseiten sehen werden. Von diesen Ideen kann man sich inspirieren lassen und selber mit den vielfältigen Medien, die Blöcke zugänglich machen, die eigene Webseite nach vorne bringen.

Titelmotiv: Photo by KOBU Agency on Unsplash