Menüs und Navigation

Modul 4: Inhalte erstellen · Lesezeit: 7 Minuten

Lernziel: Nach dieser Lektion können Sie ein klares Menü erstellen, sowohl in einem Block-Theme als auch in einem klassischen Theme, und wissen Sie, was ein gutes Menü ausmacht.

Kernbegriffe: Navigationsblock, Website-Editor, Design > Menüs, Menüposition, Untermenü, angepasster Link, mobiles Menü, Footer-Menü, Linktext, Barrierefreiheit

Zwei Wege, abhängig von Ihrem Theme

Wo Sie das Menü erstellen, hängt von Ihrem Theme ab (Lektion 5.1):

• Block-Theme: Das Menü ist ein Navigationsblock im Kopf der Website. Sie bearbeiten es im Website-Editor (Design > Editor > Navigation, oder im Vorlagenteil Header).
• Klassisches Theme: Sie erstellen das Menü unter Design > Menüs und wählen dort eine Menüposition, die das Theme anbietet, wie „Hauptmenü" oder „Footer".

Sehen Sie unter Design kein Menüs, nur Editor? Dann verwenden Sie ein Block-Theme. Das ist eine häufige Verwirrung nach einem Themewechsel: „mein Menü ist weg". Das alte Menü existiert noch (es steht als Liste von Menüpunkten in der Datenbank), aber das neue Theme schaut an einer anderen Stelle. Im Website-Editor können Sie beim Navigationsblock ein bestehendes klassisches Menü importieren.

Was hinein kann

Ein Menüpunkt kann sein:

