Die Bearbeitung der Header-Navigation im Website-Editor von WordPress 6.2

Twenty Twenty-Three: Die Navigation bearbeiten

In Teil 3 der Video-Reihe zum Anpassen von Twenty Twenty-Three geht es um die Bearbeitung von Navigationen im Website-Editor. Die wichtigsten Links kommen in den Header, die rechtlichen Pflichtlinks in den Footer.

Inhaltsverzeichnis

Das Video zur »Navigation«

Das Video zeigt in gut 11 Minuten das Wichtigste zum Bearbeiten von Navigationen im Website-Editor.

Klicken Sie auf diesen Platzhalter, um das Video von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Twenty Twenty-Three anpassen – 03. Eine Navigation erstellen und anpassen

Eine Navigation erstellen

Zur Anpassung der Navigation im Header öffnen Sie zunächst den Template-Teil Header zur Bearbeitung im Website-Editor. Danach sehen Sie folgendes Bild:

  1. In der Mitte der oberen Editorleiste gibt es einen Hinweis, dass der Header gerade bearbeitet wird.
  2. Die Breite des Headers im Editorfenster lässt sich einfach ändern, sodass man auch die mobile Navigation an Ort und Stelle prüfen kann.
  3. Wenn ein Block Navigation markiert ist, erscheinen rechts in der Seitenleiste auf dem Register Block die Optionen zur Bearbeitung der Navigation.
Die Header-Navigation anpassen im Website-Editor
Der Header im Website-Editor mit markiertem Navigationsblock

Vorab: Eine Navigation besteht aus einem Navigationsblock und einem Menü

Eine Navigation besteht in einem Block-Theme aus zwei Teilen:

  1. einem Navigationsblock
  2. einem Navigationsmenü, das diesem Block zugewiesen wird.

Der Navigationsblock kann im Website-Editor an einer beliebigen Stelle des Templates hinzugefügt und bearbeitet werden. Die in klassischen Themes vorhandenen festen Menüpositionen gibt es nicht mehr.

Das Navigationsmenü, das im Navigationsblock dargestellt wird, passt man mit den Werkzeugen auf dem Register mit den Block-Einstellungen in der Seitenleiste an und es wird meist kurz einfach nur als Menü bezeichnet.

Auf der Übungswebsite ist der Navigationsblock bereits im Header vorhanden. Im Folgenden wird ein Navigationsmenü namens Header-Navigation erstellt, das Links zu den wichtigsten vier statischen Seiten enthält und im Navigationsblock im Header dargestellt wird.

Schritt 1: Ein Menü erstellen

Die Abbildung weiter oben zeigt, dass es in der Seitenleiste für die Block-Einstellungen drei Register zur Bearbeitung der Navigation gibt:

  1. Listenansicht zur Bearbeitung der Menüpunkte
  2. Einstellungen mit Optionen für Layout und Darstellung
  3. Stile mit Optionen für Farben und Typografie

Auf dem Register Listenansicht sehen Sie rechts neben dem Wort Menü ein 3-Punkte-Menü, in dem Sie ein neues Menü erstellen oder ein vorhandenes Menü auswählen können.

Dabei gibt es verschiedene Möglichkeiten:

  • Falls dort noch kein Menü gelistet wird, erstellen Sie ein neues Menü, das noch leer ist und keine Links enthält. Der Name für das Menü wird automatisch vom Website-Editor vergeben, kann aber später geändert werden (siehe Schritt 2: Ein Menü umbenennen).
  • Falls dort bereits ein Menü angezeigt wird, erstellen Sie kein neues Menü. Löschen Sie den Block Seitenliste mit einem Klick auf das 3-Punkte-Menü rechts daneben und dem Befehl Seitenliste entfernen.
  • Falls Sie vorher ein klassisches Theme installiert hatten, können Sie die eventuell bereits vorhandene klassische Menüs importieren.

Der Block Seitenliste ist als Fallback gedacht und besser als überhaupt keine Navigation, aber Sie werden in diesem Beitrag eine maßgeschneiderte Navigation erstellen.

Ausgangspunkt ist ein leeres Navigationsmenü, das dann im nächsten Schritt einen sinnvollen Namen bekommt und danach mit Links zu den wichtigsten Seiten befüllt wird.

Schritt 2: Ein Menü umbenennen

