WordPress-Navigation erstellen
Ein Menü, das sein Ziel nennt
Menüpunkt und Menüblock: zwei Stellen im ausgegebenen HTML.
Zwei Editor-Wege
Vom Theme zum fertigen Hauptmenü
Erkennen Sie zuerst Ihren Editor. Die Bilder führen Sie dann bis zur veröffentlichten Navigation.
- Unter Design: „Editor“Block-Theme → Navigation-Block
- Unter Design: „Menüs“Klassisches Theme → Menü + Anzeigeort
- DanachVeröffentlichte Website prüfen
Block-Theme: im Website-Editor
Dieser Weg gilt, wenn Design → Editor sichtbar ist.
- 1Unter „Navigation“ das gewünschte Menü öffnen.
- 2Den Navigationsblock in der Kopfzeile markieren.
- 3Über „＋“ Seitenlinks ergänzen und eindeutig benennen.
- 4Oben „Speichern“ wählen und die Änderung bestätigen.
Klassisches Theme: auf der Menüseite
Dieser Weg gilt, wenn Design → Menüs sichtbar ist.
- 1„Erstelle ein neues Menü“ wählen und „Hauptmenü“ nennen.
- 2Seiten auswählen und mit „Zum Menü hinzufügen“ übernehmen.
- 3Einträge ziehen; eingerückte Einträge werden Unterpunkte.
- 4Den Anzeigeort des Themes wählen und „Menü speichern“.
Beide Wege führen hierher
Das Ergebnis zählt auf der Website
Der Editor verwaltet die Einträge. Ob das Theme sie verständlich ausgibt, sehen Sie erst auf der veröffentlichten Seite.
- „Leistungen“ nennt das Ziel besser als ein Symbol allein.
- Die sichtbare Reihenfolge entspricht der Lesereihenfolge.
- Jede Navigation erhält einen unterscheidbaren Namen.
Das semantische Prüfbild
Themes ergänzen Klassen und mobile Schalter. Diese Struktur zeigt die entscheidenden Beziehungen: Navigation, Liste, Links und aktuelle Seite.
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/" aria-current="page">Start</a></li>
<li><a href="/leistungen">Leistungen</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>So prüfen Sie es
Öffnen Sie die Website außerhalb des Editors.
- Tab: Der Fokus erreicht jeden sichtbaren Menüpunkt.
- Enter: Jeder Link öffnet das angekündigte Ziel.
- 200 % Zoom: Die Reihenfolge bleibt verständlich.
- Mobil: Ein aufklappbares Menü funktioniert mit Enter und Leertaste.
Aus dem Prüfbericht
Zwei Stellen im Menü, zwei Befunde
Kritisch Ein Menüpunkt ohne Wort Regel link-name
Steht im Menü nur ein Symbol oder ein Bild, bleibt der Link namenlos. Der Menütitel aus dem Editor gehört als Text in den Link.
Kritisch Der Menüblock gibt keine Liste aus Regel list
Stehen die Punkte als divs im Container, fehlt die Anzahl. Der Navigationsblock gibt ul und li aus, eigene Vorlagen sollten das auch.
Zum Mitnehmen
Das Menü, korrigiert
Ein Wort im Link, eine Liste im Markup.
Korrektur in 2 Schritten ansehen
Jedem Menüpunkt sein Wort geben
Ein Symbol allein nennt kein Ziel. Der Menütitel steht als Text im Link, das Symbol bleibt daneben ausgeblendet.
KorrekturvergleichSchritt 1 · HTML Vorher
<li class="menu-item"> <a href="/leistungen"><span aria-hidden="true">★</span></a> </li>Nachher
<li class="menu-item"> <a href="/leistungen"><span aria-hidden="true">★</span> Leistungen</a> </li>Markierte Zeilen wurden geändert
So prüfen Sie es Im Menü steht neben jedem Symbol ein Wort. Kein Punkt bleibt leer.
Das Menü als Liste ausgeben
Der Navigationsblock schreibt die Punkte in ul und li. Ein reiner div-Container nimmt der Navigation ihre Anzahl.
KorrekturvergleichSchritt 2 · HTML Vorher
<nav class="wp-block-navigation"> <div class="wp-block-navigation__container"> <a class="wp-block-navigation-item__content" href="/leistungen">Leistungen</a> </div> </nav>Nachher
<nav class="wp-block-navigation"> <ul class="wp-block-navigation__container"> <li class="wp-block-navigation-item"> <a class="wp-block-navigation-item__content" href="/leistungen">Leistungen</a> </li> </ul> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt beim Betreten des Menüs die Zahl der Einträge.