Vitrine

15 Beste Tutorials zu Master-WordPress-Navigationsmenüs

15 Beste Tutorials zu Master-WordPress-Navigationsmenüs / Vitrine

Suchen Sie nach den besten Tutorials für die Arbeit mit WordPress-Navigationsmenüs? Mit WordPress-Navigationsmenüs können Sie die Menüs auf Ihrer Website problemlos anpassen und verwalten. In diesem Artikel zeigen wir Ihnen die besten Tutorials, um WordPress-Navigationsmenüs zu beherrschen.

Da dies ein langer Artikel ist, haben wir eine Liste mit Inhalten für eine einfachere Navigation hinzugefügt.

  1. Erste Schritte mit den WordPress-Navigationsmenüs
  2. Hinzufügen von Social Media-Symbolen zu den WordPress-Menüs
  3. Verschiedene Menüs für angemeldete Benutzer in WordPress anzeigen
  4. Fügen Sie die bedingte Logik zu den Navigationsmenüs hinzu
  5. Gestaltung von WordPress-Navigationsmenüs
  6. Hinzufügen von Bildsymbolen mit Navigationsmenüs in WordPress
  7. Benutzerdefinierte Navigationsmenüs in WordPress hinzufügen
  8. Folienfenster-Menü in WordPress-Themes hinzufügen
  9. Erstellen eines Responsive WordPress-Menüs für Mobilgeräte
  10. Fügen Sie in WordPress ein Vollbild-Reaktionsmenü hinzu
  11. Hinzufügen von Beschreibungen mit Navigationsmenüs in WordPress
  12. Hinzufügen von Themen in WordPress-Navigationsmenüs
  13. Hinzufügen von Navigationsmenüs in der WordPress-Seitenleiste
  14. WordPress-Navigationsmenü in Posts und Seiten hinzufügen
  15. Fügen Sie NoFollow-Links in WordPress-Navigationsmenüs hinzu

1. Erste Schritte mit den WordPress-Navigationsmenüs

Im Webdesign ist das Navigationsmenü eine Liste mit Links, über die Besucher Ihrer Website verschiedene Seiten und Abschnitte Ihrer Website besuchen können. Es hilft Benutzern, auf Ihrer Website zu navigieren, daher das Name-Navigationsmenü.

WordPress verfügt über ein integriertes Tool, mit dem Sie Menüs auf Ihrer Website erstellen und verwenden können. Dieses Tool befindet sich um Aussehen »Menüs Seite in Ihrem WordPress-Adminbereich.

Hier können Sie Menüs erstellen, indem Sie Elemente aus der linken Spalte rechts hinzufügen. Sie können Ihren Menüs beliebige WordPress-Beiträge, Seiten, Kategorien und benutzerdefinierte Links hinzufügen.

Detaillierte Anweisungen finden Sie in unserem Einsteigerhandbuch, wie Sie Navigationsmenüs in WordPress hinzufügen.

2. Fügen Sie Social Media-Symbole zu den WordPress-Menüs hinzu

WordPress-Menüs können auch verwendet werden, um Ihrer Website Social-Media-Schaltflächen hinzuzufügen. Auf diese Weise können Sie Symbole einfach aktualisieren, neu anordnen und jederzeit neue Social Media-Symbole hinzufügen.

Dies erreichen Sie am einfachsten mit dem Plugin "Menü-Social-Icons". Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Aussehen »Menüs Seite. Erstellen Sie ein neues soziales Menü und dann in der linken Spalte auf der Registerkarte Benutzerdefinierte Links.

Unter den Link-Text- und URL-Feldern werden die Social Media-Symbole angezeigt. Klicken Sie einfach auf ein Social Media-Symbol und geben Sie die URL Ihres Sozialprofils ein. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche zum Menü hinzufügen.

Wiederholen Sie diesen Vorgang für alle Social-Media-Profile, die Sie hinzufügen möchten. Wenn Sie fertig sind, wählen Sie einen Menüpunkt aus und klicken Sie auf die Menüschaltfläche Speichern.

Detaillierte Anweisungen finden Sie in unserem Handbuch zum Hinzufügen von Social Media-Symbolen zu WordPress-Menüs.

3. Zeigen Sie verschiedene Menüs für angemeldete Benutzer in WordPress an

Wenn Sie eine WordPress-Mitgliederwebsite ausführen, möchten Sie Ihren angemeldeten Benutzern möglicherweise andere Menüs anzeigen. So können Sie dies leicht erreichen.

Zuerst müssen Sie zwei verschiedene Menüs erstellen. Eine für Ihre angemeldeten Benutzer und eine für Benutzer, die nicht angemeldet sind. Diese Menüs können Sie als angemeldet oder abgemeldet angeben.

Als Nächstes müssen Sie diesen Code zur Datei functions.php Ihres Themas oder zu einem standortspezifischen Plugin hinzufügen. 

 Funktion my_wp_nav_menu_args ($ args = ") if (is_user_logged_in ()) $ args ['menu'] = 'eingeloggt'; else $ args ['menu'] = 'abgemeldet'; return $ args; add_filter ('wp_nav_menu_args', 'my_wp_nav_menu_args');

Das ist alles. Sie können jetzt Ihre Navigationsmenüs in Aktion testen.

Ausführlichere Anweisungen finden Sie in unserem Tutorial, wie verschiedene Menüs für eingeloggte Benutzer in WordPress angezeigt werden.

4. Fügen Sie die bedingte Logik zu den Navigationsmenüs hinzu

Möchten Sie Menüs basierend auf bestimmten Bedingungen ändern? Wie ein anderes Menü auf der Startseite oder das Ausblenden eines Elements in einzelnen Posts. So können Sie dies in WordPress erreichen.

Zuerst müssen Sie das If Menu Plugin installieren und aktivieren.

Nach der Aktivierung besuchen Sie Aussehen »Menüs und klicken Sie auf einen Menüpunkt, den Sie bearbeiten möchten. Sie werden eine neue Option zum Aktivieren der bedingten Logik sehen..

Wenn Sie diese Option aktivieren, werden zwei Dropdown-Optionen angezeigt. Sie können für ein Menü ein- oder ausblenden, wenn es den bestimmten Bedingungen entspricht. Beispielsweise Menüelement ausblenden, wenn ein Benutzer ein Administrator ist, oder ein Menüelement nur anzeigen, wenn ein Benutzer einen einzelnen Beitrag erstellt.

Ausführlichere Anweisungen finden Sie in unserem Artikel zum Hinzufügen einer bedingten Logik zu WordPress-Menüs.

5. Styling-WordPress-Navigationsmenüs

Ihr WordPress-Theme steuert das Erscheinungsbild der Navigationsmenüs auf Ihrer Website. Mit CSS können Sie die Darstellung von Navigationsmenüs anpassen.

Am einfachsten geht dies mit dem CSS Hero Plugin. Es ist ein erstklassiges WordPress-Plugin, mit dem Sie jedes WordPress-Theme anpassen können, ohne eine einzige Zeile Code schreiben zu müssen (kein HTML oder CSS erforderlich). In unserem CSS-Hero-Test erfahren Sie mehr.

Sie können Ihre Navigationsmenüs auch gestalten, indem Sie CSS manuell schreiben. Detaillierte Anweisungen finden Sie in unserem Handbuch zum Gestalten von WordPress-Navigationsmenüs.

6. Fügen Sie Bildsymbole mit Navigationsmenüs in WordPress hinzu

Viele beliebte Websites verwenden Bildsymbole neben ihren Navigationsmenüs, um sie deutlicher zu machen. So können Sie Bildsymbole mit Navigationsmenüs in WordPress hinzufügen.

Als Erstes müssen Sie das Plugin Menu Image installieren und aktivieren. Gehen Sie nach der Aktivierung zu den Menüs "Darstellung". Dort sehen Sie eine Option zum Hinzufügen von Bildern zu jedem Menüpunkt in Ihrem vorhandenen Menü.

Sie können auch CSS verwenden, um Bildsymbole hinzuzufügen. Detaillierte Anweisungen finden Sie in unserem Handbuch zum Hinzufügen von Bildsymbolen mit Navigationsmenüs in WordPress.

7. Fügen Sie in WordPress benutzerdefinierte Navigationsmenüs hinzu

Die meisten kostenlosen und erstklassigen WordPress-Themes verfügen über vordefinierte Orte, um Ihre Navigationsmenüs anzuzeigen. Sie können Ihren Motiven jedoch auch benutzerdefinierte Navigationsmenüs hinzufügen.

Zuerst müssen Sie Ihr neues Navigationsmenü registrieren, indem Sie diesen Code zur Datei functions.php Ihres Themes hinzufügen.

 Funktion wpb_custom_new_menu () register_nav_menu ('Mein benutzerdefiniertes Menü', __ ('Mein benutzerdefiniertes Menü'));  add_action ('init', 'wpb_custom_new_menu');

Dieser Code erstellt "Mein benutzerdefiniertes Menü" für Ihr Design. Sie können dies sehen, indem Sie ein Menü bearbeiten Aussehen »Menüs Seite.

Um Ihr benutzerdefiniertes Menü anzuzeigen, müssen Sie diesen Code Ihrem Design hinzufügen, an dem Sie das Menü anzeigen möchten. 

  'my-custom-menu', 'container_class' => 'custom-menu-class')); ?>

Detaillierte Anweisungen finden Sie in unserem Artikel zum Hinzufügen benutzerdefinierter Navigationsmenüs in WordPress-Designs.

8. Fügen Sie das Folienbedienfeld-Menü in WordPress-Themes hinzu

Möchten Sie zeigen, dass das Navigationsmenü Ihrer Website ein Einschubfeld ist? Die Verwendung von Slide-In-Panels macht Ihre Menüs interaktiver, weniger aufdringlich und macht besonders auf mobilen Geräten Spaß.

Um sie hinzuzufügen, benötigen Sie jedoch ein mittleres Verständnis von JavaScript, WordPress-Themes und CSS.

Schrittweise Anweisungen finden Sie in unserem Handbuch zum Hinzufügen eines Folienbedienfeldmenüs in WordPress-Designs.

9. Erstellen eines Mobile Ready Responsive WordPress-Menüs

Die meisten WordPress-Themes sind responsiv und verfügen über mobile Navigationsmenüs. Wenn Ihr Design jedoch Navigationsmenüs auf mobilen Geräten nicht gut verarbeitet, hat dies Auswirkungen auf die Benutzererfahrung auf mobilen Geräten.

Glücklicherweise gibt es einige einfache Möglichkeiten, wie Sie mobile, responsive Menüs hinzufügen können, ohne Code schreiben zu müssen.

Zunächst müssen Sie das Responsive Menu-Plugin installieren und aktivieren.

Nach der Aktivierung müssen Sie in der WordPress-Verwaltungsleiste auf "Responsive Menu" klicken, um die Plugin-Einstellungen zu konfigurieren.

Wählen Sie einfach eine Breite aus, nach der das Mobile Responsive-Menü sichtbar sein soll. Danach müssen Sie ein vorhandenes Navigationsmenü auswählen.

Vergessen Sie nicht, auf die Schaltfläche "Update-Optionen" zu klicken, um Ihre Einstellungen zu speichern. Das ist alles, was Sie jetzt auf Ihrer Website besuchen können, um die Größe des Browser-Bildschirms zu ändern und das Responsive-Menü für mobile Geräte anzuzeigen.