Die Option zur Umbenennung von Navigationsmenüs findet man gut versteckt auf dem Register Einstellungen im Abschnitt Erweitert:

  • Im Feld Menüname können Sie das Navigationsmenü in Header-Navigation umbenennen. 
  • Mit dem Button Menü löschen können Sie genau das tun.
  • Ein Klick auf den Link Menüs verwalten verlässt den Website-Editor und führt zu einer anderen Backendseite. Sie sollten die bisher gemachten Anpassungen vorher unbedingt speichern.

Sie haben jetzt ein Navigationsmenü namens Header-Navigation, das noch leer ist keinerlei Menüpunkte enthält. Die kommen dann gleich im nächsten Abschnitt dran.

Ein leeres Navigationsmenü namens Header-Navigation
Das Menü »Header-Navigation« noch ohne Menüpunkte

Das Hinzufügen der Links zum Navigationsmenü könnte auch direkt im Block Navigation im Editorfenster stattfinden, aber das fühlt sich ein bisschen an wie das Renovieren einer Wohnung durch den Briefschlitz. Das in WordPress 6.2 eingeführte Register Listenansicht in der Seitenleiste ist deutlich benutzerfreundlicher.

Die Listenansicht zum Anpassen der Navigation

Beim Hinzufügen von Menü-Links bekommt man eine kleine Auswahl mit passenden Blöcken präsentiert:

  1. Klicken Sie auf das Block-Inserter-Symbol mit dem Plus-Zeichen.
  2. Wählen Sie aus, welchen Block Sie hinzufügen möchten.
    • Seitenlink zeigt nur statische Seiten zum Verlinken an.
    • Individueller Link ist der Tausendsassa und zeigt neben Seiten auch Beiträge, Kategorien und Schlagwörter. Auch externe Links sind hiermit möglich.
    • Seitenliste zeigt alle veröffentlichten Seiten und ist wohl nur selten die richtige Wahl. Sie haben den Block eventuell gerade gelöscht.
    • Kategorie-Link bietet nur Beitrags-Kategorien zum Verlinken an.
Links zu einem Navigationsmenü hinzufügen
Menüpunkte zu einem Navigationsmenü hinzufügen

Der bei der Erstellung von Menüs wahrscheinlich am häufigsten benutzte Block ist wohl der Seitenlink für statische Seiten. Untermenü lernen Sie weiter unten noch kennen, und Abstandshalter ist ein Relikt aus alten Zeiten. Man braucht keinen Abstandshalter in einem Menü.

Diese Block-Auswahl ist zunächst ein ungewohnter Zwischenschritt, erweist sich nach kurzer Gewöhnung aber als durchaus praktisch und sehr übersichtlich.

Für die Navigation der Übungswebsite fügen Sie einfach vier Links zur Startseite und zu den Seiten Blog, Über mich und Kontakt ein. Die Reihenfolge der Menüpunkte können Sie in der Listenansicht einfach per Drag & Drop ändern.

Header-Navigation mit vier Seitenlinks im Website-Editor
Die Header-Navigatin mit vier Seitenlinks

»Startseite« ausblenden?

Den Menüpunkt Startseite könnte man am Desktop auch weglassen, da man die Startseite auch mit einem Klick auf den Titel der Website und ein eventuelles Website-Logo aufrufen kann.

Im Overlay-Menü auf mobilen Geräte hingegen ist der Link zur Startseite nützlich, da es den ganzen Bildschirm bedeckt und der Titel der Website nicht zu sehen ist.

Das Plugin Twentig ermöglicht diese Kombination, denn damit können Sie einzelne Menüpunkte markieren und nur für Desktop und Tablet ausblenden. Im Overlay-Menü der mobilen Navigation ist Link zur Startseite dann nach wie vor zu sehen.

Einzelne Menüpunkte anpassen

Um einen einzelnen Menü-Link anzupassen, klicken Sie einfach auf den betreffenden Menüpunkt. In der Seitenleiste erhalten Sie dann diverse Felder zur Anpassung des Links:

  • Label ist die Beschriftung, die im Frontend erscheint
  • URL ist Adresse, die nach einem Klick aufgerufen wird

Die weiteren Felder werden Sie nur selten benötigen.

Ein Untermenü hinzufügen

