Individuelle Menüs in WordPress anlegen

Eigene Menüs mit WordPress anlegen.

Eine eigene Seitenstruktur mit WordPress anzulegen ist relativ einfach, bietet aber mehr Möglichkeiten als auf den ersten Blick vermutet. Egal ob man die Reihenfolge seiner Menüpunkte, ein Menü über ein Widget in der Sidebar einbinden möchte oder ein Menüpunkt auf eine bestimmte Kategorie zeigen soll. In diesem Artikel werden die wichtigsten Möglichkeiten zur Gestaltung eines individuellen Menüs erklärt.

Übersicht

Unter dem Punkt Design-> Menüs können neue Menüs angelegt werden.

Neue Menüs anlegen.

Neue Menüs anlegen.

Im nächsten Fenster kann man jetzt seine Menüs anlegen. Dabei hat man die Möglichkeiten einen Namen für sein Menü festzulegen. Dieser Name wird später aber nicht auf der eigentlichen Seite sichtbar. Er dient nur zur internen Verwaltung.

Ein möglicher Name: "Hauptmenü".

Ein möglicher Name: „Hauptmenü“.

 

Direkt darunter folgen die eigentlichen Seiten des Menüs. Hier werden die Seiten aufgelistet, welche später angezeigt werden sollen.

Die Menüstruktur.

Die Menüstruktur.

Im unteren Abschnitt gibt es noch Einstellungen für das automatische Hinzufügen von Seiten zu dem Menü und der Position im aktivierten Theme.

Die Einstellungen.

Die Einstellungen.

Menü erstellen

Menüs sind folgendermaßen aufgebaut: Titel der angezeigt werden soll und der Verweis. Das kann eine Seite, eine Kategorie oder ein Link sein. Dabei kann die Reihenfolge per Drag and Drop verändert werden. Dadurch kann man auch Unterpunkte erstellen.

Ein neues Menü wird angelegt, in dem wir den Namen eingeben und das Menü erstellen:

Der Name unseres Menüs.

Der Name unseres Menüs.

Jetzt hat man die Möglichkeit das Menü anzupassen und Seiten hinzuzufügen.

Seiten hinzufügen

Seiten die im Menü angezeigt werden sollen, werden angehakt und über „Zum Menü hinzufügen“ unserem Menü hinzugefügt:

Seiten hinzufügen.

Seiten hinzufügen.

Der Menüpunkt wurde unserer Seitenstruktur hinzugefügt:

Unser Menü hat nun eine Seite.

Unser Menü hat nun eine Seite.

Damit das Menü auch wirklich auf unserer Seite angezeigt wird, muss man noch die Position festlegen. Die Möglichkeiten variieren je nach Theme, aber für den Anfang ist wichtig das Menü als „Primäres Menü“ festzulegen.

Das Menü wird als Hauptmenü festgelegt.

Das Menü wird als Hauptmenü festgelegt.

Das Menü kann man jetzt abspeichern und anschließend ist es bereits auf seinem Blog aktiv:

Unsere Menü besteht jetzt aus einer Seite.

Unser Menü besteht jetzt aus einer Seite.

Unser Menü besteht jetzt aus einem Punkt, welcher auf diese Seite verweist.

Element aus Menü entfernen

Wenn man ein Element aufklappt, kann man es wieder entfernen.

Einen Menüpunkt kann man auch löschen.

Einen Menüpunkt kann man auch löschen.

Reihenfolge der Seiten ändern

Die Reihenfolge ist standardmäßig alphabetisch. Sie lässt sich aber ganz einfach per Drag and drop anpassen.

Unterpunkte erstellen

Zieht man ein Element auf ein anderes, so wird dieses als Unterpunkt angezeigt. Dadurch verschachteln sich die Menüelemente und man kann sie schön kategorisieren. Es ist auch möglich mehrere Ebenen an Unterpunkt

Seiten per Drag und Drop anordnen.

Seiten per Drag and drop anordnen.

Weitere Elemente hinzufügen

Einem Menü kann man nicht nur Elemente hinzufügen die auf Seiten zeigen, sondern zum Beispiel auch direkt auf Kategorien verweisen. Um alle Möglichkeiten sichtbar zu machen, muss man diese rechts oben über die Optionen Schaltfläche aktivieren:

Über die Optionen werden weiter Möglichkeiten sichtbar.

Über die Optionen werden weiter Möglichkeiten sichtbar.

Alle Optionen.

Alle Optionen.

Wir können unsere Menü Einträge also nicht nur auf Seiten, sondern auch auf Schlagworte (Tags) etc. zeigen lassen. Die erweiterten Menüeigenschaften bieten auch sinnvolle Möglichkeiten, welche später erklärt werden.

Element auf Kategorie und Beiträge zeigen lassen

Hat man über die Optionen eine Haken bei Kategorien und Beiträge gesetzt, werden diese nun in der Übersicht aufgelistet:

