Wie erstelle ich ein Menü?

Wer zum ersten Mal bei WordPress ein Blog einrichtet, möchte meistens das neue Blog auch mit einem Menü ausstatten. Manchen reicht eine ganz einfache Navigationsleiste mit zwei Reitern, die auf das Impressum und einen kleinen “Über das Blog”-Text verweisen. Andere wünschen eine komplexere Navigation mit Drop-Down-Menü, die es Lesenden ermöglicht, mit möglichst wenig Suchaufwand die Themen zu finden, die sie interessieren. Wie so vieles bei WordPress ist das Erstellen des Menüs einfach, aber nicht ganz intuitiv. In diesem Artikel wird Schritt für Schritt erklärt, welche Elemente über das Menü verfügbar gemacht werden können, wie ein Drop-Down-Menü gestaltet werden kann und wo das Menü positioniert werden kann. Der Sonderfall Akkordeon-Menü wird ganz zum Schluss behandelt.

Schritt 1: Menü anlegen und Position bestimmen

Die Gestaltungsoberfläche für die Menüs findet sich in der linken Seitenleiste unter Design > Menüs.

Um ein Menü erstellen zu können, muss zuallererst eine Art Rahmen für das Menü angelegt werden. Weil es möglich ist, im Backend mehrere Menüs zu “lagern”, auch wenn sie nicht online sind, braucht das Menü zunächst einen Namen. Jedes de.hypotheses-Blog bekommt ein kleines Menü mitgeliefert, das einfach “Menü” oder “Menu” heißt (je nach ausgewählter Sprache). In diesem kann direkt weitergearbeitet werden: Dann einfach dieses Menü zum Bearbeiten auswählen. Soll ein neues Menü angelegt werden, wird im weißen Kasten auf den blau unterlegten Text “erstelle ein neues Menü” geklickt. Hier muss nun ein Name für das Menü eingegeben werden. In diesem Schritt wird unter “Menü-Einstellungen” auch gleich ausgewählt, an welcher Position im Theme das Menü erscheinen soll –  wo genau es also im Blog zu sehen sein soll. (Wenn hier nichts aktiviert wird, wird das Menü im Frontend nicht zu sehen sein!). Dann auf “Menü erstellen” klicken –  und schon ist der Rahmen fertig, die jetzt mit Inhalten bespielt werden kann.

Schritt 2: Dem Menü Elemente hinzufügen

Einer Menüleiste können vier verschiedene Elemente hinzugefügt werden (mehr mit ein paar Tricks, dazu mehr unten):

• Seiten
• Beiträge
• Individuelle Links und
• Kategorien

Der nächste Schritt ist denkbar einfach: Die verschiedenen Elemente werden unter “Menüeinträge hinzufügen” dem Menü durch einen Klick ins Auswahlfeld hinzugefügt. Dabei wird schon eine Vorschau der zuletzt bearbeiteten Seiten gezeigt. Wenn eine Seite hinzugefügt werden soll, die hier nicht zu sehen ist, kann sie über den Reiter “Alle” oder “Suchen” gefunden werden. Analog funktioniert auch das Auswählen von Beiträgen für das Menü. Typische Beispiele für Seiten wären das Impressum, eine “Über uns” oder “Autor:innen”-Seite. (Mehr Informationen zum Unteschied zwischen Beiträgen und Seiten finden sich in diesem Artikel: Artikel und Seiten erstellen).

Neben Beiträgen und Seiten können hier auch individuelle Links und Kategorien dem Menü hinzugefügt werden. Um einen Link zu einer anderen Webseite –  beispielsweise der Homepage der Universität oder des Forschungsprojekts, an welches das Blog angegliedert ist –  zum Menü hinzuzufügen wird unter “Individuelle Links” die URL eingefügt (zum Beispiel: https://www.maxweberstiftung.de/) und direkt darunter der Titel des Elements, der im Menü sichtbar sein soll (zum Beispiel: Max Weber Stiftung) eingetragen.

Schließlich besteht die Option, Kategorien zum Menü hinzuzufügen. Das ist vor allem dann sinnvoll, wenn das Blog schon länger bespielt wurde und die Kategorien auch befüllt wurden. Dann werden durch einen Klick auf diesen Reiter alle Blogposts, die unter dieser Kategorie abgelegt wurden, auf einen Blick sichtbar.

Übrigens: Zwischendurch das Speichern nicht vergessen!

Sonderfall: Schlagwörter

Mit einem kleinen Trick, der uns in anderer Form auch später noch begegnen wird, können auch Schlagwörter über das Menü verlinkt werden –  auch wenn das per se nicht vorgesehen ist. Das wird über die individuelle URL gemacht: Dem Element wird unter “Link-Text” wieder ein Name gegeben, in diesem Fall vermutlich den Namen des Schlagworts. Dann wird die URL des gewünschten Schlagworts kopiert, die durch einen Klick auf das Schlagwort erhalten wird und die immer das Schema https://namemeinesblogs/tag/namemeinesschlagworts hat (beispielsweise: https://bloghaus.hypotheses.org/tag/themes). Nun wird diese URL in das untere Feld kopiert. Voilà!

Schritt 3: Menüelemente anordnen – das Drop-Down-Menü

Sind jetzt alle Elemente des Menüs in der Menü-Struktur rechts vorhanden, können diese noch angeordnet werden. Per Voreinstellung werden sie in der Reihenfolge im Menü angezeigt, in der sie hinzugefügt wurden. Hier können die Elemente jetzt noch per drag & drop von oben nach unten verschoben werden (ganz unten ist jeweils ganz rechts im Menü) und es können Drop-Down-Elemente angelegt werden.

Dazu wird zunächst der Reiter ausgesucht, der als oberstes Element des Drop-Down-Menüs angezeigt werden soll. Hierunter werden dann, wieder per drag & drop, die Elemente hingezogen, die sich erst beim Klick auf den Reiter öffnen sollen. Einmal nach rechts ziehen – und das Element wird zum Drop-Down-Element. Hier im Bloghaus sieht das so aus:

Wer also im Menü dieser Seite auf “Überblick” klickt, bekommt alle Beiträge, die hier eingerückt zu sehen sind, als Drop-Down-Elemente zu sehen.

Sonderfall: Dem Drop-Down-Menü einen leeren Reiter hinzufügen

Was aber, wenn der oberste Reiter gar keinen eigenen Inhalt enthalten soll? Das ist zum Beispiel hier im Bloghaus beim Reiter “Überblick” so. Auch hier kommt wieder ein Trick in Spiel: Das Element wird als individueller Link angelegt. Dort wird unter Link-Text der Titel eingetragen und statt einer URL ein Rautezeichen eingegeben: #. Nun kann das leere Element dem Menü hinzufügt und darunter die Drop-Down-Elemente angeordnet werden.

Verschiedene Menüpositionen der unterschiedlichen Themes

Je nach Theme werden verschiedene Positionen im Blog für das Menü angeboten. Welche Positionen für das jeweils genutzte Theme angeboten werden, ist aus der Menüansicht selbst erkenntlich: Direkt unterhalb der Menüelemente ebenso wie unter dem Reiter “Positionen verwalten” kann bestimmt werden, an welcher Stelle im Blog das Menü stehen soll, ob es beispielsweise im Header oder im Footer oder – das ist zum Beispiel bei Hueman möglich – als Topbar (oberhalb des Headers) angezeigt werden soll. Die verschiedenen Menüpositionen finden sich übrigens auch im Customizer wieder (Design > Customizer > Menüs).

Die Themes messen den Menüs unterschiedliche Bedeutung bei. Bei den “Twenties” ist das Menü das Menü visuell nicht abgehoben und sieht etwas dezenter aus, bei Hueman lässt sich eine Hintergrundfarbe für das Menü definieren, sodass es visuell stärker vom Hintergrund abgehoben ist (Design > Customizer > Header-Design > Header-Gestaltung: Farben und anderes: Bei “Header-Menü Hintergrund” die Farbe auswählen oder den Farbcode eingeben).

Menüs für Smartphones und Tablets definieren

Einige Themes (Twenty Twenty, Hueman) bieten die Möglichkeit, für die Nutzung auf mobilen Geräten ein separates Menü zu gestalten und zu aktivieren. Das ist zum Beispiel dann sinnvoll, wenn man ein sehr komplexes und verschachteltes Drop-Down-Menü hat. Wird kein gesondertes mobiles Menü angelegt, wird automatisch das Menü in der mobilen Ansicht gezeigt, das dem Header oder der Topbar zugewiesen wurde:

Ein Akkordeon-Menü erstellen

Als Akkordeon- oder Zieharmonika-Menü wird eine Ansicht bezeichnet, in der sich die Unterpunkte eines Menüs erst beim Klick auf den obergeordneten Punkt öffnen, wie zum Beispiel das FAQ auf de.hypotheses.org. Ein Akkordeon-Menü ist kein Menü im klassischen Sinne, also keine Navigationsleiste, die an einer zentralen Stelle des Blogs auffindbar ist und von allen Seiten und Beiträgen aus erreicht werden kann. Das Akkordeon-Menü ist vielmehr nur über eine Seite oder einen Beitrag erreichbar. In manchen Fällen – wie zum Beispiel bei einem FAQ – kann es aber durchaus sinnvoll sein, ein Akkordeon-Menü anzulegen.

Hierzu empfehlen sich zumindest grundlegende html-Kenntnisse. Das Akkordeon-Menü wird über individuellen html-Code angelegt. Dazu können entweder im visuellen Editor die Blöcke “individuelles html” hinzugefügt werden oder es wird gleich im Code-Editor gearbeitet (das ist über das Drei-Punkt-Menü in der oberen rechten Ecke der Beitragsansicht erreichbar).

Wir haben dazu folgenden html-Code genutzt:

<summary style="cursor: pointer;line-height: 1.6em;font-size:1.3em"> Hier den Titel einfügen </summary>
<p> Hier die Antwort einfügen </p></details>

Soll mit fetter oder kursiver Schrift gearbeitet werden oder Hyperlinks verwendet werden, müssen diese natürlich auch in html eingegeben werden – eine Google-Suche lieft dazu zahlreiche Vorlagen.

Von denkbar einfach bis durchaus komplex ist also alles drin bei WordPress-Menüs. Wir wünschen viel Freude beim Experimentieren!

---

---