Seitenleiste bei Block Themes

Seitenleiste bei Block Themes wie Twenty Twenty-Five

An sich sind Seitenleisten auf Websites nicht mehr so häufig anzutreffen. Trotzdem kann es durchaus Fälle geben, wo eine Seitenleiste Sinn macht. Wie man eine Seitenleiste bei einem Block Theme wie z. B. Twenty Twenty-Five erstellt, erkläre ich in diesem Beitrag.

Im Forum gibt es hin und wieder Fragen dazu, wie man Seitenleisten bei einem Block Theme wie beispielsweise Twenty Twenty-Five implementiert. Es gibt allerdings auch durchaus Block Themes wie z. B. Ollie, die bereits Templates mit Seitenleiste anbieten

Hier beschreibe ich die Vorgehensweise speziell bei Twenty Twenty-Five:

• Im Backend Design > Editor > Templates wählen
• Dann oben rechts auf den Button „Template hinzufügen“
• Den exemplarischen Aufbau des (neuen) Templates sieht man in dem nachfolgenden Screenshot.
• Die Breite des Inhaltsbereichs (Content Block) nur für das neue Template ändern. Das kann man beim Spalten-Block in dem Template über die Änderung auf „Weite Breite“ erreichen.
• Alternativ kann man auch unter Design > Stile > Layout > Breite die Breite des Inhaltsbereichs für alle Templates ändern (z. B. 1024px). Das betrifft dann wie bereits erwähnt allerdings sämtliche Templates, also auch die Templates, die das Theme (hier Twenty Twenty-Five) beinhaltet.

Im Beispiel habe ich auch noch zusätzlich den Inhalt Block auf „Weite Breite“ geändert:

Anschließend kann man den Seiten, die mit einer Seitenleiste gezeigt werden sollen, dieses Template zuweisen. Das geht an sich recht einfach über die Schnellbearbeitung. Soll das bei mehreren Seiten gemacht werden, dann kann man auch die gewünschten Seiten ankreuzen und über „Mehrfachaktionen“ > „Anwenden“ das Template zuordnen.

Eine optimierte Version des Templates mit Seitenleiste

Matthias Kittsteiner (herzlichen Dank für den Hinweis) hat mich im Kommentar darauf hingewiesen, dass die Lösung hinsichtlich der Semantik optimiert werden sollte. Aus dem Grund habe ich folgende Änderungen durchgeführt:

• Erstellung eines (synchonisierten) Patterns „Seitenleiste“ als Gruppe
• Zuweisung <aside> als HTML-Element beim Gruppenblock unter „Erweitert“ rechts unter Einstellungen.

Diese Änderung ist auch bezogen auf die Barrierefreiheit von Bedeutung, siehe auch Building Sidebars With the Site Editor. Das hatte ich leider übersehen.

Abschließende Hinweise

• Sollen alle Seiten eine Seitenleiste enthalten, dann kann man natürlich auch das Standard-Template „Seiten“ entsprechend anpassen.
• Sollen alle Beiträge eine Seitenleiste enthalten, dann muss man auch das Standard-Template „Einzelne Beiträge“ entsprechend anpassen.

Hier nun das Resultat bei einer Seite, die ich mit WordPress Playground erstellt habe. Gezeigt wird auch, dass bei schmaleren Displays (z. B. Smartphone) die zweite Spalte, die die Seitenleiste enthält unter die erste Spalte rutscht:

Fazit

Die Erstellung eines Templates mit einer Seitenleiste kann man bei Block Themes recht schnell erledigen.

Weitere Beiträge zum Thema

• 11 Jahre im WordPress-Universum
• Seitenleiste bei Block Themes
• Child Theme mit Create Block Theme erstellen
• Block Theme: Template-Teil in Template einfügen
• theme.json: Globale Blöcke wie Buttons bei Block Themes gestalten

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden. Hier die bisher versendeten Newsletter

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.