Beiträge und Kategorien können ebenfalls verlinkt werden.

Beiträge und Kategorien können ebenfalls verlinkt werden.

Damit ist es sehr einfach auf bereits veröffentlichte Beiträge oder gleich auf eine Kategorie zu verlinken.

Einen Link zum Menü hinzufügen

Man kann auch Elemente hinzufügen und diese auf eine beliebige URL zeigen lassen. Dadurch kann man auch auf externe Seiten wie das Facebook Profil zeigen.

In den Optionen muss ein Haken bei Links gesetzt sein. Anschließend gibt man den vollständigen Link und einen Anzeigetext ein.

Auf externe Inhalte verlinken.

Auf externe Inhalte verlinken.

Seite in einem neuen Fenster öffnen

Die Optionen bieten noch eine weiter schöne Möglichkeit: Das Öffnen einer Seite in einem neuen Fenster beziehungsweise Tab.

Optionen für das Linkziel

Optionen für das Linkziel

Damit steht bei den einzelnen Menüpunkten die Optionen zum Öffnen der Seite in einem neuen Fenster zur Verfügung.

Seite in neuem Fenster öffnen.

Seite in neuem Fenster öffnen.

Übergeordnetes Element nicht anklickbar machen

Hat man ein verschachteltes Menü so enthält die übergeordnete Seite nicht immer Inhalt. Damit man nicht darauf klicken kann und der Besucher auf eine leere Seite verwiesen wird, kann man eine Seite auch nicht anklickbar machen.

Dazu legt man die übergeordnete Seite einfach als Link an und gibt bei der URL zum Beispiel die Adresse der eigenen Seite ein. Nachdem die Seite dem Menü hinzugefügt wurde, entfernt man die URL einfach wieder. Alternativ kann man auch ein # Symbol als URL verwenden.

Beim Klick passiert nichts.

Beim Klick passiert nichts.

Element direkt mit einem Autor verknüpfen

Um über das Menü direkt auf alle Artikel eines bestimmten Autors verlinken zu können, wird ein neuer Link hinzugefügt. Dabei reicht es aus, dass der Link in folgendem Format aufgebaut ist:

http://www.domain.de/author/namedesautors

Damit kommt man auf die Übersichtsseite von WordPress, welche alle Artikel des angegebenen Autors anzeigt.

HTML Attribut „Title“ anpassen

Der Text, der angezeigt werden soll, wenn man mit der Maus über einen Menüpunkt geht, lässt sich manuell anpassen. Das ist sicher sinnvoll, wenn man noch eine Möglichkeit für Suchmaschinenoptimierung sucht.

Angepasstes title Attribut.

Angepasstes title Attribut.

Und im Browser wenn man die Maus lange genug über dem Menüpunkt ruhen lässt:

Mouseover Effekt.

Mouseover Effekt.

Ein Menü in der Sidebar anzeigen

Über ein Widget kann man ein Menü auch in der Sidebar anzeigen lassen. Dazu geht man in den Widget Bereich und sucht das Widget „Individuelles Menü“.

Widget Menü

Widget Menü

Das Widget für ein individuelles Menü in der Sidebar.

Das Widget für ein individuelles Menü in der Sidebar.

Mit diesem Widget legt man fest, in welcher Sidebar (falls man mehrere hat) das Menü erscheinen soll. Außerdem muss noch eingestellt werden welches Menü das Widget anzeigen soll. Im oberen Teil haben wir gesehen, dass man mehrere Menüs anlegen kann. Somit kann man ein individuelles Menü nur für die Sidebar festlegen.

Menüpunkte formatieren

Einzelnen Menüpunkten kann man auch CSS Klassen zuweisen. Dadurch hat man viele Möglichkeiten das Aussehen des Menüs ziemlich einfach zu verändern. Eine Möglichkeit ist die Schriftart zu ändern oder vor dem Text zum Beispiel in Icon anzeigen zu lassen.

Diese erweiterte Option muss über das Menü sichtbar gemacht werden und anschließend wird eine CSS Klasse eingetragen.

CSS Attribut aktivieren.

CSS Attribut aktivieren.

CSS Anpassung für die Menüs.

CSS Anpassung für die Menüs.

Die CSS Klasse muss natürlich auf der Seite zur Verfügung stehen. Diese oben angezeigte ist eigentlich eine Klasse aus einem Font, angewendet sieht es dann so aus:

Unsere angewandte CSS Klasse.

Unsere angewandte CSS Klasse.

Und das Ganze ohne eine Zeile programmieren zu müssen.

2 Kommentare

  1. Andy   •  

    Danke für die sehr anschauliche und übersichtliche Anleitung, die sich in der Praxis leicht umsetzen lassen dürfte.

  2. Jacqueline Wesling   •  

    Hey! Danke für die Anleitung, schade, dass es diese nur als Bilder gibt. Videoanleitungen finde ich persönlich mittlerweile hilfreicher und verständlicher.

    Dennoch vielen Dank!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.