Mobile Navigation in WordPress
Das Menü hinter dem Symbol öffnen
WordPress-Navigationsblock oder eigener Theme-Schalter: Entscheidend ist, welche Ausgabe Ihre Kopfzeile tatsächlich verwendet.
Navigationsblock · schematische Ansicht
Drei Einstellungen, sechs Ansichten
„Overlay-Menü“ wählt das Verhalten. Die tatsächliche Umschaltbreite kommt aus dem veröffentlichten CSS. Diese Karte trennt beides.
Im Site Editor
Den Navigationsblock auswählen
Illustration, keine WordPress-Oberfläche
- 1Design → Editor
- 2Kopfzeile öffnen
- 3Navigation wählen
- 4Einstellungen → Anzeige
01
Aus
WordPress blendet keinen Overlay-Schalter ein.
Links bleiben sichtbar
Kein Overlay-Schalter
Ob Links umbrechen, entscheidet das Theme-Layout.
02 · Standard
Mobil
Auf kleineren Ansichten öffnet ein Menü-Symbol das Overlay.
Links im Kopfbereich
Symbol öffnet Overlay
Die Einstellung enthält keine eigene Pixelzahl.
03
Immer
Das Menü-Symbol erscheint unabhängig von der Ansichtsbreite.
Auch breit als Overlay
Symbol bleibt sichtbar
Geeignet, wenn die Navigation bewusst immer verdeckt ist.
Die zweite Ebene
„Mobil“ ist ein Modus, kein Breakpoint-Feld
Der Editor bietet keine Zahl für die Umschaltbreite. WordPress Core liefert die responsive Regel; Theme- oder Plugin-CSS kann das Ergebnis verändern. Prüfen Sie deshalb die veröffentlichte Seite statt nur die Editor-Vorschau. Der beschriebene Weg gilt für Block-Themes und Themes mit Template-Bearbeitung. Fehlt „Design → Editor“, suchen Sie die mobile Darstellung in den Einstellungen Ihres Themes.
- BlockOverlay-Menü: Mobil
- Core-CSSschaltet die Darstellung
- Theme-CSSkann Regeln überlagern
- Frontendhier gilt das echte Ergebnis
Breakpoint finden: Ziehen Sie die Browserbreite langsam auf. Sobald Symbol und Links wechseln, markieren Sie das Symbol in den Entwicklerwerkzeugen. Unter „Styles“ sehen Sie die aktive Media Query und ihre Quelldatei.
Auf der veröffentlichten Seite
Den ganzen mobilen Weg prüfen
Beginnen Sie bei 320 CSS-Pixeln und wiederholen Sie den Weg direkt am Umschaltpunkt.
- TabSchalter erreichen
Ein sichtbarer Fokus und ein verständlicher Name kennzeichnen das Menü.
- Enter / LeertasteOverlay öffnen
Der Zustand wird als geöffnet vermittelt; das Menü liegt nicht unter dem Inhalt.
- TabLinks durchlaufen
Jeder Link nennt sein Ziel. Verdeckte Elemente geraten nicht in den Fokusweg.
- EscZurückkehren
Das Overlay schließt und der Fokus kehrt zum Menü-Schalter zurück.
Nutzen Sie den WordPress-Navigationsblock, prüfen Sie dessen Ausgabe zuerst unverändert. Eigene Schalter im Theme brauchen selbst einen Namen, einen verlässlichen Zustand und eine vollständige Tastatursteuerung.
Offizielle Referenzen
- WordPress: Navigation block Optionen Aus, Mobil und Immer
- WordPress: Navigation im Site Editor Menüs in Block-Themes bearbeiten
- W3C WAI: Disclosure Navigation Tastatur- und Zustandsmuster prüfen
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch Der eigene Theme-Schalter hat keinen Namen Regel button-name
Der WordPress-Navigationsblock erzeugt einen benannten Schalter. Bei einem selbst gebauten Theme-Schalter braucht das Symbol einen zugänglichen Namen.
Kritisch Ein Theme-Link besteht nur aus einem Symbol Regel link-name
Ein individuell gebauter Menüeintrag verlinkt nur Pfeil oder Symbol. Der sichtbare Seitentitel wird zum verständlichen Linktext.
Zum Mitnehmen
Eine eigene Theme-Navigation korrigieren
Nur wenn Ihr Theme keinen WordPress-Navigationsblock ausgibt: Name und Linktext direkt in der eigenen Komponente ergänzen.
Korrektur in 2 Schritten ansehen
Dem Menü-Symbol einen Namen geben
Das Symbol bleibt für Vorleseprogramme verborgen. aria-label liefert den Namen. aria-expanded startet bei false und muss im Theme-JavaScript beim Öffnen auf true wechseln.
KorrekturvergleichSchritt 1 · HTML Vorher
<button class="menu-toggle"> <svg aria-hidden="true"><use href="#icon-menu"></use></svg> </button>Nachher
<button class="menu-toggle" aria-label="Menü öffnen" aria-expanded="false"> <svg aria-hidden="true"><use href="#icon-menu"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Fahren Sie mit der Tab-Taste auf die drei Striche. Prüfen Sie Name und den Wechsel von aria-expanded beim Öffnen und Schließen.
Jedem Menüeintrag einen Linktext geben
Der Seitentitel steht im Link. Das Pfeilsymbol bleibt Dekoration und wird für Vorleseprogramme ausgeblendet.
KorrekturvergleichSchritt 2 · HTML Vorher
<li class="wp-block-navigation-item"> <a href="/leistungen/"> <span class="icon-arrow"></span> </a> </li>Nachher
<li class="wp-block-navigation-item"> <a href="/leistungen/"> Leistungen <span class="icon-arrow" aria-hidden="true"></span> </a> </li>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie das Menü und lesen Sie die Einträge laut vor. Jeder Eintrag nennt seine Seite.