• eine Seite oder ein Beitrag Ihrer Website;
• eine Kategorie (dann verlinkt es auf das Archiv dieser Kategorie);
• ein angepasster Link: jede Adresse, auch zu einer anderen Website, oder ein Anker innerhalb einer Seite (/diensten/#prijzen);
• in einem Block-Theme auch andere Blöcke in der Navigation, wie ein Suchfeld, Social-Media-Icons oder eine Schaltfläche „Termin vereinbaren".

Menüpunkte können Sie untereinander als Untermenü verschieben: in einem klassischen Theme, indem Sie sie etwas nach rechts ziehen, im Navigationsblock mit „Untermenü hinzufügen" oder indem Sie einen Punkt auf einen anderen ziehen.

Ein Menüpunkt verlinkt auf eine Seite, hat aber ein eigenes Label. Passen Sie später den Titel der Seite an, ändert sich das Label im Menü nicht automatisch mit (in einem klassischen Menü nicht, im Navigationsblock abhängig davon, wie Sie den Punkt hinzugefügt haben). Prüfen Sie also nach einer Titeländerung auch das Menü.

Ein gutes Menü

Ein Menü ist kein Inhaltsverzeichnis Ihrer gesamten Website. Es ist ein Wegweiser zu den wenigen Stellen, zu denen die meisten Besucher wollen. Ein paar Richtlinien:

• Wenige Hauptpunkte: etwa fünf bis sieben. Mehr passt auf ein Smartphone ohnehin nicht, und Besucher lesen es nicht.
• Höchstens eine Ebene Untermenü. Ein Untermenü in einem Untermenü ist auf dem Smartphone schwer zu bedienen und für Screenreader verwirrend.
• Eine Untermenü-Überschrift ist auch ein Link. In vielen Themes öffnet ein Klick auf „Dienste" das Untermenü, aber „Dienste" ist selbst auch eine Seite. Sorgen Sie dafür, dass diese Seite existiert und etwas Sinnvolles zeigt, oder dass der Punkt eindeutig nur eine Überschrift ist.
• Gewöhnliche Wörter, die Besucher verwenden würden: „Preise", nicht „Unsere Investitionsmöglichkeiten".
• Kontakt und die wichtigste Aktion (Termin vereinbaren, bestellen) immer erreichbar, oft rechts im Menü oder als Schaltfläche.
• Rechtliche Links (Datenschutzerklärung, allgemeine Geschäftsbedingungen, Cookie-Einstellungen) gehören in ein Footer-Menü, nicht in das Hauptmenü. Aber immer auffindbar, auf jeder Seite (Lektion 9.3).

Mobil und barrierefrei

Auf einem Smartphone klappt das Menü meist zu einer Schaltfläche mit drei Strichen zusammen (das „Hamburgermenü"). Beim Navigationsblock stellen Sie ein, wann das geschieht (immer, oder nur auf kleinen Bildschirmen). Testen Sie es immer auf einem echten Smartphone:

• Können Sie jeden Punkt mit dem Daumen treffen, ohne versehentlich den Punkt daneben zu treffen?
• Öffnen sich Untermenüs mit einem Tippen und schliessen sich auch wieder?
• Schliesst sich das Menü, wenn Sie einen Punkt wählen?

Für Barrierefreiheit (Besucher mit einem Screenreader oder die nur die Tastatur verwenden) achten Sie auf:

• Klare Linktexte. „Weiterlesen" oder „Hier klicken" sagt nichts, wenn ein Screenreader alle Links nacheinander vorliest. „Mehr über unsere Öffnungszeiten lesen" schon.
• Bedienung mit der Tastatur: mit Tab durch das Menü, mit Absenden einen Punkt öffnen. Die meisten Themes und der Navigationsblock tun das gut; selbstgemachte Menüs mit Skripten oft nicht.
• Ein Link zu einer anderen Website öffnet sich am besten im selben Fenster. Muss es in einem neuen Fenster sein, geben Sie das dann an.

Andere Navigation

Neben dem Hauptmenü helfen diese Elemente Besuchern, sich zurechtzufinden:

• ein Suchfeld (der Suchblock), besonders bei einer Website mit vielen Beiträgen;
• Breadcrumbs („Home > Dienste > Webdesign"), oft von einem SEO-Plugin oder dem Theme bereitgestellt;
• interne Links in Ihren Texten zu anderen Seiten (auch gut für die Auffindbarkeit, Lektion 9.2);
• eine 404-Seite, die hilft: mit einem Suchfeld und Links zu den wichtigsten Seiten anstatt nur „nicht gefunden". Bei einem Block-Theme bearbeiten Sie diese als Vorlage „404" im Website-Editor.

In der Praxis: So sieht es in einem Panel aus

Im Dashboard von WordPress:

• Block-Theme: Design > Editor > Navigation. Wählen Sie das Menü, fügen Sie Punkte mit dem Plus-Symbol hinzu, ziehen Sie sie in die richtige Reihenfolge und wählen Sie in den Einstellungen des Navigationsblocks, wann das mobile Menü erscheint.
• Klassisches Theme: Design > Menüs. Erstellen Sie ein Menü, haken Sie links Seiten an und klicken Sie auf Zum Menü hinzufügen, ziehen Sie die Reihenfolge, und haken Sie unten die Menüposition an. Speichern.

Zusammenfassung

• In einem Block-Theme erstellen Sie das Menü mit dem Navigationsblock im Website-Editor; in einem klassischen Theme unter Design > Menüs mit einer Menüposition.
• Ein Menü weist den Weg zu einigen wichtigen Stellen: wenige Punkte, höchstens eine Ebene Untermenü.
• Rechtliche Links gehören in ein Footer-Menü, immer auffindbar.
• Testen Sie das mobile Menü auf einem echten Smartphone und verwenden Sie Linktexte, die für sich selbst etwas aussagen.
• Ein Suchfeld, interne Links und eine hilfreiche 404-Seite ergänzen das Menü.

Quiz

Aufgabe

Aufgabe D4.3: Ein Menü, das funktioniert. Erstellen (oder verbessern) Sie das Hauptmenü Ihrer Website mit höchstens sieben Hauptpunkten, einem Untermenü und einem angepassten Link, sowie ein Footer-Menü mit Ihrer Datenschutzerklärung. Testen Sie das mobile Menü auf Ihrem Smartphone und nur mit der Tastatur (Tab und Absenden). Haken Sie ab, was funktioniert, und notieren Sie: welche Art von Theme Sie haben (Block oder klassisch), wo Sie das Menü erstellt haben und welchen Linktext Sie verbessert haben und wie?

Weiterlesen

Für die Arbeit in WordPress selbst haben wir noch keine eigenen Artikel; die offizielle Dokumentation von WordPress ist umfangreich.

• Navigationsblock (wordpress.org, Englisch): https://wordpress.org/documentation/article/navigation-block/
• Menüs in klassischen Themes (wordpress.org, Englisch): https://wordpress.org/documentation/article/appearance-menus-screen/
• Website-Editor (wordpress.org, Englisch): https://wordpress.org/documentation/article/site-editor/