Auch das Hinzufügen eines Untermenüs ist in der Seitenleiste recht simpel:

  1. Übergeordneten Menüpunkt markieren 
  2. Drei-Punkte-Menü rechts daneben anklicken
  3. Option Einen Link zum Untermenü hinzufügen anklicken 
  4. Mit Individueller Link den gewünschten Link einfügen
  5. Diese Schritte für weitere Links wiederholen
  6. Speichern.

Fertig.

Die Header-Navigation gestalten

Sie haben jetzt ein Navigationsmenü mit einigen Menüpunkten. Zur Gestaltung dieser Navigation gibt es die Register Einstellungen und Stile.

Die Navigation gestalten: 1. Das Register »Einstellungen« für Layout und Darstellung

Auf dem Register Einstellungen gibt es zahlreiche Optionen zur Gestaltung der Navigation, die sich auf drei Abschnitte verteilen:

  • Layout dient zur Ausrichtung der Navigation. Außerdem kann man hier einen Zeilenumbruch erlauben (meistens sinnvoll) oder verbieten.
  • Darstellung ermöglicht die Konfiguration des mobilen Menüs:
    • Icon-Button oder Beschriftung wie „Menü“ und „Schließen“ 
    • Zwei oder drei Striche als Symbol 
    • Overlay-Menü: Aus | Mobil | Immer 
  • Erweitert dient zur Verwaltung. Hier kann der Menüname geändert und das Menü gelöscht werden. Außerdem gibt es einen Link zum Menüs verwalten, der den Website-Editor verlässt und zu einer anderen Backend-Seite springt.
Website-Editor - Navigation gestalten - Register Einstellungen
Das Register Einstellungen zum Gestalten einer Navigation

Die Navigation gestalten: 2. Das Register »Stile« für Schrift und Farben

Auf dem Register Stile geht es um Schriften und Farben und dort gibt es ebenfalls drei Abschnitte:

  • Farbe 
    • Text 
    • Hintergrund
    • Untermenü- und Overlay-Text 
    • Untermenü- und Overlay-Hintergrund 
  • Typografie 
  • Größe 

Am Wichtigsten dürfte hier die Gestaltung der Unter- und Overlay-Menüs sein. Normalerweise wird für den Hintergrund dieser Menüs in Twenty Twenty-Three ein sehr helles Grau verwendet. Hier könnten Sie das ändern.

Website-Editor - Navigation gestalten - Register Stile
Das Register »Stile« zum Gestalten einer Navigation

Die Footer-Navigation erstellen

Die Header-Navigation ist soweit fertig, fehlen nur noch die Pflichtlinks zu Datenschutz und Impressum im Footer.

Die Footer-Navigation im Website-Editor
Die Footer-Navigation im Website-Editor

Die Erstellung der Navigation im Footer ist recht simpel:

  • Öffnen Sie den Template-Teil Footer im Website-Editor.
  • Entfernen Sie den Absatz Stolz präsentiert von WordPress
  • Fügen Sie dann an derselben Stelle einen Navigationsblock ein
  • Fülen Sie den Navigationsblock mit zwei Seitenlinks (siehe oben).

Dabei gibt es eventuell folgende Stolperfallen:

  • Nach dem Einfügen des Navigationsblock weist WordPress diesem automatisch die Header-Navigation zu, weil es noch kein anderes Menü gibt.
  • Lassen Sie sich davon nicht ins Bockshorn jagen. Erstellen Sie ein neues Menü, nennen Sie es z. B. Footer-Navigation und fügen Sie die Links ein.
  • Die Seite Datenschutzerklärung soll im Menü kurz als Datenschutz erscheinen. Dazu müssen Sie den Menüpunkt anpassen (siehe oben).
  • Die Footer-Navigation soll anders als die Header-Navigation auch auf mobilen Geräten als Linkliste erscheinen und nicht als Menü-Symbol mit Overlay-Menü. Die Lösung finden Sie auf dem Register Einstellungen im Abschnitt Darstellung.

Abgesehen von diesen Besonderheiten dürfte die Erstellung des Footer-Menüs keine größeren Schwierigkeiten ergeben. Probieren Sie es einfach.

Falls Sie nicht weiterkommen, schauen Sie sich das Video an. Bei Minute 09:22 geht es los mit Die Footer-Navigation erstellen.


Beiträge zu Twenty Twenty-Three

Übersicht: Die Video-Reihe »TT3 anpassen«

