Ein WordPress-Menü erstellen und bearbeiten
Was ist ein WordPress-Menü? Wie kannst du sie erstellen und bearbeiten? Wie du Links hierarchisch zu Menüs und Unter-Menüs zusammenfügst :)Tags: Programmieren lernen | Web-Development lernen | Webseiten erstellen lernen | WordPress lernen | WordPress-MenüWorum geht´s?
Willkommen zurück zum nächsten Tutorial über die WordPress-Basics! Dieses Mal werden wir uns mit WordPress-Menüs beschäftigen, und es wird eher eine kurze Lektion sein: Was ist ein WordPress-Menü, wie sie funktionieren, wie man sie erstellt und bearbeitet. Bereit?
Dann lass uns loslegen!
1. Was ist ein WordPress-Menü, und wie funktionieren sie?
Wahrscheinlich hast du zumindest eine ungefähre Vorstellung davon, was das Menü einer Webseite ist. Es ist der Bereich einer Webseite, bei dem du an einem Ort zusammengefasst Links zu den wichtigsten Unterseiten findest – z.B. Kontakt, Über mich, Startseite, Angebot, usw.
In WordPress erfüllen Menüs auch genau diesen Zweck. Ein WordPress-Menü ist eine Sammlung von Links, die zu einer Art „Knotenpunkt“, einem Navigations-Zentrum zusammengefasst wurden. Die einzelnen Links werden dabei hierarchisch angeordnet. So gibt es beispielsweise eine Reihe an Links der ersten Ebene, und einige Links in den Ebenen darunter, die dann Unter-Menüs formen.
Aber weil WordPress so aufgebaut ist, dass eine WordPress-Webseite mit verschiedenen Design-Vorlagen (Themes) funktioniert, wird das Aussehen eines Menüs in WordPress getrennt vom Inhalt des WordPress-Menüs abgespeichert. Der hierarchische Aufbau des Menüs bleibt zwar dann beim Wechsel eines WordPress-Themes bestehen, aber die Art, wie es angezeigt wird, kann sich ändern.
Aber nun wollen wir uns mal ansehen, wie so ein WordPress-Menü im WordPress-Backend aussieht:
2. Wie wir ein WordPress-Menü erstellen und bearbeiten
Den Bildschirm zum Bearbeiten eines WordPress-Menüs findest du wieder auf zwei Arten:
Melde dich im WordPress-Backend (/wp-admin) an, fahre mit der Maus über „Design“ in der Liste und klicke dann auf „Menüs“:
Über die Admin-Leiste:
Egal welchen Weg du gewählt hast, du solltest nun diesen Bildschirm erreichen:
WordPress sagt uns nun, dass wir noch kein Menü erstellt haben, aber gerne ein Menü erstellen dürfen. Das machen wir jetzt gleich mal.
2.1 Ein neues WordPress-Menü erstellen
Dazu geben wir unserem ersten Menü einen frei wählbaren Namen.
Als nächstes müssen wir wählen, ob das WordPress-Menü Seiten der ersten Ebene automatisch zum Menü hinzufügen soll. Erinnerst du dich noch daran, dass wir beim Erstellen von Seiten in WordPress die Option hatten, „übergeordnete Seiten“ auszuwählen, und somit eine hierarchische Struktur zu erstellen. Gibt es die schon, kann es Sinn machen, hier ein Häkchen zu setzen. Aber in unserem Fall würde ich dir empfehlen, das Häkchen fürs erste nicht zu setzen.
Und dann dürfen wir noch die „Position im Theme“ auswählen. Dazu muss man wissen, dass jedes einzelne Theme (das sind Design-Vorlagen, die dem Inhalt das passende Styling verpassen) unterschiedliche mögliche Menü-Positionen einprogrammiert hat. Manche Themes haben nur eine einzige Menü-Position, andere viele verschiedene. Oft sind die Positions-Namen recht selbsterklärend, manchmal auch verwirrend. Für unser erstes Menü würde ich vorschlagen, dass wir „Horizontales Desktop-Menü“ auswählen. Das sollte dann dazu führen, dass unser WordPress-Menü als Leiste oben angezeigt wird.
Als letztes klicken wir auf den blauen „Menü-erstellen“-Button, und unser Menü wird erstellt. Dann solltest du folgendes sehen:
Der Bildschirm sieht auf den ersten Blick fast genau gleich aus, aber er hat sich doch verändert. Denn nun kannst du deinem Menü Links hinzufügen! Das machst du, indem du aus der linken Spalte Seiten, Beiträge oder individuelle Links hinzufügst – einfach auswählen und den „Zum Menü hinzufügen“-Button klicken, dann taucht der Link rechts auf. Nach dem gleichen Prinzip kannst du auch Beiträge (also z.B. Artikel, Geschichten, …) einfügen.
Individuelle Links sind Links die du frei eingeben kannst. So kannst du z.B. einen Menü-Link auf eine ganz andere Webseite anlegen. Dazu brauchst du nur die Link-Adresse und einen frei wählbaren Text, der angezeigt werden soll, angeben:
Aber was, wenn wir versehentlich einen Link in unser WordPress-Menü eingefügt haben, den wir gar nicht drin haben wollten?
Dann können wir ihn auf einfache Weise wieder entfernen. Klicke dazu auf den kleinen grauen Pfeil am rechten Ende eines schon eingefügten Links, dann klappt sich ein kleines Menü auf:
Wenn du auf das rote „Entfernen“ klickst, wird der Link wieder aus dem WordPress-Menü entfernt. Einfach, oder?
Haben wir nun auf diesem Weg alle Links, die in unserem Menü anklickbar sein sollen, eingefügt, geht’s an den nächsten Schritt. Welche Links sollen in Unter-Menüs sein, welche auf der ersten Ebene? Dazu müssen wir die hierarchische Struktur des WordPress-Menüs bearbeiten.
2.2 Wie du die hierarchische Struktur des WordPress-Menüs bearbeitest
Glücklicherweise ist es in WordPress sehr einfach, die hierarchische Struktur des WordPress-Menüs zu bearbeiten. Man kann die einzelnen Links nämlich einfach per Drag&Drop herumziehen, bis man damit zufrieden ist.
So kann man beispielsweise die Reihenfolge der einzelnen Links ändern, indem man einzelne Links einfach nach unten oder oben zieht und sie entsprechen an der richtigen Position loslässt.
Außerdem kann man so auch untergeordnete Links erstellen, wenn man sie etwas weiter rechts loslässt. Wenn du es ausprobierst, wirst du schnell verstehen, wie du die Links ziehen musst, damit das klappt.
Am Ende könnte das z.B. so aussehen – 3 Links der ersten Ebene und ein Unter-Link:
Wenn wir nun zufrieden sind mit der Auswahl der Links, und auch mit ihrer hierarchischen Anordnung, können wir unser WordPress-Menü speichern. Dazu klicken wir einfach auf den blauen „Menü speichern“-Button.
3. Mehrere WordPress-Menüs bearbeiten und verwalten
Es kann nun sein, dass deine WordPress-Webseite nicht nur ein Menü hat, sondern gleich mehrere. Meine eigene Webseite beispielsweise verwendet 2 WordPress-Menüs:
- Das zentrale Navigations-Menü oben
- Ein Footer-Menü mit Impressum, Datenschutz, etc.
Sobald du mehr als ein Menü erstellt hast, kommt auf dem Menü-Bildschirm noch eine Menü-Auswahl hinzu, die dann in etwa so aussieht:
Wenn du ein anderes Menü zum Bearbeiten auswählen willst, wählst du es über das Drop-Down-Menü aus (wie ich oben) und klickst dann den „Auswählen“-Button, um zum richtigen Menü zu gelangen.
Wenn du später die Positionen deiner WordPress-Menüs verwalten willst – z.B. wenn du ein anderes Menü statt dem bisherigen auf der Position „Horizontales Desktop-Menü“ haben willst, dann kannst du das über den Bildschirm „Positionen verwalten“ tun. Wie das dort geht ist – glaube ich – recht selbsterklären, deshalb nur ein Bild, wie es aussieht:
So, soviel zum Verwalten mehrerer Menüs. Aber nun wollen wir uns mal unser schönes neues Menü ansehen 🙂
4. Wo sehe ich die Veränderungen an meinem WordPress-Menü?
Dazu musst du ins WordPress-Frontend, also zu der Version deiner Seite, die auch Webseiten-Besucher sehen können. In meinem Fall also vorzeigen.bunterrichten.at (das /wp-admin muss weg). Hier sieht man schon, dass das neue Menü eingefügt worden ist – 3 Links der höchsten Ebene, und einen kann man aufklappen, um das Unter-Menü anzuzeigen:
Wenn du nun zurück zum Backend wechselst und dort etwas am Menü änderst und danach wieder zurückkehrst, siehst du die Änderungen gleich wieder. So veränderst du in WordPress die Menüs.
Falls dir das Aussehen des Menüs (oder der ganzen Webseite) noch nicht sonderlich gut gefällt, dann keine Bange. Darum werden wir uns bald kümmern, wenn es um die WordPress-Themes geht.
Aber warum war eigentlich von Anfang an ein Menü da, obwohl wir ja noch gar kein WordPress-Menü erstellt gehabt hatten?
Das lag daran, dass WordPress für den Fall, dass es noch keine WordPress-Menüs findet, einfach aus den erstellten Seiten selbst eines für dich zusammenbastelt. Als Übergangs-Lösung sozusagen.
So, nun verlassen wir die Welt der Menüs wieder, denn jetzt wird’s ernst. Wir fangen in der nächsten Lektion an, uns um das Aussehen der Webseite zu kümmern. Wir werden ins große Thema Themes (Design-Vorlagen) einsteigen.
Bis zum nächsten Mal!