Home » 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.
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 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 beinhaltet einen Block Seitenliste , diese besteht nach der Installation nur aus einer Seite, der Beispielseite .
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
der Navigation hinzufügen kann.
Es gibt als 3 Gruppen von Blöcken, die sinvoll in einer Navigation untergebracht werden können: Design-Blöcke, Widgets und Theme-Blöcke.
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.
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
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.
Auch hier wieder die selben Attribute, gedacht ist dieser Block um Beiträge in der aktuellen WordPress-Installation im Menü zu verlinken.
Der Home-Link kennt keine Attribute, der Link wird automatisch zur Seite gesetzt die im Dashboard > Einstellungen > Lesen als Homepage der Website definiert wurde.
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.
5 Attribute, dient dazu auf die Archivseite der Tags zu verlinken, analog zu den Kategorie-Links.
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.
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).
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.
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.
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.
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.
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.
Zeigt den Titel der Website an und kann optional mit der Homepage verlinkt werden.
Fügt je nach Anmeldestatus einen Link zum An- oder Abmelden in die Navigation ein.
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.
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 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.
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.
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.
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: 11. Februar 2024