Wordpress: Unterschätze nie die Macht von Archiven

Letztes Update:
von sanchez.s
WordPress Unterschätze nie die Macht von Archiven

Archiv – das Wort erinnert an eine staubige Bibliothek und hört sich langweilig an. Im Webdesign sind Archive aber mächtig und total praktisch.

In Archiven fasst du deine Beiträge neu zusammen. Archive sind eine Selektion von Artikeln und bilden sich aus Taxonomie-Begriffen.

Ein Beispiel: Dein Nachrichten-Portal hat die Taxonomie Ressort mit dem Taxonomie-Begriff Politik. Im Politik-Archiv findest du alle Nachrichten, die du den Taxonomie-Begriff Politik zugewiesen hast in chronologischer Reihenfolge.

Schreibst du eine neue Nachricht über Politik, erscheint sie nicht nur in deinem Newsfeed, sondern eben auch im Politik-Archiv.

Allgemeines Archiv und Autoren-Archiv

Für dein Nachrichten-Portal baust du 2 Archive: Ein allgemeines Nachrichten-Archiv für die Taxonomien „Typ“, „Thema“ und „Ressort“ und ein spezielles Archiv für deine „Autoren“.

Das Nachrichten-Portal würde ohne Probleme mit einem einzigen Archiv für alle Taxonomien funktionieren, aber ich schlage vor, dass Autoren-Archiv ein kleines bisschen anders zu gestalten.

Archive anlegen

Lege zunächst beide Archive an, bevor du mit der Gestaltung beginnst.

Das allgemeine Nachrichten-Archiv nennst du „Archiv“ und weist ihm die Taxonomien „Typ“, „Thema“ und „Ressort“ zu. Jetzt weiß deine Website, dass es für die Archive dieser Taxonomien auf diese Archiv-Vorlage zugreifen muss.

Das zweite Archiv nennst du „Autoren-Archiv“ und weist ihm die Taxonomie „Autor“ zu.

Außerdem soll bei beiden Archiven in der Vorschau unser selbst definierter Post Type Nachrichten erscheinen.

Öffne nun beide Archive und starte mit der Gestaltung des allgemeinen Archivs.

Allgemeines Archiv

Bild

Platziere ganz oben das Bild des jeweiligen Archivs.

In unserem Nachrichtenportal haben nur Themen oder Ressorts ein Bild, Typen nicht. Das haben wir zuvor festgelegt, als wir die Meta-Felder definiert haben.

Weil das Template für Ressorts und Themen funktionieren muss, setzt du das Widget Dynamic Image gleich zweimal, mit der Quelle „Themenbild“ und “Ressortbild“.

Befehle beiden Widgets, unsichtbar zu sein, wenn das Meta-Feld leer ist. Jetzt kannst du sicher sein, dass niemals beide Widgets gleichzeitig angezeigt werden. 

Titel

Den Archiv-Titel stellst du mit einem Dynamic Field mit der Quelle „Term“ und dem Feld „Term Name“ dar.

Setze das HTML-Tag H1. Da du die HTML-Tags zuvor im Theme Customizer zentral festgelegt hast, zieht sich WordPress die richtige Schrift und Farbe des Titels automatisch.

Leider wird hier kein Archiv-Titel als Preview automatisch angezeigt. Schreibe irgendein Wort in das Feld Fallback, um die korrekte Darstellung zu prüfen. Denke daran, es wieder zu löschen.

Beschreibung

Dupliziere das Dynamic Field und ändere die Quelle in Term Description, um die Archiv-Beschreibung zu ergänzen. Vergiss nicht, dem Widget zu befehlen, unsichtbar zu werden, falls keine Archiv-Beschreibung vorhanden ist.

Platziere einen gepunkteten Trenner, um Titel und Archiv-Beschreibung von der nachfolgenden Liste mit den Nachrichten optisch zu trennen.

Alle Beiträge

Jetzt kommst du zum eigentlichen Archiv. In einer Überschrift beschreibst du deinen Lesern, was jetzt folgt: Alle Beiträge dieses Archivs.

Liste

Füge nun ein Listing Grid mit dem Listing „Liste“ und einer Spalte in das Archiv ein und aktiviere die Funktion Use as Archive Template.

Jetzt weiß das Template, dass es immer die Beiträge des jeweiligen Taxonomie-Begriffs anzeigen soll. Aktivierst du Use as Archive Template, kannst du keine weiteren Abfrage-Parameter setzen.

Seitennavigation

Ergänze unter der Liste eine Seitennavigation. Dieses Widget funktioniert für eine Vielzahl an Elementor-Widgets und sogar für WooCommerce. Wir bauen unser Nachrichten-Portal aber mit JetEngine.

Du kannst entscheiden, ob deine Website das Archiv beim Klick auf die Seiten-Navigation neu laden soll oder mit AJAX nachträglich Daten schickt und auf den Reload verzichtet.

Ich bin kein Fan von AJAX, weil es recht fehleranfällig ist. 

Deaktiviere nun die Vor- und Zurück-Buttons, setze die Anzahl der Seiten, die links und rechts von der aktuellen Seite stehen auf „2“ und die Anzahl der Seiten am Anfang und am Ende auf „0“.

Richte zuletzt die Seitennavigation mittig aus und ergänze noch einige Abstände, um dem Archiv noch etwas mehr Luft zu geben.

Mehr Weißraum

Grundsätzlich gilt: Mit Abständen und Trennern schaffst du Weißraum und gibst deinen Inhalten Platz zum Atmen.

Wir neigen dazu, Website eher zu eng als zu weit zu bauen, deshalb sei großzügig mit deinen Abständen.

Habe keine Angst, dass du deine Seite für deine Nutzer unnötig in die Länge ziehst. Studien haben gezeigt, dass Menschen bereit sind, zu scrollen.

Abschreckend wirken eher zu viele unnötige Klicks und natürlich unnötiger Inhalt, der deine Seite in die Länge zieht, Weißraum aber nicht!

Autoren-Archiv

Jetzt erstellst du das Autoren-Archiv. Kopiere das zuvor gebaute Archiv und füge es in das Template des Autoren-Archivs ein.

Bild

Du benötigst keine zwei Dynamic Images mehr. Du weißt, dass dieses Template in der Taxonomie Autor ausgespielt wird. Lösche deshalb ein Dynamic Image und ändere im anderen die Quelle auf „Autorenbild“.

Füge einen weiteren Abschnitt mit zwei Spalten ein und ziehe das Bild in die linke Spalte. Den Archiv-Titel platzierst du in der rechten Spalte.

Das Autorenbild soll in seiner Spalte horizontal und vertikal mittig dargestellt werden.

Platziere ein Fallback-Image für das Autorenbild, damit du die Design-Änderung sofort nachvollziehen kannst. Setze einen Border-Radius, um das Bild an den Kanten abzurunden.

Den Titel zeigst du in seiner Spalte vertikal mittig an.

Kontakt-Leiste

Für das nächste Element bedienst du dich beim Template für deine Texte.

In einer Leiste sollen die Kontakt-Möglichkeiten des Autors dargestellt werden.

Die E-Mail-Adresse des jeweiligen Autors ziehst du aus dem Meta-Feld „E-Mail“ und änderst das Icon passend zur E-Mail in einen Briefumschlag.

Das gleiche wiederholst du für den Twitter-Account des Autors.

Um zu kontrollieren, ob alles richtig funktioniert, gebe ich „Bodo Beispiel“ und dem Ressort „Panorama“ ein paar Fake-Inhalte.

Der Rest bleibt gleich.

Page-Header löschen

Nach einem Blick auf das Archiv des Ressorts „Panorama“ fällt auf, dass am Anfang des Archivs der Archiv-Titel und die Archiv-Beschreibung ohne Layout erscheinen, obwohl wir das im Template nicht festgelegt haben.

Das liegt daran, dass das Kava Theme standardmäßig diesen Page-Header auf allen Archiven anzeigt. Leider habe ich noch keine andere Möglichkeit gefunden, diesen Header auszublenden, als die folgende kurze Zeile Code, die du im Theme Customizer hinzufügst.

.page-header {display:none}

Nach dem Klick auf „Veröffentlichen“ und dem Laden der Seite ist dieser nerviger Page-Header verschwunden und deine Archive erscheinen in ihrer ganzen Schönheit.

Apropos Schönheit. Das Autoren-Archiv könnte vor und nach der Social-Media-Leiste ein bisschen Weißraum vertragen.

Im nächsten Schritt entwirfst du deinen eigenen Header.

Das könnte dich auch interessieren

WordPress-Plugins erweitern deinen Blog um bestimmte Funktionen – und das...
Du hast dein eigenes Nachrichten-Portal gebaut. Nimm dir jetzt einen...
Deine Besucher starten immer seltener auf der Startseite – auch...
Footer-Seiten erstellen Bevor du deinen Footer entwickelst, sollten zunächst alle...

Kommentare

{{ reviewsTotal }} Review

{{ reviewsTotal }} Reviews

{{ options.labels.newReviewButton }}
{{ currentUserData.canReviewMessage }}