Das Menü ist das Skelett Ihrer Website. Ein Besucher scannt es in Sekunden: Ist unklar, wohin er klicken soll, verlässt er die Seite. Der einfache WordPress-Builder unter „Design → Menüs" stellt eine Navigation in einer Minute zusammen, aber das Ergebnis wirkt wie eine bloße Textzeile. Keine Icons, kein fixiertes Verhalten beim Scrollen, keine ordentliche mobile Version.

Das Problem reicht tiefer, als es scheint: Die Standardfunktionalität genügt für die ersten Tage nach dem Launch, doch bald benötigen Sie Dinge, die im Kern schlicht nicht existieren. Icons für Menüpunkte, ein Login-Button direkt in der Navigation, ein Shortcode zum Einfügen eines Menüs in den Beitragstext, ein intelligentes mobiles Panel: All das erfordert entweder Code oder ein Plugin.

Dieser Artikel behandelt beide Ansätze: schlanke Anpassungen über functions.php und style.css sowie die besten aktiv gepflegten Plugins für erweiterte Menüs. Das Material funktioniert mit klassischen Themes, Block-Themes und in Kombination mit jedem gängigen Framework.

💡 Kurzer Überblick:

• Installieren Sie das Plugin Menu Icons und fügen Sie Menüpunkten in fünf Minuten Icons hinzu, ganz ohne Code
• Fügen Sie die Funktion wp_loginout in die functions.php ein, und ein Login-Button erscheint direkt in der Navigation
• Registrieren Sie einen Menü-Shortcode und geben Sie ein fertiges Menü an beliebiger Stelle der Website aus
• Fixieren Sie das Menü beim Scrollen mit drei Zeilen CSS oder einem von drei Plugins
• Wählen Sie einen erweiterten Builder aus drei Optionen: UberMenu, Max Mega Menu oder QuadMenu
• Richten Sie die mobile Navigation mit WP Mobile Menu oder Mobi ein, die eine touchfreundliche Oberfläche bieten

1. Menüpunkt-Icons via Menu Icons

Ein schneller Weg, die Navigation zu beleben: Fügen Sie Icons neben den Bereichsnamen hinzu. Das Auge „erfasst" ein Icon vor dem Text, und nach einigen Besuchen bleibt das Icon besser im Gedächtnis als jede Beschriftung.

Das kostenlose Menu Icons-Plugin vom ThemeIsle-Team erledigt diese Aufgabe, mit über 400.000 aktiven Installationen auf WordPress.org und einer Bewertung von 4,4. Kein Code erforderlich.

Schritte:

• Installieren Sie das Plugin über „Plugins → Installieren" und suchen Sie nach „Menu Icons"
• Aktivieren Sie es und gehen Sie zu „Design → Menüs"
• Klappen Sie einen beliebigen Eintrag aus, und ein Icon-Auswahlblock erscheint
• Wählen Sie ein Icon aus Dashicons (in WordPress integriert), Font Awesome oder laden Sie ein eigenes hoch
• Passen Sie Position und Größe an und speichern Sie

Im Hintergrund fügt das Plugin dem <li>-Element eine CSS-Klasse mit dem Icon hinzu: eine saubere Lösung ohne Theme-Konflikte. Es unterstützt Dashicons, Font Awesome, Elusive Icons und Genericons. Funktioniert mit jedem Menü, das über das standardmäßige wp_nav_menu registriert ist.

🔗 Menu Icons auf WordPress.org

2. Login- und Logout-Button direkt im Menü

Wenn Ihre Website eine Registrierung hat, benötigen Nutzer schnellen Zugriff, ohne die /wp-login.php-Seite suchen zu müssen. Ein „Anmelden"- oder „Abmelden"-Link sitzt direkt im Hauptmenü und ändert sich automatisch je nach Status.

Das lösen Sie mit einer Funktion in der functions.php:

1
function add_login_logout_link($items, $args) {
2
    $loginoutlink = wp_loginout('index.php', false);
3
    $items .= '<li>'. $loginoutlink .'</li>';
4
    return $items;
5
}
6
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

Der Code-Schnipsel hängt sich in wp_nav_menu_items ein und fügt ein <li> mit dem Link am Ende jedes Menüs an. Die Funktion wp_loginout() erkennt den Status selbstständig: Ist der Nutzer abgemeldet, zeigt sie „Anmelden"; ist er authentifiziert, „Abmelden" mit einer Weiterleitung auf dieselbe Seite.

Laden Sie die Website nach dem Speichern der Datei neu und prüfen Sie beide Zustände. Wenn Sie den Nutzer nach dem Login auf eine bestimmte Seite weiterleiten möchten, ersetzen Sie das erste Argument von wp_loginout() von 'index.php' durch die gewünschte URL.

3. Shortcode zur Anzeige eines Menüs an beliebiger Stelle

WordPress erlaubt es, ein Menü dem Header, Footer oder Sidebar-Bereich zuzuweisen, genau dort, wo das Theme Platz vorgesehen hat. Aber was, wenn Sie ein Menü innerhalb eines Beitrags, auf einer Landingpage oder in einem Text-Widget benötigen?

Die Antwort ist, einen eigenen Shortcode zu registrieren:

1
function menu_function($atts, $content = null) {
2
    extract(
3
        shortcode_atts(
4
            array( 'name' => null, ),
5
            $atts
6
        )
7
    );
8
    return wp_nav_menu(
9
        array(
10
            'menu' => $name,
11
            'echo' => false
12
        )
13
    );
14
}
15
add_shortcode('menu', 'menu_function');

Fügen Sie den Code in die functions.php ein, speichern Sie, und schreiben Sie an beliebiger Stelle der Website:

[menu name="main-menu"]

Entnehmen Sie den Namen unter „Design → Menüs", wo er über der Liste der Einträge erscheint. Der Shortcode ruft das standardmäßige wp_nav_menu() mit unterdrückter Ausgabe ('echo' => false) auf und gibt das fertige HTML-Markup zurück.

Auf diese Weise können Sie die allgemeine Navigation im Footer belassen, eine zusätzliche Navigation in der Sidebar eines bestimmten Beitrags platzieren und ein separates Menü für eine Landingpage zusammenstellen, ganz ohne Theme-Bindung.

4. Suchfeld in der Navigationsleiste

Das standardmäßige WordPress-Such-Widget lebt in der Sidebar. Wenn es jedoch keine Sidebar gibt oder diese auf mobilen Geräten nach unten rutscht, finden Besucher die Suche schlicht nicht. Verlagern wir sie direkt ins Menü.

Basisversion mit derselben wp_nav_menu_items-Filtertechnik:

1
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
2
function add_search_box( $items, $args) {
3
    $items .= '<li>'. get_search_form( false ). '</li>';
4
    return $items;
5
}

Die Funktion get_search_form(false) gibt das Suchformular-HTML zurück, ohne es auf dem Bildschirm auszugeben. Das Feld wird an den letzten Menüpunkt angehängt; Sie werden wahrscheinlich eine Positionierung benötigen. Fügen Sie dem <li> eine CSS-Klasse hinzu:

1
$items .= '<li class="searchbox-position">'. get_search_form( false ). '</li>';

Und legen Sie in der style.css Ihres Themes die Abstände fest:

1
.searchbox-position {
2
    margin-top: 15px;
3
    margin-right: 20px;
4
}

Drei Zeilen PHP und ein paar Zeilen CSS. Ergebnis: Das Suchfeld ist bei jeder Auflösung sichtbar.

5. Sticky-Menü beim Scrollen

Ein Sticky-Menü sorgt dafür, dass die Navigationsleiste am oberen Bildschirmrand haftet und beim Scrollen mitwandert. Das ist praktisch auf Landingpages, in langen Artikeln und in Shops: Man muss nicht zurückscrollen, um zu einem anderen Bereich zu navigieren.

Methode 1: CSS (kostenlos, ohne Plugins)

Ermitteln Sie den Selektor des Hauptmenüs in Ihrem Theme, üblicherweise .nav-menu, .genesis-nav-menu oder .main-navigation. Ergänzen Sie in der style.css:

1
.nav-menu {
2
    position: fixed;
3
    background: #333;
4
    top: 0px;
5
    right: 0px;
6
    left: 0px;
7
    z-index: 99;
8
}

Die entscheidende Zeile ist position: fixed. Sie entfernt den Block aus dem normalen Fluss und fixiert ihn relativ zum Browserfenster. top: 0; right: 0; left: 0 zieht das Menü auf volle Breite. Fügen Sie dem Inhalt ein oberes Padding hinzu, damit das Menü den Header nicht überdeckt.

Die CSS-Methode hat einen Nachteil: Nach dem Fixieren verlässt das Menü den Fluss und der Inhalt „springt" nach oben. Das lösen Sie, indem Sie dem Body ein padding-top in Höhe der Menühöhe geben.

Methode 2: Plugins (feinere Steuerung, kein Code)

Wenn Sie lieber keine Theme-Dateien anfassen möchten, finden Sie hier drei bewährte Werkzeuge.