Es gibt viele weitere Möglichkeiten, um ein mobiles Responsive-Menü hinzuzufügen. Wie ein Menü mit einem Umschalteffekt, einem Slide-In-Menü und einem responsiven Auswahlmenü. Weitere Informationen dazu finden Sie in unserem Leitfaden zum Erstellen eines reaktionsfähigen WordPress-Menüs für mobile Geräte.

10. Fügen Sie in WordPress ein Vollbild-Reaktionsmenü hinzu

Haben Sie bemerkt, dass einige beliebte Websites ein Vollbild-Navigationsmenü verwenden? Normalerweise erfordert es einige kreative Verwendung von JavaScript und CSS. Glücklicherweise können Sie dies in WordPress tun, ohne Code schreiben zu müssen.

Zunächst müssen Sie das Responsive-Menü "DC - Full Screen" installieren und aktivieren. Nach der Aktivierung müssen Sie besuchen Aussehen "DC-Vollbildmenü Seite, um die Plugin-Einstellungen zu konfigurieren.

Hier können Sie ein Menü, eine Hintergrund- und Textfarbe sowie eine Google-Schriftart für Ihr Vollbildmenü auswählen.

Klicken Sie auf die Schaltfläche "Senden", um Ihre Einstellungen zu speichern. Sie können jetzt Ihre Website besuchen, um Ihr reagierendes Vollbild-Menü in Aktion zu sehen.

Weitere Informationen zu diesem Thema finden Sie in unserem Handbuch zum Hinzufügen eines Vollbildmenüs in WordPress.

11. Hinzufügen von Beschreibungen mit Navigationsmenüs in WordPress

WordPress-Navigationsmenüs sind in der Regel nur Textlinks, die die Linkbezeichnung oder den Ankertext anzeigen. Was wäre, wenn Sie für jedes Element in Ihrem Navigationsmenü eine kleine Beschreibung oder Tag-Zeile hinzufügen möchten?

Glücklicherweise verfügt WordPress über eine integrierte Funktion, die jedem Element in Ihren Navigationsmenüs eine Beschreibung hinzufügt.

Zuerst müssen Sie das Beschreibungselement aktivieren. Klicken Sie oben rechts im Bildschirm auf die Schaltfläche Bildschirmoptionen.

Daraufhin wird eine Liste mit Feldern und Optionen angezeigt, die Sie aktivieren können. Sie müssen das Kontrollkästchen neben Beschreibung aktivieren.

Scrollen Sie nach unten und klicken Sie auf ein Menüelement, um es zu bearbeiten. Es wird eine Option zum Hinzufügen von Beschreibungen angezeigt.

Fügen Sie Ihre Beschreibung hinzu und klicken Sie auf die Menüschaltfläche Speichern.

Wenn Ihr Thema Menübeschreibungen unterstützt, können Sie diese sofort sehen. Andernfalls müssen Sie Ihre Designdateien bearbeiten, um Beschreibungen anzuzeigen.

Detaillierte Anweisungen finden Sie in unserem Handbuch zum Hinzufügen von Menübeschreibungen in Ihrem WordPress-Design.

12. Hinzufügen von Themen in WordPress-Navigationsmenüs

Wir werden oft gefragt, wie Blogthemen zu Navigationsmenüs in WordPress hinzugefügt werden können. Viele Anfänger gehen davon aus, dass sie Seiten für jedes Thema erstellen müssen, um sie zu Menüs hinzuzufügen.

Was Sie eigentlich brauchen, sind Kategorien. Kategorien und Tags sind in WordPress-Taxonomien integriert, mit denen Sie Inhalte nach relevanten Themen sortieren können.

Fügen Sie Ihre Artikel in relevante Kategorien ein und gehen Sie dann zu Aussehen »Menüs Seite. Klicken Sie auf die Registerkarte Kategorien, um sie zu erweitern, und wählen Sie dann die Kategorien aus, die Sie in Ihren Navigationsmenüs anzeigen möchten.

Weitere Informationen finden Sie in unserem Artikel zum Hinzufügen von Themen in WordPress-Navigationsmenüs.

