WordPress Navigation

WP Grundlagen – Navigation

tl;dr: WP Grundlagen – Navigation (Menüs) soll dem User einer Seite helfen zur Information zu gelangen. In WordPress werden die Menüs nun als Templates organisiert die verschiedene spezielle Blöcke aufnehmen.

Üblicherweise werden Navigationen in Template-Teilen wie Header und Footer eingesetzt, können aber auch überall anders verwendet werden.

Navigation - ein Template und ein Block

WordPress hat mit der Einführung des Full-Site-Editing (FSE) den nächsten Schritt zur Integration vollzogen: alles soll möglichst gleich zu bearbeiten sein. Die alten Konzepte wie Sidebars, Widgets, etc werden ersetzt. Eines dieser alten Konzepte war das Menü, das unter Dashbord > Design > Menus zu finden war (und bei allen Themes die keine Block-Themes sind, auch noch ist).

In den Blockthemes wurden die Menus nun im Template Navigation untergebracht. Leider wurde es dadurch ein wenig komplizierter als früher, Navigationen zu gestalten.

Navigation als Template
Im FSE-Editing ist die Navigation (hier rot) ein Template, das in einem Template-Teil (hier im Header, blau) untergebracht wurde.

Navigation ist einerseits ein zu konfigurierender Bereich, eben ein Template - andererseits aber auch ein Block, der eingesetzt werden kann. Man muss also zuerst die Navigation selber erstellen (das Menü) und andererseits dieses Menü in einem anderen Template (Header, Footer, ...) unterbringen und dort konfigurieren.

Um das zu verstehen ist es am einfachsten, sich die Vorgabe nach der Default-Installation mit TT4 anzusehen:

Dashboard > Design > Website-Editor > Navigation | Bearbeiten

Es kann mehr als eine Navigation geben, es ist aber eine gute Idee diesen vorinstallierten Block gleich zu verwenden. 

In der Listenansicht (linke Spalte) wird deutlich: Die Navigation Navigation beinhaltet einen Block Seitenliste WP Pages , diese besteht nach der Installation nur aus einer Seite, der Beispielseite WP Page. 

Schaut man sich nun die rechte Seitenleiste an findet man unter > Block den Abschnitt Menü mit der Auflistung der aktuellen Seiten. Darunter die Einfügemarke für weitere Blocks über die man 

  • Seitenlink, Abstandhalter, Individuellen Link, Buttons, Untermenü, Homelink, Schlagwortlink, Beitragslinks, Kategorielink
  • Seitenliste, Social Icons, Suchen
  • Website-Logo, Website-Titel, An-/abmelden

der Navigation hinzufügen kann. 

WordPress Navigation Standard
Die Navigation besteht aus dem Block Seitenliste, dieser wiederum aus der einzigen Seite Beispielseite.

Es gibt 3 Gruppen von Blöcken, die sinvoll in einer Navigation untergebracht werden können: Design-Blöcke, Widgets und Theme-Blöcke.

Blöcke für die Navigation

Im Theme Twenty Twenty-Four gibt es von Anfang an 15 Blöcke, die man in der Navigation einsetzen kann. Je nach Block kann man unterschiedliche Einstellungen vornehmen, wie das mit den Farben und der Typographie passiert kann man in den jeweiligen Beiträgen nachlesen. Zusätzlich gibt es für die Links in der Navigation die Option

Größe > Breite 

einzustellen. Hier gibt es 3 Möglichkeiten. Anpassen (default) passt die Breite des Blocks jener des Blockinhaltes an. Füllen führt dazu, dass der mögliche Platz ausgenutzt wird und Festgelegt erlaubt die Eingabe einer fixen Breite. 

Design Blöcke für die Navigation

Widgets für die Navigation

Theme-Blöcke für die Navigation

Seitenlink

Einstellbar sind Label, Url, Beschreibung, Titel, Rel-Attribut
Die einfachste Form eines Menüeintrages ist einfach der Permalink zu einer Seite innerhalb der aktuellen WordPress-Installation

Individueller Link

