Ein vertikales Navigationsmenü in WordPress: Dein Leitfaden

Die Navigation ist ein entscheidender Bestandteil jeder WordPress-Website. Sie ermöglicht es Besuchern, sich leicht zurechtzufinden und die gewünschten Inhalte schnell zu finden. Während horizontale Menüs üblich sind, bietet ein vertikales Navigationsmenü eine interessante Alternative, die die Benutzererfahrung verbessern und die Ästhetik deiner Website aufwerten kann. In diesem Artikel werden wir uns eingehend mit dem Erstellen und Anpassen vertikaler Navigationsmenüs in WordPress befassen, insbesondere im Kontext deutscher Webstandards und Nutzererwartungen.

Warum ein vertikales Navigationsmenü in WordPress wählen?

Ein vertikales Navigationsmenü kann aus verschiedenen Gründen eine gute Wahl für deine WordPress-Website sein. Hier sind einige Vorteile:

Verbesserte Sichtbarkeit: Ein vertikales Menü, das an der Seite der Seite platziert ist, kann immer sichtbar sein, selbst wenn der Benutzer scrollt, was die Navigation erleichtert.
Mehr Platz für Menüpunkte: Vertikale Menüs können mehr Menüpunkte aufnehmen als horizontale Menüs, insbesondere wenn du eine Website mit vielen Inhalten hast.
Modernes Design: Ein gut gestaltetes vertikales Menü kann deiner Website ein modernes und ansprechendes Aussehen verleihen.
Bessere Benutzererfahrung auf Tablets und Desktops: Auf größeren Bildschirmen bietet ein vertikales Menü eine gute Balance zwischen Funktionalität und Ästhetik.
Gut geeignet für Content-lastige Websites: Blogs, Nachrichtenportale oder Online-Magazine profitieren oft von der klaren Struktur, die ein vertikales Menü bietet.

Methoden zum Erstellen eines vertikalen Navigationsmenüs in WordPress

Es gibt verschiedene Möglichkeiten, ein vertikales Navigationsmenü in WordPress zu erstellen. Wir werden die gängigsten Methoden vorstellen:

1. Verwendung des WordPress-Menü-Editors und CSS

Dies ist die einfachste Methode und erfordert keine Plugins. Du verwendest den integrierten WordPress-Menü-Editor und stylest das Menü dann mit benutzerdefiniertem CSS, um es vertikal anzuordnen.

Gehe zu Design > Menüs in deinem WordPress-Dashboard.
Erstelle ein neues Menü oder bearbeite ein bestehendes.
Füge die gewünschten Seiten, Beiträge, Kategorien oder benutzerdefinierten Links zum Menü hinzu.
Wähle einen geeigneten Anzeigeort für das Menü. Dies ist oft ein Sidebar-Bereich.
Speichere das Menü.
Gehe zu Design > Customizer > Zusätzliches CSS.

Füge den folgenden CSS-Code hinzu, um das Menü vertikal anzuordnen:


        #sidebar-primary ul.menu {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        #sidebar-primary ul.menu li {
          display: block;
        }

        #sidebar-primary ul.menu a {
          display: block;
          padding: 10px;
          text-decoration: none;
          color: #333; /* Passe die Farbe an */
        }

        #sidebar-primary ul.menu a:hover {
          background-color: #f0f0f0; /* Passe die Hover-Farbe an */
        }

Wichtig: Passe den Selektor #sidebar-primary ul.menu an den spezifischen CSS-Klassennamen oder IDs deines Menüs an. Du findest den richtigen Selektor, indem du den Quellcode deiner Website untersuchst.

Passe das CSS nach Bedarf an, um Farben, Schriftarten und Abstände zu ändern.
Veröffentliche die Änderungen.

2. Verwendung eines WordPress-Plugins

Es gibt zahlreiche WordPress-Plugins, die das Erstellen vertikaler Navigationsmenüs vereinfachen. Einige beliebte Optionen sind:

Vertical Menu: Ein einfaches und benutzerfreundliches Plugin zum Erstellen responsiver vertikaler Menüs.
Max Mega Menu: Ein leistungsstarkes Plugin, mit dem du komplexe Mega-Menüs erstellen kannst, einschließlich vertikaler Menüs.
Responsive Menu: Ideal für mobile responsives Design, kann auch für vertikale Menüs verwendet werden.

Die Verwendung eines Plugins kann die Anpassung vereinfachen und zusätzliche Funktionen wie Animationen, Symbole und Dropdown-Menüs bieten.

Installiere und aktiviere das gewünschte Plugin.
Befolge die Anweisungen des Plugins, um ein vertikales Menü zu erstellen und anzupassen. Die meisten Plugins bieten eine intuitive Benutzeroberfläche zum Konfigurieren der Menüoptionen.
Platziere das Menü in einem Sidebar-Bereich oder an einer anderen geeigneten Stelle auf deiner Website mithilfe eines Widgets oder Shortcodes.
Passe das Design des Menüs mit den Optionen des Plugins oder mit benutzerdefiniertem CSS an.

3. Bearbeiten der Theme-Dateien (für fortgeschrittene Benutzer)

Wenn du mit der Bearbeitung von Theme-Dateien vertraut bist, kannst du das Menü direkt in deinem Theme-Code implementieren. Dies erfordert jedoch fortgeschrittene Kenntnisse in PHP, HTML und CSS.

Identifiziere die Theme-Datei, in der du das Menü platzieren möchtest (z. B. sidebar.php oder header.php).

Füge den Code zur Anzeige des Menüs hinzu. Dies beinhaltet normalerweise die Verwendung der wp_nav_menu()-Funktion.


        <nav id="vertical-menu">
          <?php
            wp_nav_menu( array(
              'theme_location' => 'vertical-menu', // Passe den Theme-Location-Namen an
              'menu_class' => 'vertical-menu-list' // Passe die CSS-Klasse an
            ) );
          ?>
        </nav>

Definiere den Theme-Location-Namen (hier: vertical-menu) in der functions.php-Datei deines Themes.


        function yourtheme_register_menus() {
          register_nav_menu( 'vertical-menu', __( 'Vertikales Menü', 'yourtheme' ) );
        }
        add_action( 'init', 'yourtheme_register_menus' );

Style das Menü mit CSS, wie in der ersten Methode beschrieben.
Speichere die Änderungen.

Anpassung und Optimierung des vertikalen Navigationsmenüs

Nachdem du ein vertikales Navigationsmenü erstellt hast, ist es wichtig, es anzupassen und zu optimieren, um sicherzustellen, dass es gut aussieht und optimal funktioniert.

Designanpassung

Farben: Wähle Farben, die zum Design deiner Website passen. Achte auf Kontrast und Lesbarkeit.
Schriftarten: Verwende lesbare Schriftarten, die zur Gesamtästhetik deiner Website passen.
Abstände: Sorge für ausreichende Abstände zwischen den Menüpunkten, um die Lesbarkeit zu verbessern.
Hover-Effekte: Füge Hover-Effekte hinzu, um den Benutzern visuelles Feedback zu geben, wenn sie mit der Maus über einen Menüpunkt fahren.
Symbole: Verwende Symbole, um die Menüpunkte visuell zu unterstützen und die Navigation intuitiver zu gestalten.

Responsives Design

Stelle sicher, dass dein vertikales Navigationsmenü auf allen Geräten gut aussieht und funktioniert. Verwende Media Queries im CSS, um das Menü an verschiedene Bildschirmgrößen anzupassen.


    @media (max-width: 768px) {
      #vertical-menu {
        display: none; /* Menü auf kleinen Bildschirmen ausblenden */
      }
      /* Alternativ: Menü in ein Hamburger-Menü umwandeln */
    }

Benutzerfreundlichkeit (UX)

Achte darauf, dass das Menü intuitiv und einfach zu bedienen ist. Verwende klare und prägnante Menübeschriftungen. Stelle sicher, dass die Menüpunkte logisch angeordnet sind. Berücksichtige die Bedürfnisse deiner Zielgruppe.

Deutsche Besonderheiten und SEO-Aspekte

Bei der Erstellung eines vertikalen Navigationsmenüs für eine deutschsprachige Website sind einige Besonderheiten zu beachten:

Sprache: Verwende klare und verständliche deutsche Menübeschriftungen. Vermeide Anglizismen, wenn möglich.
Rechtliche Hinweise: Integriere Links zu wichtigen rechtlichen Seiten wie Impressum, Datenschutz und AGB im Menü oder im Footer.
SEO: Verwende relevante Keywords in den Menübeschriftungen, um die Suchmaschinenoptimierung zu verbessern. Stelle sicher, dass die Menülinks für Suchmaschinen zugänglich sind.

Zusätzlich solltest du sicherstellen, dass deine Website den deutschen Datenschutzbestimmungen (DSGVO) entspricht.

Fazit

Ein vertikales Navigationsmenü kann eine attraktive und funktionale Ergänzung für deine WordPress-Website sein. Durch die Auswahl der richtigen Methode, die sorgfältige Anpassung und die Berücksichtigung deutscher Besonderheiten kannst du ein Menü erstellen, das die Benutzererfahrung verbessert und zum Erfolg deiner Website beiträgt. Ob du dich für die einfache CSS-Methode, ein Plugin oder die direkte Bearbeitung der Theme-Dateien entscheidest, hängt von deinen technischen Fähigkeiten und den spezifischen Anforderungen deines Projekts ab. Experimentiere, teste und optimiere, um das beste Ergebnis zu erzielen.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Ein vertikales Navigationsmenü in WordPress