myStickymenu ist ein kostenloses Plugin mit über 200.000 aktiven Installationen auf WordPress.org und einer Bewertung von 4,6. Es dockt an die Navigations-CSS-Klasse Ihres Themes an; geben Sie diese einfach in den Einstellungen an. Es ist responsiv: Auf Mobilgeräten wird der Sticky-Effekt automatisch deaktiviert. Es gibt ein Feld für benutzerdefinierte CSS-Stile und einen Modus „Haften mit Verzögerung" basierend auf Scroll-Pixeln.

Sticky Menu (or Anything!) On Scroll ist eine weitere kostenlose Option, die jedes beliebige Element per CSS-Selektor „anheften" kann: nicht nur ein Menü, sondern auch ein Logo, den gesamten Header oder einen Button. Es erfordert grundlegende HTML- und CSS-Kenntnisse, um den richtigen Selektor zu finden, bietet aber vollständige Freiheit.

UberMenu Sticky Extension ist ein Add-on zum UberMenu-Plugin für 8 $. Wenn UberMenu bereits installiert ist, fügt die Erweiterung den Sticky-Modus mit einem einzigen Schalter hinzu. Auf Mobilgeräten deaktiviert sie sich automatisch, um den Bildschirm nicht zu verdecken.

6. Menüpunkte aus dem WordPress-Admin entfernen

Wenn Sie eine Website an einen Kunden übergeben oder Autoren Zugriff gewähren, ist das Standard-Adminmenü zu „reichhaltig": über 10 Bereiche, von denen der Nutzer viele nicht benötigt und manche sogar gefährlich sind. Plugins und Theme-Einstellungen sollten nur für Administratoren zugänglich bleiben.

Der folgende Code entfernt alle übergeordneten Bereiche für alle Benutzer außer Administratoren:

1
if (!current_user_can( 'manage_options' )) {
2
    add_action( 'admin_menu', 'my_remove_menus', 999 );
3
}
4
function my_remove_menus() {
5
    remove_menu_page( 'index.php' );                  //Dashboard
6
    remove_menu_page( 'edit.php' );                   //Posts
7
    remove_menu_page( 'upload.php' );                 //Media
8
    remove_menu_page( 'edit.php?post_type=page' );    //Pages
9
    remove_menu_page( 'edit-comments.php' );          //Comments
10
    remove_menu_page( 'themes.php' );                 //Appearance
11
    remove_menu_page( 'plugins.php' );                //Plugins
12
    remove_menu_page( 'users.php' );                  //Users
13
    remove_menu_page( 'tools.php' );                  //Tools
14
    remove_menu_page( 'options-general.php' );        //Settings
15
}

Das Snippet gehört in die functions.php. Die Prüfung !current_user_can('manage_options') schließt Administratoren aus; diese sehen alles. Andere Rollen erhalten eine bereinigte Liste, basierend auf dem, was Sie belassen.

Entfernen Sie nur die remove_menu_page-Zeilen, die Sie benötigen. Für einen Redakteur könnten Sie beispielsweise „Beiträge", „Medien" und „Seiten" belassen und alles andere entfernen. Wichtiger Hinweis: Die Funktion blendet Einträge aus dem Menü aus, blockiert aber nicht den direkten URL-Zugriff. Für eine vollständige Seitenabsicherung konfigurieren Sie die Berechtigungen in der Benutzerrolle.

7. Erweiterte Plugins für die Menüerstellung

Wenn der Standard-Editor nicht ausreicht, benötigen Sie Mega-Menüs mit Bildern, Tabs, Formularen und dynamischen Elementen. Hier sind drei aktiv gepflegte Plugins für unterschiedliche Aufgaben und Budgets.

7.1 UberMenu: der funktionsreichste Builder

Ein Marktveteran mit über 43.000 Verkäufen auf CodeCanyon. Erstellt responsive Mega-Menüs mit Touch-Unterstützung. Sie können Bilder, Videos, Karten und ein fertiges Kontaktformular in Untermenüs platzieren. Über 50 Stileinstellungen mit Live-Vorschau, automatische Untermenü-Generierung aus Inhalten und Tabs unter Einträgen. Integriert sich mit WooCommerce: kann Produktkategorien dynamisch abrufen.

Preis: ab 26 $. 🔗 UberMenu auf CodeCanyon

7.2 Max Mega Menu: der kostenlose Spitzenreiter

Das beliebteste kostenlose Mega-Menü-Plugin auf WordPress.org: über 400.000 aktive Installationen und eine Bewertung von 4,8. Erstellt Mega-Menüs per Drag-and-Drop im gewohnten Bildschirm „Design → Menüs", ohne separate Oberfläche. Unterstützt Spaltenraster, Widgets in Untermenüs, Icons und einen Off-Canvas-Modus für Mobilgeräte. Das Frontend-Skript wiegt unter 2 KB gzipped und beeinträchtigt die Seitenladezeit daher nicht.

• Vorteile: integriert in die native WordPress-Menü-Oberfläche, minimales Skriptgewicht, Widgets in Untermenüs, die kostenlose Version deckt 90% der Anwendungsfälle ab
• Nachteile: einige erweiterte Stile und Tab-Menüs nur in Pro (29 $/Jahr)
• Preis: Kostenlos / Pro ab 29 $/Jahr
• Download: 🔗 Max Mega Menu auf WordPress.org

7.3 QuadMenu: Tabs, Karussells und vollständige Anpassung

QuadMenu verwandelt das Standardmenü in ein Mega-Menü mit Tabs und Karussells und bietet mehr Funktionen als Max Mega Menu, allerdings mit einer etwas steileren Lernkurve. Unterstützt vertikale und horizontale Layouts, Integration mit Elementor und Beaver Builder, Google Fonts und über 2.000 Font Awesome Icons. Dunkle und helle Themes direkt einsatzbereit, responsive mobile Version mit Off-Canvas-Panel.

• Vorteile: Tabs und Karussells innerhalb des Menüs, tiefe Integration mit Page Buildern, entwicklerfreundlich (Hooks und Filter)
• Nachteile: aufwändigere Ersteinrichtung als bei Max Mega Menu, einige Funktionen nur in der kostenpflichtigen Version
• Preis: Kostenlos / Premium ab 15 $/Jahr
• Download: 🔗 QuadMenu auf WordPress.org

8. Mobile Menüs für Smartphones und Tablets

Mobiler Traffic hat Desktop längst überholt. Wenn das Menü auf einem Handy zu einem unleserlichen Durcheinander wird, springen Besucher ab. Ein responsives Theme skaliert das Desktop-Menü für schmale Bildschirme, aber die Struktur bleibt dieselbe: aus fünf oder sechs Einträgen in einer Reihe wird eine lange vertikale Liste. Ein spezialisiertes Plugin stellt einen Hamburger-Button, Wischgesten und Touch-Optimierung bereit.

8.1 WP Mobile Menu: schnelles Off-Canvas für jede Website

Das beliebteste kostenlose Mobile-Menü-Plugin auf WordPress.org: über 80.000 aktive Installationen und eine Bewertung von 4,7. Fügt ein Off-Canvas-Panel hinzu, das beim Tippen auf den Hamburger-Button herausgleitet. Unterstützt drei Verschachtelungsebenen, eine Suche innerhalb des mobilen Menüs, Icons und Farbanpassungen. Das Verhalten für verschiedene Bildschirmauflösungen wird separat konfiguriert.

• Vorteile: minimale Einrichtung (funktioniert sofort nach der Aktivierung), adaptiv (erscheint nur auf Mobilgeräten), keine Konflikte mit Themes
• Nachteile: einige erweiterte Stile und WooCommerce-Integration nur in der Pro-Version (19 $/Jahr)
• Preis: Kostenlos / Pro ab 19 $/Jahr
• Download: 🔗 WP Mobile Menu auf WordPress.org

8.2 Mobi: Drag-and-Drop-Menü-Builder für Mobilgeräte

Ein intuitiver Drag-and-Drop-Menü-Builder. Das Menü kann am oberen oder unteren Bildschirmrand platziert werden. Enthält über 700 integrierte Icons, eine beliebige Anzahl von Social-Media-Icons auf dem Panel und Google Fonts für das Styling. Sie können die Menüsichtbarkeit für Gäste und eingeloggte Benutzer getrennt steuern. Gut geeignet für Websites, bei denen das mobile Menü wie eine eigenständige Oberfläche wirken soll und nicht wie eine geschrumpfte Kopie der Desktop-Version.

Preis: ab 16 $. 🔗 Mobi auf CodeCanyon

⁉️🤔 Häufig gestellte Fragen

Kann ich ein Menü komplett ohne Plugins, nur mit Code erstellen?

Ja, alle beschriebenen Techniken (Icons, Sticky-Effekt, Shortcode, Login-Button) lassen sich über functions.php und style.css umsetzen, ohne Drittanbieter-Tools zu installieren. Plugins sparen lediglich Zeit und bieten eine grafische Oberfläche für diejenigen, die keinen Code anfassen möchten. Wenn Sie mit PHP und CSS vertraut sind, sind Plugins nicht erforderlich. Benötigen Sie jedoch Mega-Menüs oder ein Off-Canvas-Panel mit Animationen, spart ein fertiges Plugin Stunden manueller Codierung.

