Auf Grundlage Ihrer Beiträge und Seiten können Sie nun das Menü für Ihre Website erstellen. Dazu müssen Sie in den Reiter „Design“ wechseln. Diesen finden Sie in der linken Menüstruktur in der Administrationsoberfläche von WordPress.

Wählen Sie den Punkt „Menüs“ an. Da es auf Ihrer neuen Webseite noch keine Menüs gibt, müssen wir nun in einem ersten Schritt ein neues Menü erstellen. Sie können sich dazu auch das am Ende der Seite platzierte Video ansehen, bevor es dann an die Umsetzung geht.

Übersicht

zu 1) Ansicht anpassen

Der Reiter „Ansicht anpassen“ ist uns nun schon öfter untergekommen. Vergessen Sie ihn nicht. Darunter verbergen sich so manche Funktionen, die Sie später brauchen werden. Kurz zur Erklärung:

• Boxen Mit „Boxen“ sind die Inhaltstypen gemeint. Im Bild oben sehen Sie nahe der Zahl 4, dass Seiten, Beiträge, Links und Kategorien ausgewählt sind. Diese sind momentan ausgegraut, werden aber später sichtbar werden.
• Erweiterte Menüeigenschaften anzeigen Mit den erweiterten Menüeigenschaften zeigen Sie weitere Felder an, die eventuell nützlich sein könnten. Sie lernen weiter unten auf dieser Seite, wie Sie sie nutzen können. Hier sei nur gezeigt, wie es aussieht, wenn Sie einen neuen Menüpunkt hinzufügen:

zu 2) Live Vorschau

Die Live-Vorschau führt Sie wieder in den Theme-Customizer, wie Sie es im Kapitel Theme anpassen und einrichten gesehen haben. Auch dort ist es möglich, das Menü zu bearbeiten. Da es ähnlich abläuft wie weiter unten auf dieser Seite beschrieben, gehen wir nicht noch einmal darauf ein.

zu 3): Menü erstellen

Wenn es sich um eine frische WordPress-Installation handelt, befindet sich in der Ansicht von oben noch kein Menü. Sie müssen erst eines erstellen, damit Sie es später mehr oder weniger „zusammenklicken“ können. So geht’s:

1. Falls mindestens ein Menü existiert, klicken Sie auf den Link „erstelle ein neues Menü“.
2. Falls noch kein Menü existiert (Bild oben), geben Sie einen Namen in das Feld ein und klicken Sie auf den Button „Menü erstellen“.

Nun sieht die Seite etwas anders aus. Sie befinden sich nämlich im Bearbeitungsmodus für das gerade erstellte Menü. Wir haben es „Erstes Menü“ genannt:

Wie Sie sehen, hat sich ein bisschen was getan:

1. Es existiert nun ein neuer Reiter mit der Bezeichnung „Positionen bearbeiten“. Abhängig vom Theme erhalten Sie mehrere Menüpositionen, die Sie nutzen können. In unserem Fall (TwentySixteen-Theme) gibt es zwei Positionen, die Sie auch unter Punkt 2 sehen können: das „Primäre Menü“ und das „Social-Links-Menü“.
2. Im rechten Teil sehen Sie unter Punkt 2 noch einmal die Auflistung der möglichen Menüpositionen. Darüber, unter der Überschrift „Menüstruktur“, werden später die Menüelemente abgelegt.
3. Die Boxen unter Punkt 3 sind jetzt nicht mehr ausgegraut dargestellt. Das heißt, Sie können benutzt werden.

zu 4) Inhalte einfügen

Im linken Teil sehen Sie die so genannten „Boxen“. Darin befinden sich letztlich alle Inhalte Ihrer Website an einer Stelle vereint. Damit können Sie vom Menü ausgehend auf alle möglichen Inhalte verlinken. Die Boxen sind – sofern Sie noch kein Menü erstellt haben – ausgegraut. Erst wenn mindestens ein Menü existiert, kann es benutzt werden.

Videotutorial: Ein Menü erstellen, anlegen, ändern

Im folgenden Video sehen Sie, dass Plugins weitere Inhalte zu dieser Seite hinzufügen können. Installieren Sie z.B. WooCommerce (ein Shop-Plugin), so finden Sie unter den Boxen Einträge wie „Produkte, „Produktkategorien“ und viele mehr.

Ein Hauptmenü erstellen: Schritt für Schritt

Schritt 1: Menü anlegen

Falls noch nicht geschehen, klicken Sie auf den Link „erstelle ein neues Menü“.

Damit Sie später die Menüs namentlich wiederkennen und zuordnen können, vergeben Sie einen eindeutigen Namen. Beispielhaft lassen wir an dieser Stelle den Namen „Erstes Menü“ so stehen.

Unter der Überschrift „Menü-Einstellungen“ können Sie auswählen, an welcher Position im Theme das Menü auftauchen soll.

Schritt 2: Menüpunkte hinzufügen

Nun können Sie mit der Erstellung Ihrer Menüpunkte beginnen. Wie oben bereits erwähnt, haben Sie im linken Bereich (bei den Boxen) die Möglichkeit, Beiträge, Seiten, Kategorien usw. auszuwählen. Im Beispiel wollen wir eine Seite hinzufügen.

Falls die Box „Seiten“ noch nicht geöffnet ist, klicken Sie darauf, damit diese sich ausklappt:

Um dem Menü eine bestimmte Seite hinzuzufügen, setzen Sie einfach das Häkchen neben der relevanten Seite und klicken etwas weiter unten auf „Zum Menü hinzufügen“. Falls Sie Ihre zuvor erstellte Seite nicht finden können, gibt Ihnen WordPress die Möglichkeit, sich mit den Optionen „Zeige alle“ oder „Suchen“ weitere Elemente darstellen zu lassen.