Die Reihe besteht aus folgenden Beiträgen:

  1. Einführung und Übungswebsite
  2. Den Website-Editor kennenlernen
  3. Die Navigation bearbeiten
  4. Stile – die Website gestalten
  5. Das Farbschema ändern
  6. Templates kennenlernen
  7. Die Beitragsseite ändern
  8. Block-Theme erstellen

Die Beiträge enthalten jeweils ein Video und eine ausführliche Beschreibung.

Am besten Beitrag lesen und Video anschauen, denn die beiden sind nicht immer identisch.

Avatar von Peter Müller

Kommentare

8 Antworten zu „Twenty Twenty-Three: Die Navigation bearbeiten“

  1. Bug..?
    Bestehende Menüaufzählungen im Eintrag unter „Menü“ -> 3Punkte (Beispiel zur Auswahl stehend – „Navigation, Navigation1, Navigation2, Navigation3“).
    Jedoch gibt es im ganzen Theme nur ein Einzigen Navigations-Block „Navigation“. Weitere Themes sind ALLE deinstalliert worden. Auch wenn ich den letzten lösche, sobald ich eine Navigation platziere sind alle wieder in der Auswahl, und bei Neu Erstellen einer mehr.
    Man kann also Menüs erstellen, doch löschen kann man die Punkte in der Auswahl nicht.

    Frage: Also wo lösche ich die Menüeinträge. Im Dashboard gibt es ja keine Menü Einstellungen mehr, um evtl. darüber zu die zu löschen. Auch dort habe ich bevor ich die anderweitigen Themes gelöscht habe die Menüeinträge gelöscht und bin leer in die Theme Deinstallation. Doch Theme 20 20-3 behält den kram – finde da auch kein Weg…. bisher.. grr

    Hoffe es war verständlich – Gruß, und danke für die YouTube…

  2. OK, gefunden, doch fehlt mir das in deinem Video als Ergänzung.. ; )
    Gruß

    1. Gut, dass du es gefunden hast, denn ich hatte beim ersten Überfliegen nicht wirklich verstanden worum es geht 🙂

      In WordPress 6.3 wird die Verwaltung der Navigationsmenüs im Website-Editor übrigens deutlich übersichtlicher.

  3. Avatar von Wolfgang Zacharias
    Wolfgang Zacharias

    Wie immer eine klare und anschauliche Erläuterung. Danke.
    Ist es möglich, per zusätzlichem CSS den hover, focus und active-Zustand der einzelnen Seitenlinks zu gestalten? Ich wollte die Unterlinie entfernen dafür aber eine andere Schriftfarbe wählen.
    Alle Versuche mit .class a:hover a:active a:focus{ text-decoration: none; color: green;} funktionierten entweder nur teilweise (Unterstreichung war wirklich verschwunden) grüne Schriftfarbe funktionierte nur in der separaten header-Ansicht aber nicht mehr in der kompletten Seitenvorschau.
    Könnten Sie mir helfen? Herzlichen Dank
    Wolfgang Zacharias

    1. Welche Links möchten Sie denn wie gestalten?

      Die Links in der Navigation und im Inhaltsbereich haben verschiedene Selektoren.

      1. Avatar von Wolfgang Zacharias
        Wolfgang Zacharias

        in der Navigation.

      2. Avatar von Wolfgang Zacharias
        Wolfgang Zacharias

        Es ist irre: wenn ich wenn ich background-color zuweise, dann funktioniert’s. Nur color stellt sich störrisch. Ich habe übrigens den einzelnen links im Navigationsmenü eine einheitliche Klasse zugewiesen. Die Adressierung über den Klassenselektor scheint also zu funktionieren. So lange ich das Template Header bearbeite wird color auch angezeigt! Erst nach Abschluss der Template-Bearbeitung (inkl. Speicherung) verschwindet der gewünschte Effekt wieder.

      3. Avatar von Wolfgang Zacharias
        Wolfgang Zacharias

        Ich hab’s! Mit der Brechstange: einfach der color-Anweisung !important hinterhergeschickt. Offensichtlich kollidiert color mit irgeneiner Anweisung des Themes.
        Manchmal hilft’s, mit der Faust auf den Tisch zu hauen.
        Danke trotzden für die Aufmerksamkeit.
        MfG W. Zacharias

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert