Das 1×1 der WordPress-Navigation

Bei einer Webseiten-Navigation handelt es sich im Grundsatz um eine Auflistung von Links (Verknüpfungen) innerhalb der eigenen Webseite. Bei komplexeren Webseiten, insbesondere Webseiten mit Blogs oder Webshops, kann eine solche Navigation aber komplexer ausfallen. Wie und was es zu beachten gibt, erkläre ich in diesem Beitrag.

Wichtiger Vorweg: Egal was du für eine Webseite du hast, du findest die Einstellung zur Navigation immer im Menü „Design“ –> „Menüs“. (Solange es sich natürlich um eine WordPress-Webseite handelt.)

Auf der linken Seite siehst du eine Übersicht über alle Seiten oder Post-Typen (Beiträge, Kategorien, Produkte, etc.) die du in die Navigation einfügen kannst. Wenn du zusätzlich einen Webshop wie WooCommerce installiert hast, erweitert sich dieses Menü automatisch. Bei kleinen Webseiten wirst du jedoch nur den Punkt „Seiten“ und «Individuelle Links» verwenden.

Standardmässig werden dir immer die „Zuletzt erstellten“ Seiten angezeigt. Dies macht durchaus Sinn. Denn anderen Seiten sind ja meistens schon verlinkt. Es kann aber durchaus vorkommen, dass gewisse Seiten nicht angezeigt werden. Ist dies der Fall, klicke auf „Suchen“ und gib den Titel deiner Seite ein.

WICHTIG! Damit du eine Seite oder einen anderen Post-Typ einfügen kannst, muss dieser veröffentlicht sein! Das heisst, dass sich die jeweilige Seite nicht im Entwurfsmodus befindet!

Um eine neue Seite deiner Navigation hinzuzufügen, musst du nun auf die Checkbox links neben dem Seitentitel klicken. Danach klickst du auf „Zum Menü hinzufügen“. Die ausgewählte Seite wird nun der Navigation hinzugefügt. Vergiss nicht, dass du am Schluss auf «Menü speichern» klicken musst. Nur so werden die Änderungen auch gespeichert!

Wie du vielleicht schon festgestellt hast, kannst du auch mehrere Seiten auf einmal hinzufügen. Wähle dazu einfach alle Checkboxen der Seiten aus, die du der Navigation hinzufügen möchtest. Beachte ausserdem, dass deine neue/n Seite/n immer zuunterst in der Navigation hinzugefügt werden. Dies wird so gemacht, da WordPress ja nicht weiss, auf welcher Position dein neuer Link stehen muss.

Um die Position zu ändern, fährst du mit der Maus über den neuen Menü-Punkt. Sobald ein Steuerkreuz angezeigt wird, klickst du mit der Maus darauf, hältst die Taste gedrückt und ziehst den Menü-Punkt an die Stelle, an der du die Verlinkung haben möchtest.

Wichtig: Beachte das eine normale Webseiten-Navigation horizontal verläuft (im Frontend / das was der Webseitenbesucher sieht). Dieses Menü stellt die Navigation aber vertikal dar. Dies ist aus Anzeigegründen so gelöst. Denn wenn du eine Navigation mit dutzenden Punkten hast, (habe ich schon gesehen und damit gearbeitet), ist nur die vertikale Ansicht möglich.

Vielleicht stellst du nun fest, dass einige Menü-Punkte leicht nach rechts verschoben sind. Dies hat einen wichtigen Grund! Denn alle Menü-Punkte, die ein wenig nach rechts verschoben sind, sind Untermenüs des vorherigen Menü-Punktes (der nach links verschoben ist). Auf diese Weise kannst du einfach Untermenüs erstellen.

Pro-Tipp: Es gibt viele Situationen, bei denen der oberste Menüpunkt einer Navigation nicht anklickbar sein sollte. Das siehst du zum Beispiel auf meiner Seite. Der Punkt «Produkte» ist nicht anklickbar oder es öffnet keine neue Seite, wenn du darauf klickst. Obwohl dieser Punkt «Produkte» in der Navigation hinzugefügt ist.

Um die obersten Navigationspunkte (mit einem Untermenü) zu deaktivieren, klickst du im WordPress-Backend auf «Divi» –> «Theme-Optionen». Auf der neu aufgegangenen Seite klickst du nun auf «Navigation» à «Allgemeine Einstellungen». Verstelle danach den Schieber «Dropdown-Menülinks der obersten Ebene deaktivieren».

Prp-Tipp: Erstelle nie ein Untermenü das mehr als 6 Punkte hat. Ab 6 Punkten wird die Navigation nicht mehr übersichtlich!

Pro-Tipp: Wenn du mehr als 3 Untermenüs mit jeweils mehr als 6 Punkten hast, solltest du dir überlegen ein MegeMenü einzurichten. Nimm mit mir Kontakt auf, wenn du mehr dazu wissen möchtest.

Mit WordPress kann man auch mehr als eine Navigation anlegen! Dies macht aber nur Sinn, wenn man grössere Webseiten betreut. Als Beispiel können wir hier auch einen Webshop nehmen. Dort könnte man ein Menü für die Seiten-Navigation und ein Menü für die Produkte/ Kategorien-Navigation erstellen.

Die beiden Menüs werden genau gleich verwaltet (wie oben beschrieben). Du kannst jedoch nicht beide Menüs auf einmal verwalten. Um das zu bearbeitende Menü zu wechseln, musst du oben links auf die Menü-Auswahl klicken und ein anderes Menü auswählen. Danach musst du nur noch auf «Auswählen» klicken und dein ausgewähltes Menü wird geladen.

Pro-Tipp: Dein Menü-Punkt muss nicht so lauten wie der Titel der Webseite! Du kannst das ganz einfach übersteuern in dem du auf den jeweiligen Seitentitel in der Navigation klickst und den Titel unter „Angezeigter Name“ änderst. So einfach ist das!

Pro-Tipp: Mit CSS-Code kannst du ausserdem coole Animationen einfügen. Dabei musst du den entsprechenden CSS-Code an der richtigen Stelle einfügen und du musst in der Navigation einen Verweis auf diesen CSS-Code hinzufügen. Solche Effekte könntest du dann machen:

Natürlich kannst du auch Links zu anderen Webseiten hinzufügen. Dazu musst du auf der linken Seite auf „individuelle Links“ klicken. Das Hinzufügen und positionieren funktioniert gleich wie bei den „Seiten“ (oben beschrieben). Der Unterschied besteht darin, dass du hier keine Seite auswählen kannst, sondern eine URL einer anderen Webseite einfügen kannst! Damit in deiner Navigation jedoch nicht die ganze URL angezeigt wird, kannst du unter „Link-Text“ dem Link einen Titel geben. Zum Beispiel der Firmenname der Seite, die du verlinken möchtest. Beachte dabei, dass du hier auch Unterseiten verlinken kannst. Zum Beispiel: https://www.sutersoftware.ch/preise-fuer-webseiten/

Ausserdem kannst du so Anker Links hinzufügen! Was Anker-Links sind und wie man sie erstellt, zeige ich dir hier: https://www.sutersoftware.ch/alles-ueber-anker-links/

Zum Schluss: Wie du vielleicht schon gesehen hast, biete ich auch individuelle Schulungen an. Dabei kann ich dich bei genau den Themen unterstützen, die du auch brauchst. Hier kannst du einige Beispiele ansehen: https://www.sutersoftware.ch/wordpress-divi-und-woocommerce-schulung/. Auch bei anderen Angelegenheiten helfe ich dir gerne weiter. Um mit mir Kontakt aufzunehmen, kannst du das Kontaktformular verwenden.

Möchtest du deine Webseite selbst gestalten?

Dann setze dich mit mir in Verbindung und ich zeige dir, mit welchen Tools du einfach starten kannst.

Zum Kontaktformular

Ähnlich Artikel

Wie kann ich den Avast-Antivirus deinstallieren?

Wie kann ich den Avast-Antivirus deinstallieren?

Du hast zwei Möglichkeiten um den Avast-Antivirus zu deinstallieren. Die zweite Möglichkeit sollte aber nur verwendet werden, wenn die erste nicht funktioniert. Avast-Antivirus über den App-Wizard deinstallieren. 1. Öffne die Windows-Einstellungen, indem du unten...

Benötige ich nun ein Cookie-Banner oder nicht?

Ich fasse dieses Thema kurz für dich zusammen. Grundsätzlich ist es so, dass das niemand so genau sagen kann. In der Schweiz ist die Gesetzeslage sogar noch ungenauer als im EU-Raum. Daher erkläre ich dir kurz meine Ansicht zu diesem Thema. Ein Cookie-Banner ist erst...

Warenkorb
  • Es befinden sich keine Produkte im Warenkorb.
Datenschutz
Suter Software, Inhaber: Rico Suter (Firmensitz: Schweiz), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl:
Datenschutz
Suter Software, Inhaber: Rico Suter (Firmensitz: Schweiz), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl: