Der Header

Während der Bauarbeiten wollte ich einen kleinen Hinweis für Besucher zeigen, dass an der Site gerade gebastelt wird, und dazu brauchen Sie in einem Block-Theme kein Plugin, denn einen solchen Hinweis können Sie ganz einfach im Header einbauen.

Eine Hinweiszeile im Header einfügen

Die Bearbeitung des Headers funktioniert zunächst wie in Block-Themes anpassen: 1. Header beschrieben.

Oberhalb der bestehenden Gruppe habe ich dann noch eine Gruppe mit dem Hinweis auf die Bauarbeiten eingefügt. Eine solche Topbar ganz oben im Header kann man später natürlich auch für andere Hinweise nutzen.

Ein harter Farbverlauf für den Kopfbereich

Der von Haus aus weiße Header sollte etwas Farbe bekommen. Twenty Twenty-Four kommt mit diversen vorgefertigten harten Farbverläufen, die man einfach auswählen und anpassen kann:

1. Die Gruppe im Header markieren und den Hintergrund gestalten.
2. Auf das Register Verlauf wechseln und einen harten Farbverlauf auswählen.
3. Den Winkel von 180° auf einen passenden Wert ändern (im Beispiel 63°).

Im Inhaltsbereich werden diese Änderungen live angezeigt.

Untertitel für Tablet und Mobil ausblenden

Webseiten werden in den verschiedensten Umgebungen dargestellt, und daher habe ich mit einem Tool wie Twentig in diesem Schritt die Sichtbarkeit von verschiedenen Elementen konfiguriert.

Zunächst einmal wird der Untertitel der Website für Tablet und Mobil ausgeblendet. Am Desktop ist Platz genug dafür, aber auf schmaleren Bildschirmen soll der Untertitel einfach verschwinden. Mit Twentig ist das kein Problem:

1. Den Untertitel der Website markieren
2. Im Block-Inspektor das Register Stile öffnen
3. Ganz unten den Bereich Visibility (TW) öffnen
4. Die Optionen Hide on Tablet und Hide on Mobile aktivieren.

Normalerweise ist nur der Titel der Website als Link zur Startseite anklickbar. Mit Twentig kann man aber auch den Untertitel zum Link werden lassen, sodass es egal ist, ob man auf den Titel oder den Untertitel klickt. Dazu markieren Sie den umgebenden Zeile-Block und wählen im Block-Inspektor auf dem Register Einstellungen im Bereich Link settings (TW) die Option Stretch link. Fertig.

Link zur Startseite nur im mobilen Overlay-Menü

Für Desktop und Tablets ist ein Link zur Startseite in der Navigation nicht nötig, da der Titel der Website bereits als Link zur Startseite fungiert. Im Overlay-Menü auf mobilen Geräten ist der Website-Titel aber nicht sichtbar, und deshalb soll hier der Menüpunkt Startseite angezeigt werden.

Eine Anleitung dazu finden Sie im Beitrag Block-Themes anpassen: 1. Header und die folgende Abbildung zeigt das Ergebnis.

Mit Twentig kann man auch den aktiven Menüpunkt hervorheben: Navigationsblock markieren, im Block-Inspektor auf dem Register Stile den Bereich Link Style (TW) öffnen und für Active Style eine Option wie Border auswählen.

Eine Suchfunktion in der Navigation

In einem Blog mit über 100 Beiträgen ist eine Suchfunktion eine gute Idee. Am liebsten hätte ich sie neben der Header-Navigation, und zwar zunächst nur als Lupe, die nach einem Klick darauf ein Eingabefeld einblendet.

Der Standard-Block Suchen erfüllt diese Wünsche von Haus aus, und das geht so:

1. Den Navigationsblock im Header markieren.
2. Am Ende der Navigation den Block Suchen hinzufügen und markieren.
3. Auf der Block-Werkzeugleiste die gut versteckte Option Nur Button aktivieren.

Der Lupe-Button in der Navigation bekommt die für Buttons definierte Hintergrundfarbe, und nach einem Klick darauf wird das Eingabefeld für die Suchbegriffe eingeblendet.

In Twenty Twenty-Four haben viele Elemente leicht abgerundete Ecken mit einem Radius von 0,33rem, und das kann man für den Such-Button auch so einstellen.

Der Lupe-Button wurde bei mir rechts etwas abgeschnitten und brauchte daher noch eine CSS-Regel, die man in der Abteilung Stile in der Option Zusätzliches CSS speichern kann:

/**
  * Such-Button vollständig anzeigen 
  */ 

.wp-block-search.wp-block-search__button-only .wp-block-search__button {
    max-width: none;
}

Stile: Schrift und Farben gestalten

Die Struktur der Website steht soweit. Die Navigation funktioniert und Header und Footer enthalten die wichtigsten Infos. Weiter geht’s mit dem Styling.

Im Beitrag Block-Themes anpassen: 4. Stile habe ich ausführlich beschrieben, wie das geht, und Header und Footer sehen nach diesen Schritten so aus wie in der folgenden Abbildung.

/* Links mit farbiger Unterstreichung */ 

a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--contrast);
  text-decoration-color: var(--wp--preset--color--accent-3);
  text-decoration-thickness: 1px; 
  text-underline-offset: 0.15em; 
} 

/* Externe Links mit Nordwest-Pfeil */ 
a[target="_blank"]:not(figure a):not(.wp-block-button__link)::after {
  content: "\00a0\2197"; 
}

/** 
  * Silbentrennung 
  */ 

body { 
  hyphens: auto; 
} 

Fazit: Die Umstellung hat sich gelohnt

Eine Theme-Umstellung ist immer ein Haufen Arbeit, aber ich bin froh, dass ich den Umstieg auf Twenty Twenty-Four gemacht habe:

• Twenty Twenty-Four ist klasse.
  Auch wenn ich die mitgelieferten Vorlagen für Abschnitte und Seiten bisher kaum genutzt und eine eigene Farbpalette erstellt habe, ist das Theme eine gute Grundlage.
• Der Website-Editor ist klasse.
  Für Nicht-Programmierer wie mich eröffnet Full Site Editing mit dem Website-Editor völlig neue Möglichkeiten bei der Anpassung von Themes, und die möchte ich nicht mehr missen. Bei der Benutzerfreundlichkeit ist definitiv noch Luft nach oben, aber das wird schon werden. Da sind gute Leute am Werk.
• Twentig ist (immer noch) klasse.
  Das Plugin war früher eine perfekte Ergänzung für das klassische Theme Twenty Twenty und hat sich inzwischen zu einem Toolkit für Block-Themes entwickelt. Viele nützliche Kleinigkeiten erweitern den Website-Editor genau an den richtigen Stellen.

Die Umstellung auf ein Block-Theme hat sich gelohnt, und ich bin froh, dass ich es gemacht habe.

PS: Fachlektorin und Co-Autorin Annette Schwindt hat Ihre berufliche Website ebenfalls auf TT4 umgestellt: annetteschwindt.digital.