Internetkurse Köln

Bei der Arbeit mit einem Kunden ging es kürzlich um die Möglichkeiten, die WordPress Kategorie Seite zu bearbeiten. Sein Projekt setzt auf eben diese Art der Seiten, allein ist er mit deren Erscheinungsbild noch nicht zufrieden. Wie genau er möchte, dass es am Ende aussehen soll, weiß er noch nicht so genau. Aber die Zusammenarbeit hat mir einmal mehr bewusst gemacht, dass für das Vorgehen auf jeden Fall das Verstehen des Benutzers nötig ist.

Wozu bietet WordPress Kategorie Seiten?

Lang ist es her, da hatte ich mich auf diesem Blog schon einmal mit der Frage nach den Kategorien Seiten (damals im Gegensatz zu Schlagwörtern) beschäftigt. Aber auch wenn sich in der Zwischenzeit bei WordPress sehr viel verändert hat, ist dieses Prinzip noch immer dasselbe geblieben.

Kategorien (und auch die Schlagwörter) helfen dabei, Beiträge zu sortieren. Kund/innen gegenüber vergleiche ich das Vorgehen immer gerne mit dem von Bibliotheken. Um ein konkretes Buch finden zu können, hilft es dort ja auch ungemein, wenn die Sortierung stimmt.

Ein medizinisches Fachbuch findet sich leichter, wenn es im Bereich Medizin steht – und nicht etwa in der Kunstabteilung. Und wenn es sich dann zum Beispiel mit Urologie beschäftigt, sollte es nicht unbedingt im Regal der Orthopädie stehen.

Wäre dieses Fachbuch nun ein Fachbeitrag auf einer Website, die sich neben der Medizin auch mit der Kunst beschäftigt, wären Medizin und Kunst die Kategorien. Wohingegen Urologie und Orthopädie als Unterkategorien oder aber auch als Schlagwörter dienen würden.

• WordPress Kategorien sind also dazu da, Beiträge in thematische Gruppen einzuteilen.
• WordPress Schlagwörter dienen der Differenzierung und dem Finetuning.

Für beide, Kategorie und Schlagwort, produziert WordPress automatisch die passenden Seiten. Dabei ist das Ergebnis dieser automatisch erstellten Seiten sehr ähnlich. Immer geht es um die Ausgabe von Beiträgen, die entsprechend kategorisiert beziehungsweise verschlagwortet sind.

Das ist also ihr Sinn: Kategorie und Schlagwort Seiten dienen als Übersichtsseiten. Sie zeigen, welche Beiträge es zu dem speziellen Thema gibt.

Es reicht überdies nicht, unter Beiträge > Kategorien die gewünschten Kategorien nur zu erstellen. Es muss auch Beiträge geben, die diese Kategorien nutzen. Und diese Beiträge müssen veröffentlicht sein.

Die Kategorie Seite zeigt keine Entwürfe an.

Eine WordPress Kategorie Seite bearbeiten

Die Erfahrung besagt, dass WordPress Einsteiger an diesen Kategorie Seiten irgendwie zu knabbern haben. Das mag vor allem daran liegen, dass diese Art der Seite nicht unter den statischen Seiten erscheint, die sie selbst erstellt haben.

Dennoch können Sie jede WordPress Kategorie Seite bearbeiten. Und zwar entweder alle nach gleichem Muster. Oder aber auch jede einzeln nach ihrer eigenen Façon.

Dafür gibt es unterschiedliche Vorgehen. Wobei diese Vorgehen entweder nichts oder nur sehr bedingt damit zu tun haben, was WordPress Einsteiger vom Bearbeiten der statischen Seiten kennen. Also ist die Verwirrung schnell groß.

Da ist es manchmal gar nicht so leicht, das passende Vorgehen zu finden. So nun also auch im konkreten Fall eines Reise-Blogs.

Beispiel: Reise-Blog