Nach dem Klick auf den Button sieht das Menü in etwa wie folgt aus:

Schritt 3: Menüpunkte verschieben

Damit nun nicht einfach alle Seitentitel untereinander angezeigt werden, können Sie zusammengehörige Menüpunkte bündeln. Das geht ganz einfach mittels Klicken & Ziehen Ihrer Maus.

Der oben integrierte Menüpunkt Kursinhalte soll einige Seiten des WP-Kurses auflisten, um Besuchern der Website einen Überblick über den Kurs geben zu können. Dazu fügen wir aus der Seiten-Box die relevanten Seiten ein.

Diese werden dann zuerst wieder untereinander im Menü aufgelistet. Durch Klicken & Ziehen kann man die Elemente zum Menüpunkt „Kursinhalte“ hinzufügen. Eine gestrichelte Linie verrät, ob man lediglich die Position des Menüpunkts ändert oder ob der Menüpunkt unter dem Punkt „Kursinhalte“ eingefügt wird.

Wurden die gewünschten Seiten als Untermenüpunkt dem Punkt Kursinhalte hinzugefügt, stellt WordPress diese mit Einrückung dar:

Sobald Sie dann auf „Menü speichern“ klicken, wird das erstellte Menü auf der Website angezeigt. Und zwar an der Position, die Sie in Schritt 1 festgelegt haben. In unserem Beispiel war das das „Primäre Menü“.

Schritt 4: Erweiterte Menüeinstellungen

Wie Sie oben gelernt haben, können Sie sich über „Ansicht anpassen“ noch weitere Einstellungen anzeigen lassen. In der Grundinstallation sieht dies so aus:

Zur Erklärung:

• Angezeigter Name
  Definieren Sie, wie der Menüpunkt beschriftet werden soll. Wenn Sie beispielsweise eine Seite zum Menü hinzufügen, wird WordPress den Titel dieser Seite als Beschriftung einfügen. Sie können dies aber jederzeit ändern.
• HTML-Attribut title
  Das Titel-Attribut ist so nicht sichtbar. Viele Browser zeigen aber eine kleine Infobox an, wenn man im Frontend mit dem Mauszeiger auf dem Menüpunkt stehen bleibt. Man kann dieses Attribut für eine weitere Beschreibung nutzen.
• Link in einem neuen Tab öffnen
  Früher hieß dieser Punkt „Link in einem neuen Fenster öffnen“. Damit war etwas klarer, was das Setzen dieses Hakens eigentlich macht. Er öffnet den Link in einem neuen Browser-Tab.
• CSS-Klassen
  Wenn Sie sich mit CSS (einer Layoutsprache) auskennen, können Sie hier die CSS-Klassennamen durch Leerzeichen getrennt eingeben.
• Link-Beziehung (XFN)
  XFN steht für XHTML Friends Network. Man kann damit einen Beziehungsstatus angeben. Es gibt besondere Schlüsselwörter, die Sie hier benutzen müssen, um eine Beziehung darzustellen. Weitere Informationen dazu finden Sie auf der Seite von Wikipedia.
• Beschreibung
  Geben Sie hier einen Inhalt ein, den Sie zusätzlich zum Menüpunkt anzeigen wollen. Beachten Sie, dass nicht jedes Theme dies unterstützt.
• Ursprünglicher Name
  Wie oben beschrieben können Sie die Bezeichnung einer Seite verändern. Damit Sie nicht vergessen, wie der Titel der Seite ursprünglich war, wird er Ihnen hier noch einmal angezeigt.
• Entfernen (roter Link)
  Mit einem Klick darauf entfernen Sie den Menüeintrag aus Ihrem Menü.

Schritt 5: Links einfügen

Wenn Sie einen Beitrag, ein Schlagwort oder eine Kategorie einfügen, können Sie genauso vorgehen wie oben beschrieben. Die Schritte sind immer gleich. Außer beim Anlegen eines eigenen Links. Und das geht wie folgt:

Im linken Bildschirmrand (bei den Boxen) klicken Sie auf „Links“, bis das Menü sich aufklappt. Sie sehen dann folgendes:

Geben Sie im Feld URL die Adresse der externen Seite ein, die Sie verlinken wollen, zum Beispiel http://wikipedia.org. Unter Linktext geben Sie die Bezeichnung des Links ein, zum Beispiel „Wikipedia“.

Klicken Sie dann auf „Zum Menü hinzufügen“ und der Link wird ins Menü eingebunden. Vergessen Sie nicht, Ihr Menü zu speichern.

Wichtig
Vergessen Sie niemals das vorangestellte http:// oder https://. Ansonsten wird Ihr Link nämlich nicht funktionieren.

Schritt 6: Ansehen

Und wie sieht das Ganze aus? Das hängt natürlich ganz vom gewählten Theme ab. Im TwentySixteen-Theme würde es so aussehen:

• Unser Wikipedia-Link von oben ist ein externer Link. Er ist als solcher (natürlich) nicht erkenntlich. Der Benutzer merkt das erst, wenn er darauf klickt und sich dann ein neuer Tab öffnet.
• Wie Sie sehen wird ein Untermenü als eine Art „Box“ dargestellt. Diese öffnet sich, sobald man mit der Maus über dem Menü „Kursinhalte“ stehen bleibt.

Bei Mobilgeräten wird das Menü etwas anders dargestellt. Es öffnet sich erst dann, wenn der Benutzer auf den Button „Menü“ klickt. Das Untermenü öffnet sich erst dann, wenn man auf den Menüpunkt „Kursinhalte“ klickt. Hier das komplett geöffnete Menü auf einem Mobiltelefon: