Sticky Positionierung von Blöcken (z. B. Header mit Navigation) bei WordPress 6.2
Insbesondere bei der Navigation, also dem Menü hatte ich mir schon immer bei Block Themes wie z. B. Twenty Twenty-Three gewünscht, dass die Zeile oben „angeklebt“ bleibt. Sticky Positionierung wurde jetzt mit Gutenberg 15.0 realisiert und wird wohl auch noch in WordPress 6.2 einfließen. Dementsprechend benötigt man bei Block Themes wie z. B. Twenty Twenty-Three keine CSS-Regeln oder zusätzlichen Plugins mehr, um z. B. einen sticky header mit dem Menü zu verwirklichen.
Sticky Positionierung (z. B. Header mit Menü) bei WordPress 6.2
Zunächst mal: Was ist ein „Sticky Header“?
In der Regel hat man oben eine Menüzeile. Scrollt man runter, ist die Menüzeile weg. Wenn der Block (z. B. das Menü) auch beim Herunterscrollen der Seite im Ansichtsfenster (viewport) bleiben soll, dann wird das als „sticky“ bezeichnet. Auf unserer Website kannst du das sehen, wenn du weiter runterscrollst: Das Menü bleibt daher immer oben positioniert.
Es gibt massenweise Plugins mit vielen Einstellungsmöglichkeiten, die man in dem Fall nutzen könnte. Bis jetzt habe ich das immer mit ein paar CSS-Regeln umgesetzt. Ein zusätzliches Plugin ist nicht notwendig und mit WordPress 6.2 jetzt in der Regel auch überflüssig.
Wie das aussieht möchte ich anhand eines Beispiels erläutern:
Sticky Positionierung des Headers mit Menue
Zunächst ist es wichtig, dass der gewünschte Bereich gruppiert wird. Wenn ich also ein Template-Part „Haupt-Menüleiste“ mit der enthaltenen Navigation mit der Position „sticky“ versehen will, dann muss diese Menüleiste in eine Gruppe gepackt werden.
Danach kann man bei den Eigenschaften des Gruppen-Blocks auf das Zahnrad (Settings) klicken und findet weiter unten die Einstellung für „Position“. Dort kann man zwischen den Einstellungen „Standard“ oder „Oben gehalten“ (sticky) auswählen. Nachdem man die Einstellung auf „Oben gehalten“ geändert hat, bleibt die Menüleiste im Viewport.
Info
Leider ist das m. E. noch keine ideale Lösung. Offensichtlich funktioniert es nicht, wenn man bei dem Template-Teil die Einstellung „Sticky“ wählt. Ein Template-Teil muss zumindest z. Zt. immer noch gruppiert werden, damit das funktioniert – siehe auch das kurze Video.
In dem folgenden Issue wird das Problem auch beschrieben und offensichtlich wird daran gearbeitet. Weitere Links zum Issue habe ich weiter unten notiert.
Um das optisch noch etwas deutlicher zu machen, sollte man bei der übergeordneten Gruppe auch noch die Hintergrundfarbe (Background) entsprechend ändern, weil ansonsten der Hintergrund transparent ist. In dem folgenden Beispiel habe ich als Hintergrundfarbe schwarz eingestellt, die ich auch mit einer entsprechenden Transparenz versehen habe.
Update
10.4.2024: Mit einem leichtgewichtigen Plugin kann man jetzt bei Block Themes abgesehen von einem sticky header jetzt auch einen shrinked header erstellen. Was das ist und wie das geht, beschreibe ich in dem folgenden Beitrag.
Fazit
Endlich wurde eine Option realisiert, die ich schon lange beim Full Site Editing (FSE) vermisst habe. Bis dato musste man mit CSS-Regeln oder zusätzlichen Plugins dafür sorgen, dass der Header bei Block Themes sticky, also „festgeklebt“ war. Das geht jetzt mit Bordmitteln. Allerdings ist es wichtig, dass die entsprechenden Blöcke gruppiert sein müssen.
Wie das aussieht, kann man auf einer unserer Testinstanzen sehen.
Links und Quellen
- Sticky position block support
https://make.wordpress.org/core/2023/03/07/sticky-position-block-support/ - Revert: Make sticky block action on template part block #49219
https://github.com/WordPress/gutenberg/pull/49219 - Sticky Position: Add a „Make sticky“ action to the Template Part block #49085
https://github.com/WordPress/gutenberg/pull/49085 - Fixed / Sticky position follow up tasks #47043
https://github.com/WordPress/gutenberg/issues/47043 - Roadmap to WordPress 6.2
https://make.wordpress.org/core/2023/02/06/roadmap-to-6-2/ - Begin of Diskussion „Fixed Position Header and Footer Template Parts #30121“ in Mar 23, 2021:
https://github.com/WordPress/gutenberg/issues/30121 - What’s new in Gutenberg 15.0? (18 January):
https://make.wordpress.org/core/2023/01/20/whats-new-in-gutenberg-15-0-18-january/ - Gutenberg 15.0 Introduces “Sticky” Position Block Support, Adds “Paste Styles” Option:
https://wptavern.com/gutenberg-15-0-introduces-sticky-position-block-support-adds-paste-styles-option - Sticky Header: Themes Twenty Twenty-Two, Twenty Twenty-Three und Twenty Twenty mit ein paar CSS-Regeln aufpimpen:
https://haurand.com/twenty-twenty-sticky-header/ - Adding a sticky header or banner
https://wordpress.tv/2023/04/10/adding-a-sticky-header-or-banner/
Weitere Beiträge zum Thema
- Shrinked Header bei Twenty Twenty-Four
- WordPress: Sticky Footer
- Custom Fields bei Twenty Twenty Four: Template anpassen oder erstellen
- WordPress 6.5: Schriften (Fonts) und weitere neue Optionen
- Betatest WordPress 6.5
Mehr erfahren auf dieser Webseite
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.
- Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
- Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.
Beitrags-Kategorien
Allgemein (104) Anleitung (67) Block-Editor (44) CSS (10) Full Site Editing (32) Keine Anzeige (1) Plugins (28) Short News (1) Theme (21) Tipps (69) Veranstaltungen (3) WordPress (112)
Das muss aber aber für das Template jeder Seitenart (also Start, Blog, etc) separat gemacht werde, nur so als Hinweis.
Das kann ich nicht bestätigen: Wenn man z. B. nur die Navigation Sticky haben möchte und auch nur einen Header mit der Sticky Gruppe verwendet, dann wird ja dieser Header bei allen Templates verwendet. Dementsprechend braucht dann tatsächlich nur diese Gruppe mit der Navigation sticky zu sein.