Bietet die selben Attribute wie auch der Seitenlink an. Der Unterschied dazu ist nur, dass hier jeder beliebige Link (andere Websites, etc.) für diesen Block vorgesehen sind.

Beitragslink

Auch hier wieder die selben Attribute, gedacht ist dieser Block um Beiträge in der aktuellen WordPress-Installation im Menü zu verlinken.

Home-Link

Der Home-Link kennt keine Attribute, der Link wird automatisch zur Seite gesetzt die im Dashboard > Einstellungen > Lesen als Homepage der Website definiert wurde.

Kategorie-Link

Hier sind wieder die 5 Attribute möglich, vorgesehen ist der Block-Typ um Beitragskategorien (bzw. die Archivseiten) zu verlinken, die default unter ../category/Kategorienname angezeigt werden.

Schlagwort-Link

5 Attribute, dient dazu auf die Archivseite der Tags zu verlinken, analog zu den Kategorie-Links.

Buttons

Fügt den Block Buttons, der dann die einzelnen Button-Blöcke zusammenfasst, hinzu. Beschreibung im Artikel zu Layout mit Blöcken, es können Anordnung und Richtung des Button-Containers definiert werden bzw. 4 Breiten in % der einzelnen Buttons.

Abstandhalter

Dient dazu Weissraum in der Navigation hinzuzufügen. Die Höhe ist einstellbar, die Breite wie bei den anderen Navigationsblöcken auch. Der Block beherrscht auch den Aussenabstand (margin).

Untermenu

Dieser Block dient dazu Untermenüs zu erstellen. Der Eintrag selber kann wie ein anderer Link (zB Seitenlink) konfiguriert werden. Als Inhalt eines Untermenus wird eine Seitenliste hinzugefügt in der man dann die Menüpunkte eintragen kann.

Seitenliste

Die Seitenliste wird mit den veröffentlichten Seiten auf deiner Website synchronisiert. Löse die Seitenliste, um selbst Seiten hinzuzufügen, zu löschen oder neu anzuordnen.
Wer Seiten mit Unterseiten erstellt kann hier auch eine Seitenliste nur zu einer ausgewählten, übergeordneten Seite erstellen.

Suchen

Fügt eine Suchmaske in der Navigation ein. Zusätzlich zu Farbe, Typographie und Größe können Ränder und ein Radius eingetragen werden, um die Suchmaske dem Design der Seite besser anzupassen.

Social Icons

Funktioniert sehr ähnlich wie die Buttons. Durch hinzufügen einzelner Dienste werden die Icons mit Linkmöglichkeit in diesem Widget zusammengefasst. Jeder Link kann einen Label bekommen, IconFarbe und Hintergrundfarbe kann definiert werden.

Website-Logo

Dieses Widget erlaubt das hinzufügen/hochladen eines Logos für die Website. Ob dieser Block im Header oder in der Navigation zum Einsatz kommt hängt von der Gestaltung ab.

Website-Titel

Zeigt den Titel der Website an und kann optional mit der Homepage verlinkt werden.

An-/abmelden

Fügt je nach Anmeldestatus einen Link zum An- oder Abmelden in die Navigation ein.

Wahl unterschiedlicher Navigationen

Out of the Box wird TT4 mit einer Navigation installiert die mit den oben beschriebenen Blöcken zu ändern ist. Manchmal benötigt man aber mehr als eine Navigation für eine Website. Wer ein weiteres Menü benötigt muß entweder duplizieren oder den Menüeintrag bearbeiten:

Wenn man über

Dashboard > Design > Website-Editor > Navigation 

den Block ausgewählt hat kann man über das vertikale More-Menu   die Funktionen zum Umbenennen, Duplizieren und Löschen erreichen. Damit kann man über den Umweg Duplizieren und Umbenennen eine zweite Navigation erstellen.

WP Navigation Umbenennen
Der Navigations-Block kann umbenannt und dupliziert werden.

Damit kann man sich zB. eine Navigation für den Footer erzeugen. Um diesen nun im Template-Teil Footer einzusetzen muß zuerst der Footer

Dashboard > Design > Website-Editor > Vorlagen >Template-Teile > Footer

aufgerufen werden.  Danach wird der Block Navigation Navigation an gewünschter Steller platziert.

Bei aktiviertem Block kann man im rechten Sidebar unter dem Icon Listenansicht nicht nur die Menüeinträge bearbeiten, sondern über das More-Menü aus den vorhandenen Menüs wählen. 

Über die hier versteckte Funktion Neues Menü erstellen kann man auch eine weitere Navigation erstellen, die man dann wieder umbenennen muss.

Nein, es ist nicht logisch und auch nicht konsistent wie das Handling und die Benennung der Teile hier umgesetzt wurde. Schade.

WordPress Navigation Menu
Über den Sidebar-Punkt Menü lässt sich aus mehreren Navigationen auswählen und ein neues Menü erstellen.

Gestaltung des Navigation Blocks

Wo immer man den Block Navigation einsetzt (in einem Template-Teil, einem Template oder auf einer Seite) stehen natürlich auch einige Gestaltungsmöglichkeiten zur Verfügung, die wie immer in Gutenberg im rechten Sidebar untergebracht wurden.

Layout.

Hier kann die Anordnung links, zentriert, rechts und Abstand dazwischen gewählt werden. Das funktioniert nur, wenn die Breite des Blocks breiter als dessen Inhalt ist! 

Mittels der Einstellung Richtung kann aus einer Horizontalen eine Vertikale Navigation gemacht werden. 

Erlaubt man den Zeilenumbruch werden Menübegriffe die aus mehreren Worten bestehen bei Bedarf umbrochen.

Darstellung. 

Hier wird eingestellt, ob das Menü ausgeschrieben wird oder unter einem Icon verborgen werden soll. 

Im Iconbereich (graue Fläche) kann man zwischen 2 Hamburgermenü-Icons auswählen (2 Linien oder 3 Linien), weiters kann man generell zwischen Icons und Text umschalten.

Overlay-Menü ist jener Bereich wo man einstellt, ob das Menü nie (Aus), nur auf Mobilgeräten oder Immer als Menü-Icon dargestellt werden soll. 

Unter Erweitert kann man den Namen des Menüs ändern und dieses auch Löschen und wie immer auch CSS-KLassen zuweisen.

Eine Besonderheit ist der Punkt Stile. Hier gibt es eine Funktion Global anwenden die dazu führt, dass die hier getroffenen Einstellungen auf alle Navigations-Blöcke der Website angewendet werden sollen.

WP Block Navigation Einstellungen
Die Einstellungen für den Block Navigation.

Farbe. 

Neben den üblichen Farbeinstellungen kann man hier auch 2 weitere Farben bestimmen: Untermenü- und Overlay-Text sowie Untermenü- und Overlay-Hintergrund. 

Diese beiden Farben werden dann wirksam, wenn man über den Block Untermenü ein solches erzeugt hat. 

Typographie.

Die Einstellungen hier sind wie überall anders auch. 

Grösse.

Hier gibt es - ähnlich wie bei den anderen Layout-Blöcken - die Möglichkeit, den Blockabstand zwischen den einzelnen Menü-Blöcken zu verändern.

Breite. 

Funktioniert wie bei den anderen Menüpunkten weiter oben beschrieben. 

WP Navigation Stile
Im Stile Bereich wird das Aussehen des Blocks Navigation definiert.

Fazit

Leider liegt es in der Natur der Sache, dass die Konfiguration eines Navgiationsbereichs nicht ganz trivial ist. Ich gehe davon aus, dass in diesem Bereich noch nachgebessert wird - was wo zu finden ist scheint mir nicht immer schlüssig. 

Gut sind die erweiterten Möglichkeiten im Vergleich zu klassischen Menüs früherer WP-Generationen. So kann man in einer Navigation verschiedene Blöcke wie Buttons und Seitenlisten kombinieren und dadurch komplexere Strukturen erzeugen, die funktional bald die eines klassischen Mega-Menüs erreichen.

Veröffentlicht am: 10. Februar 2024
Letztes Update am: 15. August 2026

Hinterlasse den ersten Kommentar