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-Type 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 duzenden 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ü-Punkt (dar 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 daraufklickst. 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 heissen 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 bestehet 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://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://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. Siehe hier einginge Beispiele: https://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.

Preise für Webseiten

Die Frage: «Was kostet eine Webseite», kann erst dann beantwortet werden, wenn der Umfang und damit der Aufwand geklärt ist. Lese hier nach, was das genau bedeutet.

Wordpress Logo

Servicepläne

Deine Investition schützt du durch Pflege und Sicherheit. Damit du aber mehr Zeit für dein Unternehmen hast, nehme ich dir diese Aufgaben gerne ab. Lese hier nach, was ich dir bieten kann.

Notebook-Arbeitsplatz mit Text

SEO-Deinstleistungen

SEO bedeutet Content Marketing. Und Content Marketing erreicht man mit Zeit oder Geld. Hier findest du alle Angaben, wie ich dich bei deinem SEO-Ziel unterstützen kann.

Ähnlich Artikel

Verwenden der SharePoint-Freigabe von Suter Software

Bei Webdesign-Arbeiten kommt es immer wieder mal vor das grosse Datenmengen ausgetauscht werden müssen. Da ich keine Lust habe alles per E-Mail zu erledigen und E-Mails meist auch noch grössenbeschränkt sind, unterhalte ich eine Business SharePoint-Instanz. Hier zeige...

Alles über Anker-Links

Nachdem ich dir in diesem Beitrag hier: https://sutersoftware.ch/das-1x1-der-wordpress-navigation/ gezeigt habe, wie du die WordPress-Navigation bearbeiten kannst, möchte ich dir nun zeigen, was Anker-Links sind und wie du sie verwenden kannst. Wenn man von...