Im konkreten Fall meines Kunden geht es um ein Reise-Blog. Um fast die ganze Welt ist er gereist und möchte auf seinem Blog davon erzählen. Da liegt es natürlich irgendwie nahe, als Kategorien die Kontinente zu wählen, die er besucht hat.

Erstellt hat ihm sein Blog eine Kollegin. Und die hat als Vorgehen das Bearbeiten der Kategorie Seite über das WordPress Backend gewählt.

Bearbeiten der Kategorie Seite im WordPress Backend

Mein Kunde hat seiner Webdesignerin pro Kontinent immer ein passendes Bild gegeben, das sie dann über die WordPress Bearbeitung der Kategorie-Beschreibung veröffentlicht hat.

Sie hat also in das Textfeld, das noch wie der alte Classic Editor (TinyMCE) aussieht, das passende Bild eingebunden, es zentriert ausgerichtet und ihm über die Option Bearbeiten die mittlere Größe gegeben.

Für den Rest sorgt das Theme. Das in seinem Fall den nötigen Platz für die Kategorie-Beschreibung bereithält. Das machen Themes aber nicht immer. Selbst bei einem Standardtheme wie Twenty Nineteen kann es vorkommen, dass man ihm das erst einmal beibringen muss.

Das aktive Theme meines Kunden aber tut das, was eine Kategorie Seite bestenfalls tun soll. Es gibt die Kategorie-Beschreibung aus und somit auch das Kategorie-Bild. Überdies zeigt es alle Beiträge, die zu der Kategorie gehören.

Im konkreten Fall macht es dies in drei Spalten. Und in denen zeigt es immer zuerst das Beitragsbild, gefolgt vom Beitragstitel und dem Beitragsauszug.

Das Ergebnis kann sich schon mal sehen lassen. Allerdings sehe ich das Problem, dass sich das Kategorie-Bild gar nicht von den Beitragsbildern unterscheidet.

Auf den ersten Blick könnte man erwarten, dass es sich ebenfalls um ein Beitragsbild handelt, das zu einem Beitrag mit dem kurzen Titel Afrika führt. Allein der Versuch des Klicks macht deutlich, dass es doch um eine andere Art Bild handeln muss. Irgendein Headerbild, das man heutzutage eigentlich viel größer erwarten würde.

Ich riet meinem Kunden also dazu, das Bild weit größer auszugeben. Bestenfalls in voller Fensterbreite, wenn das Theme dies denn zulässt. Und diese Überlegung hat bei mir dann zur nächsten geführt.

Kategorie Seite im WordPress Backend mit Blöcken bearbeiten

Warum zum Henker, fragte ich mich, bietet WordPress für herkömmliche Themes (im Gegensatz zu den neuen Block Themes) noch nicht die Option, die Kategorie mit Blöcken zu bearbeiten? Warum ist da immer noch nur der alte Classic Editor, der nicht viel kann?

Wobei, hoppla, fiel mir da auf. Eines kann der alte Editor ja doch. Er kennt neben dem visuellen auch den Textmodus. Und vielleicht kann der ja mit dem Code, den so ein Block produziert, etwas anfangen.

Und siehe da: Er kann.

Coverblock auf der Kategorie Seite

Da mir für meinen Kunden ein Coverbild im Sinne des Coverblocks vorschwebt, probieren wir das Ganze also mal mit einem solchen Coverblock.

Den Coverblock erstellen

Erstellen würde man den Coverblock im Rahmen der Bearbeitung einer normalen statischen Seite. Oder eines Beitrags wie dem hier.

Wie immer reicht es, der Aufforderung einer leeren neuen Zeile zu folgen und dort einen Schrägstrich einzugeben gefolgt von dem, wonach man sucht. Mit anderen Worten: /cov führt schon zum passenden Block.

Der Coverblock fordert Sie dann auf, das gewünschte Bild aus der Mediathek zu wählen oder es hochzuladen.

In der Folge machen Sie aus dem Absatz, der sich auf dem Bild befindet, eine Überschrift H1 und geben Ihren Titel der Kategorie ein. In meinem Fall ist das »Kategorie: Afrika«. Und möchten Sie wie ich noch eine Beschreibung ausgeben, dann fügen Sie nach dieser Überschrift noch einen Absatz ein.

Größe und Farbe dieser beiden Textelemente können Sie in der rechten Seitenspalte festlegen.

Die Ausrichtung der beiden Textelemente erfolgt über die Werkzeugleiste des Coverblocks. Die aktivieren Sie, indem Sie auf Ihr Bild oder das leicht nach links ausgestellte Icon für den Coverblock in der Werkzeugleiste eines der Textelemente klicken.

Über die Werkzeugleiste des Coverblocks wählen Sie in der Folge:

• die Ausrichtung des Coverblocks (volle Fensterbreite),
• die Textposition (zum Beispiel linksbündig und vertikal zentriert)
• und die Option für die volle Höhe des Bildes.

Schließlich können Sie für den Coverblock über die rechte Seitenspalte das Overlay abschalten, indem Sie dessen Deckkraft auf 0 stellen.

Den Coverblock auf die Kategorie Seite kopieren

Nun gilt es, den Coverblock auf die Kategorie Seite zu kopieren. Hierfür wählen Sie den Code Editor.

Den Code Editor finden Sie in der Beitrags- und in der Seitenbearbeitung über das Menü Ansicht anpassen. Dieses Menü versteckt sich ganz oben rechts neben dem Veröffentlichen/Aktualisieren-Button hinter dem Icon mit den drei vertikalen Pünktchen.

Der Code Editor zeigt Ihnen den Code für die gesamte Seite oder den gesamten Beitrag. Sie suchen nun nach dem Teil des Codes, der mit

<!-- wp:cover {"url":"https://...","id":...,...} -->

beginnt und mit

<!-- /wp:cover -->

endet.

Das ist der Code, den Sie benötigen. Das heißt, Sie kopieren alles, beginnend mit <!-- wp:cover ... --> und inklusive <!-- /wp:cover -->, indem Sie alles markieren und dann entweder über Strg + C oder Rechtsklick > Kopieren in den Zwischenspeicher kopieren.

Das Einfügen erfolgt dann in der Bearbeitung der betreffenden Kategorie. Auch dort schalten Sie von der visuellen in die Text-Ansicht um und fügen dort den Code ein (Strg + V oder Rechtsklick > Einfügen).

Ob Ihre Kategorie Seite dann im Endeffekt wie gewünscht den Coverblock in voller Fensterbreite ausgibt, sei dahingestellt. Ein Theme wie Twenty Twenty-One, mit dem ich das Ganze getestet habe, bietet für die Kategorie Beschreibung die volle Fensterbreite jedenfalls nicht an. So kann auch der Coverblock nicht in voller Fensterbreite erscheinen.

Damit es so aussieht, wie ich mir das vorstelle, braucht es zwei Änderungen an anderer Stelle. Es geht nun also darum, die Vorlage für Kategorie Seiten zu modifizieren.

Und spätestens an dieser Stelle versteht ein WordPress Einsteiger meist gar nichts mehr.

Bearbeiten der Vorlage für die WordPress Kategorie Seite

Jedes Theme ist anders. Das Folgende bezieht sich also auf Twenty Twenty-One. Das letzte Standardtheme, das noch nach althergebrachter Weise funktioniert. Und deshalb auch mit einer Datei namens archive.php arbeitet.

Die archive.php ist die Vorlage für alle Archivseiten (Autor und Datum zum Beispiel), somit auch für die Kategorie Seiten. Andere Themes verzichten vielleicht auf die archive.php und nutzen stattdessen die index.php. Und wiederum andere haben eine category.php, die dafür sorgt, dass die Kategorie Seite anders aussieht als die anderen Archive.

Zu finden sind diese Dateien, die sich auch Templates nennen, im Theme-Verzeichnis. Und das können Sie sich über Design > Theme-Datei-Editor anschauen und bearbeiten. Oder Sie greifen mit einem FTP-Programm wie Filezilla direkt auf Ihren Server zu.

Auf jeden Fall brauchen Sie für die Änderung in einem Template ein Childtheme. Ohne Childtheme wären Ihre Modifikationen sonst nach dem nächsten Theme-Update futsch!

Die archive.php von Twenty Twenty-One ruft ab Zeile 19 den header auf.

<header class="page-header alignwide">
	<?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>
	<?php if ( $description ) : ?>
		<div class="archive-description"><?php echo wp_kses_post( wpautop( $description ) ); ?></div>
		<?php endif; ?>
</header><!-- .page-header -->

Und genau hier gilt es nun, die passenden Änderungen vorzunehmen.

Änderungen in der archive.php

Die erste Änderung, die wir hier vornehmen, findet sich direkt in dieser Zeile 19 (hier ist es die erste…). Das HTML-tag header benutzt als Klasse (class) den Wert alignwide (weite Breite). Das ändern wir zu alignfull (volle Breite). Dies sorgt dafür, dass der gesamte Header mit allem, was er umschließt, nun in voller Fensterbreite erscheint.

Die erste Zeile lautet nun also:

<header class="page-header alignfull">

Es folgt der Titel des Archivs. Den brauchen wir nicht mehr, weil der Titel ja nun Teil des Coverblocks ist. Also weg damit. Die Löschung betrifft die gesamte Zeile 20, also genau diese Zeichenfolge:

<?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>

Wollen Sie jetzt auch noch die schwarze Linie unterhalb des Kopfzeilenbereichs loswerden, erledigt dies die folgende CSS-Angabe:

header.page-header.alignfull {
    border-bottom: none;
}

Das CSS gehört entweder in die style.css Ihres Childthemes – oder kann über das Zusätzliche CSS im Design > Customizer veröffentlicht werden.

Nun entspricht die Kategorie Seite bei Twenty Twenty-One in Sachen Headerbild schon mal dem Entwurf. Allein die Ausgabe der Beiträge entspricht nicht dem dreispaltigen Konzept.

Damit nun auch Twenty-Twenty-One das Ganze in drei Spalten ausgibt, bräuchte es weitergehende Veränderungen in dem Template, das dafür zuständig ist. Oder aber die Bezahlvariante des Plugins Options for Twenty Twenty-One, die das bewerkstelligen kann.

Wie das Ganze aussieht, wenn man ein Theme benutzt, bei dem sich die Templates einfach mit Blöcken bearbeiten lassen, zeige ich nun am Block Theme Twenty Twenty-Three.

Medien-Text-Block auf der Kategorie Seite eines Block Themes

Twenty Twenty-Three ist ein Block Theme, das nach dem Prinzip des Full Site Editing funktioniert. Das heißt, es arbeitet nicht wie herkömmliche Themes mit Templates in Form von PHP-Dateien. Stattdessen lassen sich alle Templates über den WordPress Design Website-Editor bearbeiten. Und den bekommen Sie überhaupt erst angeboten, wenn Sie ein Block Theme aktivieren.

Mit dem Design > Website-Editor können Sie alle Templates verändern. Oder auch selbst neue erstellen. Und genau das tun wir jetzt.

Wir werden also nicht das Template für alle Archive verändern, sondern ein Template für die Kategorie Afrika zu erstellen. Auf diese Weise lassen sich dann auch für alle anderen Kategorien (Europa, Amerika et cetera) Vorlagen produzieren. Und so ist auch sichergestellt, dass nicht hinterher alle Archive (Autor, Datum et cetera) das Afrika-Bild zeigen.

Die Vorlage, die Sie hier erstellen, wird nicht leer sein. Vielmehr wird sie aussehen wie die Vorlage für die Archive. Sie zeigt also bereits die gewünschte Abfrage der passenden Beiträge.

Und im Fall von Twenty Twenty-Three sorgt die Abfrage sogar schon für die gewünschten drei Spalten. Der Block ließe sich aber auch schnell davon überzeugen, stattdessen die Beiträge in zwei oder vier Spalten auszugeben.

Die neue Vorlage für die Kategorie Seite bearbeiten

Statt eines Coverblocks möchte ich nun einen Medien-Text-Block benutzen. Der soll links die Textelemente zeigen und rechts das passende Bild. Statt des vorhandenen Textelements benutze ich den Block Archiv Titel. Darunter füge ich einen Absatzblock ein.

Den vorhandenen Block für den Archiv-Titel brauchen wir nicht mehr. Dafür braucht es vielleicht noch ein wenig Abstand zwischen dem Medien-Text-Block und den Beiträgen darunter. Dieser Abstand lässt sich entweder mit einem Abstandsblock herstellen. Oder Sie geben dem Medien-Text-Block so wie ich etwas Außenabstand nach unten. Die Option dafür finden Sie in der rechten Seitenspalte.

Übrigens gibt es auch einen Block, der die Kategorie-Beschreibung abfragen würde. Der also genau das ausgeben würde, was Sie in der Bearbeitung der Kategorie in dem Textfeld hinterlegt haben. Der Coverblock, den wir dort eingefügt haben, ist nach dem Themewechsel natürlich immer noch vorhanden.

Twenty Twenty-Three benutzt diesen Block nicht, man kann ihn dem Theme aber unterjubeln. Ich spreche von dem Block Begriffsbeschreibung. Auf den ersten Blick scheint er gar nichts mit der Kategorie-Beschreibung zu tun zu haben. Aber doch, er meint genau das.

Allerdings versteht Twenty Twenty-Three dann nicht, dass wir als Kategorie-Beschreibung bereits einen Coverblock benutzen. Statt als Cover gibt das Theme dann nur ein großes Bild und die Textelemente darunter aus.

Eine Option bleibt noch: Eine statische Seite mit passender Abfrage

Wem das alles noch nicht genug Optionen war, sei hier noch eine Möglichkeit benannt.

Belassen Sie die Kategorie Seiten, wie WordPress und das aktive Theme sie halt so erstellen, und produzieren Sie eine statische Seite mit einem Abfrage-Loop-Block.

Diese Seite können Sie gestalten, wie Sie wollen. Ob mit großem Coverbild oder mit dem Medien-Text-Block. Wesentlich ist, dass Sie für die Ausgabe der Beiträge den Abfrage-Loop-Block einsetzen und ihm sagen, in welcher Form er welche Kategorie berücksichtigen soll. Und diese Seite können Sie dann auch in Ihr Menü integrieren.

Dann wird WordPress zwar immer noch die Kategorie Seite produzieren und anzeigen, wenn jemand auf den Kategorie-Link klickt. Aber daran ist ja nichts verwerflich.

Fazit

Sie sehen, es gibt verschiedene Wege und Möglichkeiten, das Erscheinungsbild einer Kategorie Seite zu beeinflussen. Welches das passende Vorgehen ist, hängt sicherlich vom aktiven Theme ab.

Bei einem herkömmlichen Theme müssen Sie vielleicht das Template für die Archive verändern. Bei einem Block Theme sollten Sie eine Vorlage für die Kategorien, die Sie modifizieren wollen, erst einmal erstellen. Aber das funktioniert sogar noch leichter, als eine statische Seite mit Abfrage-Loop-Block zu erstellen. Denn die Vorlage wird Ihnen die Beitragsabfrage bereits liefern.

Ihre Veränderungen im Block Theme sollten übrigens das nächste Theme-Update überleben. Zur Sicherheit können Sie aber auch für das Block Theme ein Child Theme erstellen. Entweder manuell – oder mit Hilfe des Plugins Create Block Theme.

Beitragsbilder: Britta Kretschmer