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

14 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

  4. Hätte ich mal nur früher deine Seite mit dem Video gefunden. Mir wäre schon so manches Haare raufen erspart geblieben.

    Das was ich in Header -navigation nicht hinkriege, ist die Linkfarbe zu verändern

    Ich habe die Option Kästchen durchgestrichen oder unterstrichen ich mittlerweile auch das richtige Feld für die Größe gefunden
    nur die linksfarbe bleibt immer die gleiche. Egal welche Farben ich eingebe.

    Auser im Webseite-Titel , da ließ es sich ganz problemlos ändern.

    Mein Theme ist twenty twenty four.

    Ist das vielleicht gar nicht möglich die Linke Farbe zu ändern und wenn doch, weißt du wie es geht
    viele Grüße
    Art

    1. Das Ändern der Linkfarbe für die Headernavigation ist in TT4 eigentlich ganz einfach:

      1. Im Website-Editor den Header zur Bearbeitung öffnen.
      2. Den Navigationsblock markieren (z. B. in der Listenansicht)
      3. In der rechten Seitenleiste auf dem Register Block das Register Stile öffnen (NICHT die Globalen Stile)
      4. Im Designtool Farbe mit der Option Text die gewünschte Farbe definieren

      Viel Erfolg dabei. Freut mich übrigens, dass dir das Video geholfen hat. Erzähle es weiter. Und das Buch ist auch nicht schlecht 😉

      1. Erstmal vielen Dank für deine Antwort, die Farbe an sich wollte ich nicht ändern sondern bei Mauskontakt.
        Und das klappt leider überhaupt nicht, da ändert sich nichts,
        obwohl eine andere Farbe für den Bereich bei Link eingestellt ist.

        nur beim Webseiten Titel, funktioniert es

        1. Aah, das stimmt. Das geht momentan nicht.

          Der im Website-Editor bei Globale Stile > Farben > Link eingestellte Farbton gilt *nicht* für die Navigationslinks, sondern nur für die Links im Inhaltsbereich und den Titel der Website. Such is life im Augenblick …

          Für die Navigationslinks gibt es im Website-Editor keine mir bekannte Möglichkeit, eine Hover-Farbe zu definieren, und – was ich persönlich viel schlimmer finde – keine Möglichkeit, die aktive Seite in der Navigation hervorzuheben.

          Das für Block-Themes sowieso wirklich empfehlenswerte Plugin Twentig stellt für beides (Hover-Effekt/Aktiver Menüpunkt) bei der Gestaltung des Navigationsblocks auf dem Register Stile (*nicht* bei Globale Stile) ganz unten im Bereich Link Style (tw) diverse Optionen wie z. B. Underline, Border etc. bereit, aber keine selbst definierbare Linkfarbe.

          Das geht nur mit ein bisschen eigenem CSS. Die folgende Regel funktioniert bei Twenty Twenty-Four:

          .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
          .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus,
          .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
          color: red;
          }

          Kopieren, bei Globale Stile als Zusätzliches CSS einfügen, Farbwert entsprechend anpassen und speichern.

          Ich nehme meist die Twentig-Option Border. Dabei ist die untere Rahmenlinie etwas weiter vom Text entfernt ist als die normale Link-Unterstreichung.

  5. Oh vielen, vielen Dank, dann weiß ich jetzt dass ich nicht mehr suchen muss.

    Ich bin ein paar Jahre raus und jetzt beim Wiedereinstieg in WordPress finde
    interessant aber sehr unübersichtlich und nach meinem finden nicht besonders innovativ zu bedienen
    naja aber jetzt muss ich nicht weiter suchen, und Haare raufen.

    Vielen Dank für dein Input und auch für den Code, Danke!

    1. Es hat sich viel geändert bei WP, und das ist noch lange nicht vorbei. Für den Wiedereinstieg schau dir vielleicht mal den Beitrag zum Projekt Gutenberg an. Momentaner Stand der Dinge:

      1. Der Block-Editor für Inhalte auf Seiten und Beiträgen ist inzwischen echt gut und nach kurzer Eingewöhnung echt gut.
      2. Der Website-Editor zur Anpassung von Block-Themes wie TT4 hingegen ist noch nicht wirklich intuitiv und benutzerfreundlich.

Schreibe einen Kommentar

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