Welches Plugin sollte ich für einen WooCommerce-Shop wählen?

Für einen Shop ist ein Mega-Menü mit Produktkategorien, Bildern und Filtern entscheidend. UberMenu leistet hier das Beste: Es zieht dynamisch WooCommerce-Kategorien und baut Untermenüs im laufenden Betrieb auf. Eine kostenlose Alternative ist Max Mega Menu mit Widgets innerhalb der Untermenüs: Kategoriebilder werden über das standardmäßige WooCommerce-Widget eingebunden, und die Suche erhält eine separate Zeile.

Was tun, wenn die Website nach dem Hinzufügen von Code zur functions.php nicht mehr lädt?

Stellen Sie die Originaldatei per FTP oder über den Dateimanager Ihres Hostings wieder her. Erstellen Sie vor jeder Bearbeitung der functions.php ein Backup. Ein alternativer, sicherer Ansatz ist das Code Snippets-Plugin: Es erlaubt Ihnen, PHP-Snippets über das Backend hinzuzufügen und deaktiviert den Code bei einem schwerwiegenden Fehler automatisch, sodass die Website wieder funktionsfähig wird.

Muss ich das Menü nach einem Theme-Wechsel aktualisieren?

Menüs sind an einen Anzeigebereich (Position) gebunden, den das Theme registriert. Bei einem Theme-Wechsel ändern sich diese Bereiche, und Sie müssen das Menü unter „Design → Menüs" auf dem Tab „Positionen verwalten" neu zuweisen. Die Einträge selbst, ihre Reihenfolge und Verschachtelung bleiben erhalten; lediglich die Positionsbindung geht verloren.

Wie überprüfe ich, ob das mobile Menü auf allen Geräten funktioniert?

Öffnen Sie die Website im Modus für responsives Design in den Chrome DevTools (F12 → Gerätesymbol) und gehen Sie sechs Breakpoints durch: 320px, 375px, 414px, 768px, 1024px, 1280px. Prüfen Sie den Hamburger-Button (sollte über dem Inhalt liegen, nicht verdeckt), die Reaktionsgeschwindigkeit der Animation und die Sichtbarkeit aller Menüpunkte ohne horizontales Scrollen. Beliebte Plugins wie WP Mobile Menu erlauben es Ihnen, den Breakpoint manuell festzulegen, sodass Sie für Ihr spezifisches Theme abweichende Auslösebreiten definieren können.

Was Sie für Ihre Aufgabe verwenden: die abschließende Übersicht

Kurz gesagt: Schöpfen Sie zuerst die integrierten Möglichkeiten von WordPress und leichte CSS-Anpassungen aus, und fügen Sie dann Plugins hinzu. So bleibt der Stack schlank, die Website schnell und die Navigation genau das, was die Leser brauchen.

• Einfacher Blog oder Visitenkarten-Website: Beginnen Sie mit Menu Icons (kostenlos) und einem Sticky-Menü mit drei Zeilen CSS. Das reicht aus, damit die Navigation nicht mehr unfertig wirkt.
• Website mit Registrierung: Fügen Sie einen Login-Button über wp_loginout() hinzu. Die Nutzer werden nicht mehr nach der Login-Seite suchen müssen.
• Landingpage oder langer Artikel: Der [menu]-Shortcode platziert Navigationsblöcke an beliebiger Stelle im Seiteninhalt.
• E-Commerce-Shop oder Content-Portal: Hier benötigen Sie ein Mega-Menü. Setzen Sie auf UberMenu, wenn das Budget es erlaubt und Sie maximale Funktionen benötigen, oder auf Max Mega Menu für typische Aufgaben (kostenlos und ohne Geschwindigkeitseinbußen).
• Mobile Zielgruppe dominiert: WP Mobile Menu deckt 9 von 10 Szenarien ab: installiert sich in einer Minute und liefert sofort ein Off-Canvas-Panel mit Suche. Wenn Sie eine eigenständigere mobile Oberfläche benötigen, sehen Sie sich Mobi an.

Machen Sie es sich zur Regel: ein Plugin pro Aufgabe. Installieren Sie kein Mega-Menü nur für ein paar Icons und schreiben Sie keinen Code für ein Off-Canvas-Panel, wenn ein Plugin dies in einer Minute erledigt. Die Balance zwischen Website-Geschwindigkeit und Navigationskomfort ist genau das, was die Leser auf der Seite hält.