13. Hinzufügen von Navigationsmenüs in der WordPress-Sidebar

WordPress-Themes haben normalerweise Navigationsmenüs oben oder unten. Sie können jedoch auch Menüs erstellen und zur WordPress-Seitenleiste hinzufügen.

Einfach besuchen Aussehen »Widgets und fügen Sie der Seitenleiste das Widget "Benutzerdefiniertes Menü" hinzu. Detaillierte Anweisungen finden Sie in unserem Handbuch zum Hinzufügen und Verwenden von Widgets in WordPress.

Nachdem Sie das Widget zu einer Seitenleiste hinzugefügt haben, können Sie aus der Dropdown-Option ein Menü auswählen. Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Einstellungen zu speichern.

14. Fügen Sie ein WordPress-Navigationsmenü in Beiträgen und Seiten hinzu

Normalerweise werden Navigationsmenüs in der Kopf- oder Seitenleiste einer Website angezeigt. Manchmal möchten Sie jedoch möglicherweise ein Menü in einem WordPress-Beitrag oder einer Seite einfügen. So würden Sie das machen.

Zuerst müssen Sie das Plugin Menu Shortcode installieren und aktivieren. Bearbeiten Sie nach der Aktivierung den Beitrag oder die Seite, auf der Sie Ihr Menü anzeigen möchten, und fügen Sie diesen Kurzcode hinzu:

[listmenu menu = "Name Ihres Menüs"]

Vergessen Sie nicht, Ihren Menünamen durch den Namen Ihres eigenen Navigationsmenüs zu ersetzen. Speichern oder veröffentlichen Sie Ihren Beitrag und klicken Sie dann auf die Vorschau-Schaltfläche.

Weitere Informationen finden Sie in unserem Handbuch zum Hinzufügen von WordPress-Navigationsmenüs in Beiträgen oder Seiten.

15. Fügen Sie NoFollow-Links in WordPress-Navigationsmenüs hinzu

Normalerweise enthält das Navigationsmenü Ihrer Website Links zu Ihren eigenen Beiträgen und Seiten. Manchmal müssen Sie jedoch möglicherweise einen Link zu einer externen Site hinzufügen.

Viele SEO-Experten empfehlen, externe Links mit dem Attribut rel = ”nofollow” zu versehen. So fügen Sie den Links in den WordPress-Navigationsmenüs ein Nofollow-Attribut hinzu.

Zuerst müssen Sie besuchen Aussehen »Menüs Klicken Sie dann auf die Schaltfläche Bildschirmoptionen in der rechten oberen Ecke des Bildschirms.

Daraufhin wird ein Menü angezeigt, in dem Sie die Kontrollkästchen neben den Optionen Link Relationship (XFN) und Link Target aktivieren müssen.

Klicken Sie nun auf den Menüpunkt, den Sie bearbeiten möchten. In einem neuen Fenster / einer neuen Registerkarte werden zwei neue Optionen angezeigt: Verknüpfung verknüpfen und Verknüpfung öffnen.

Sie müssen eintreten nofollow in der Link-Relationship-Option. Wenn Sie möchten, können Sie auch die geöffnete Verknüpfung in neuen Fenstern / Registerkarten prüfen.

Klicken Sie auf die Menüschaltfläche Speichern, um Ihre Änderungen zu speichern. Jetzt wird diesem bestimmten Link in Ihrem WordPress-Navigationsmenü das Attribut rel = "nofollow" hinzugefügt.

Detaillierte Anweisungen finden Sie in unserem Tutorial zum Hinzufügen von Nofollow-Links in WordPress-Navigationsmenüs.

Wir hoffen, dass dieser Artikel geholfen hat, die besten Tutorials für die Navigation von WordPress-Navigationsmenüs zu finden. Möglicherweise möchten Sie auch unsere Liste der 24 WordPress-Plugins für geschäftliche Websites anzeigen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.