Suchen Sie nach den besten Tutorials für die Arbeit mit WordPress-Navigationsmenüs? WordPress-Navigationsmenüs ermöglichen es Ihnen, Menüs auf Ihrer Website einfach anzupassen und zu verwalten. In diesem Artikel zeigen wir Ihnen die besten Tutorials, um WordPress-Navigationsmenüs zu meistern.
Da dies ein langer Artikel ist, haben wir eine Inhaltsliste für eine einfachere Navigation hinzugefügt.
- Erste Schritte mit WordPress-Navigationsmenüs
- Social-Media-Icons zu WordPress-Menüs hinzufügen
- Unterschiedliche Menüs für eingeloggte Benutzer in WordPress anzeigen
- Bedingte Logik zu Navigationsmenüs hinzufügen
- WordPress-Navigationsmenüs gestalten
- Bildsymbole mit Navigationsmenüs in WordPress hinzufügen
- Benutzerdefinierte Navigationsmenüs in WordPress hinzufügen
- Slide-Panel-Menü in WordPress-Themes hinzufügen
- Erstellen eines mobilfreundlichen, responsiven WordPress-Menüs
- Ein Vollbild-Responsives Menü in WordPress hinzufügen
- Beschreibung zu Navigationsmenüs in WordPress hinzufügen
- Themen zu WordPress-Navigationsmenüs hinzufügen
- So fügen Sie Navigationsmenüs in der WordPress-Seitenleiste hinzu
- WordPress-Navigationsmenü in Beiträgen und Seiten hinzufügen
- NoFollow-Links in WordPress-Navigationsmenüs hinzufügen
1. Erste Schritte mit WordPress-Navigationsmenüs
Im Webdesign ist ein Navigationsmenü eine Liste von Links, die es Ihren Website-Besuchern ermöglicht, verschiedene Seiten und Abschnitte Ihrer Website zu besuchen. Es hilft Benutzern, sich auf Ihrer Website zurechtzufinden, daher der Name Navigationsmenü.
WordPress verfügt über ein integriertes Werkzeug, mit dem Sie Menüs auf Ihrer Website erstellen und verwenden können. Dieses Werkzeug befindet sich auf der Seite Darstellung » Menüs in Ihrem WordPress Admin-Bereich.
Hier können Sie Menüs erstellen, indem Sie Elemente aus der linken Spalte in die rechte hinzufügen. Sie können jeden WordPress-Beitrag, jede Seite, Kategorien und benutzerdefinierte Links zu Ihren Menüs hinzufügen.
Detaillierte Anweisungen finden Sie in unserem Anfängerleitfaden zum Hinzufügen von Navigationsmenüs in WordPress.
2. Social-Media-Icons zu WordPress-Menüs hinzufügen
WordPress-Menüs können auch verwendet werden, um Social-Media-Buttons zu Ihrer Website hinzuzufügen. Dies ermöglicht es Ihnen, Icons einfach zu aktualisieren, neu anzuordnen und neue Social-Media-Icons hinzuzufügen, wann immer Sie möchten.
Der einfachste Weg, dies zu tun, ist die Verwendung des Plugins Menu Social Icons. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung gehen Sie zur Seite Darstellung » Menüs. Erstellen Sie ein neues soziales Menü und dann auf der Registerkarte Benutzerdefinierte Links in der linken Spalte.
Sie sehen die Social-Media-Icons unter den Feldern für den Linktext und die URL. Klicken Sie einfach auf ein Social-Media-Icon und geben Sie Ihre Social-Media-Profil-URL 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 eine Menüposition aus und klicken Sie dann auf die Schaltfläche Menü speichern.
Weitere detaillierte Anweisungen finden Sie in unserem Leitfaden unter So fügen Sie Social-Media-Icons zu WordPress-Menüs hinzu.
3. Unterschiedliche Menüs für angemeldete Benutzer in WordPress anzeigen
Wenn Sie eine WordPress-Mitgliedschaftsseite betreiben, möchten Sie möglicherweise unterschiedliche Menüs für Ihre angemeldeten Benutzer anzeigen. Hier erfahren Sie, wie Sie dies einfach erreichen können.
Zuerst müssen Sie zwei verschiedene Menüs erstellen. Eines für Ihre angemeldeten Benutzer und eines für Benutzer, die nicht angemeldet sind. Sie können diese Menüs als „angemeldet“ und „abgemeldet“ bezeichnen.
Als Nächstes müssen Sie diesen Code zu Ihrer Theme-Datei functions.php oder einem standortspezifischen Plugin hinzufügen.
function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
$args['menu'] = 'logged-in';
} else {
$args['menu'] = 'logged-out';
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
Das ist alles. Sie können nun Ihre Navigationsmenüs in Aktion testen.
Detailliertere Anweisungen finden Sie in unserem Tutorial zum Thema unterschiedliche Menüs für eingeloggte Benutzer in WordPress anzeigen.
4. Bedingte Logik zu Navigationsmenüs hinzufügen
Möchten Sie Menüs basierend auf bestimmten Bedingungen ändern? Zum Beispiel ein anderes Menü auf der Homepage oder das Ausblenden eines Elements in einzelnen Beiträgen. Hier erfahren Sie, wie Sie dies in WordPress erreichen können.
Zuerst müssen Sie das If Menu Plugin installieren und aktivieren.
Besuchen Sie nach der Aktivierung den Bildschirm Darstellung » Menüs und klicken Sie auf ein Menüelement, das Sie bearbeiten möchten. Sie werden eine neue Option sehen, um 'Bedingte Logik zu aktivieren'.
Wenn Sie diese Option aktivieren, werden Ihnen zwei Dropdown-Optionen angezeigt. Sie können für ein Menü anzeigen oder ausblenden auswählen, wenn es bestimmten Bedingungen entspricht. Zum Beispiel: Menüpunkt ausblenden, wenn ein Benutzer ein Administrator ist, oder Menüpunkt nur anzeigen, wenn ein Benutzer einen einzelnen Beitrag anzeigt.
Detailliertere Anweisungen finden Sie in unserem Artikel zur bedingten Logik in WordPress-Menüs.
5. WordPress-Navigationsmenüs gestalten
Ihr WordPress-Theme steuert das Erscheinungsbild von Navigationsmenüs auf Ihrer Website. Mit CSS können Sie das Erscheinungsbild von Navigationsmenüs anpassen.
Der einfachste Weg, dies zu tun, ist die Verwendung des Plugins CSS Hero. Es ist ein Premium-WordPress-Plugin, mit dem Sie jedes WordPress-Theme anpassen können, ohne eine einzige Zeile Code zu schreiben (kein HTML oder CSS erforderlich). Lesen Sie unsere CSS Hero-Bewertung, um mehr zu erfahren.
Sie können Ihre Navigationsmenüs auch gestalten, indem Sie manuell CSS schreiben. Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Thema Styling von WordPress-Navigationsmenüs.
6. Bildsymbole mit Navigationsmenüs in WordPress hinzufügen
Viele beliebte Websites verwenden Bildsymbole neben ihren Navigationsmenüs, um diese auffälliger zu machen. Hier erfahren Sie, wie Sie Bildsymbole mit Navigationsmenüs in WordPress hinzufügen können.
Zuerst müssen Sie das Plugin Menu Image installieren und aktivieren. Nach der Aktivierung gehen Sie zu Darstellung » Menüs. Dort sehen Sie eine Option, um jedem Element in Ihrem vorhandenen Menü Bilder hinzuzufügen.
Sie können auch CSS verwenden, um Bildsymbole hinzuzufügen. Detaillierte Anweisungen finden Sie in unserem Leitfaden, wie Sie Bildsymbole mit Navigationsmenüs in WordPress hinzufügen.
7. Benutzerdefinierte Navigationsmenüs in WordPress hinzufügen
Die meisten kostenlosen und Premium-WordPress-Themes verfügen über vordefinierte Positionen für die Anzeige Ihrer Navigationsmenüs. Sie können jedoch auch benutzerdefinierte Navigationsmenüs zu Ihren Themes hinzufügen.
Zuerst müssen Sie Ihr neues Navigationsmenü registrieren, indem Sie diesen Code zur functions.php-Datei Ihres Themes hinzufügen.
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Dieser Code erstellt ‘Mein benutzerdefiniertes Menü’ für Ihr Theme. Sie können dies sehen, indem Sie ein Menü auf der Seite Darstellung » Menüs bearbeiten.
Um Ihr benutzerdefiniertes Menü anzuzeigen, müssen Sie diesen Code zu Ihrem Theme hinzufügen, wo Sie das Menü anzeigen möchten.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
Detailliertere Anweisungen finden Sie in unserem Artikel zur Erstellung benutzerdefinierter Navigationsmenüs in WordPress-Themes.
8. Slide-Panel-Menü in WordPress-Themes hinzufügen
Möchten Sie, dass das Navigationsmenü Ihrer Website in einem Vollbild-Panel angezeigt wird? Die Verwendung von Vollbild-Panels macht Ihre Menüs interaktiver, weniger aufdringlich und macht besonders auf Mobilgeräten Spaß.
Um sie hinzuzufügen, benötigen Sie jedoch ein mittleres Verständnis von JavaScript, WordPress-Themes und CSS.
Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zum Hinzufügen eines Schieberegler-Menüs in WordPress-Themes.
9. Erstellen eines mobilfreundlichen, responsiven WordPress-Menüs
Die meisten WordPress-Themes sind responsiv und verfügen über mobilfreundliche Navigationsmenüs. Wenn Ihr Theme jedoch Navigationsmenüs auf Mobilgeräten nicht gut handhabt, beeinträchtigt dies die Benutzererfahrung auf Mobilgeräten.
Glücklicherweise gibt es einige einfache Möglichkeiten, mobilfreundliche, responsive Menüs hinzuzufügen, ohne Code schreiben zu müssen.
Zuerst müssen Sie das Responsive Menu Plugin installieren und aktivieren.
Nach der Aktivierung müssen Sie in der WordPress-Adminleiste auf 'Responsive Menu' klicken, um die Plugin-Einstellungen zu konfigurieren.
Wählen Sie einfach eine Breite aus, nach der das mobilfreundliche Menü sichtbar sein soll. Danach müssen Sie ein vorhandenes Navigationsmenü auswählen.
Vergessen Sie nicht, auf die Schaltfläche 'Optionen aktualisieren' zu klicken, um Ihre Einstellungen zu speichern. Das war's, Sie können jetzt Ihre Website besuchen und die Browsergröße ändern, um das mobile Responsive-Menü zu sehen.
Es gibt viele andere Möglichkeiten, ein mobilfreundliches Menü hinzuzufügen. Wie ein Menü, das mit einem Toggle-Effekt erscheint, ein Slide-In-Menü und ein responsives Dropdown-Menü. Erfahren Sie mehr darüber in unserem Leitfaden, wie Sie ein mobilfreundliches, responsives WordPress-Menü erstellen.
10. Ein Vollbild-Responsive Menü in WordPress hinzufügen
Haben Sie bemerkt, wie einige beliebte Websites ein Vollbild-Navigationsmenü verwenden? Normalerweise erfordert dies kreativen Einsatz von JavaScript und CSS. Glücklicherweise können Sie dies in WordPress tun, ohne Code schreiben zu müssen.
Zuerst müssen Sie das DC – Full Screen Responsive Menu installieren und aktivieren. Nach der Aktivierung müssen Sie die Seite Darstellung » DC Fullscreen Menu besuchen, um die Plugin-Einstellungen zu konfigurieren.
Hier können Sie ein Menü, Hintergrund- und Textfarbe sowie Google-Schriftarten für Ihr Vollbildmenü auswählen.
Klicken Sie auf die Schaltfläche „Senden“, um Ihre Einstellungen zu speichern. Sie können nun Ihre Website besuchen, um Ihr Vollbild-Responsive-Menü in Aktion zu sehen.
Mehr zu diesem Thema finden Sie in unserem Leitfaden, wie Sie ein Vollbild-Responsive-Menü in WordPress hinzufügen.
11. Beschreibung zu Navigationsmenüs in WordPress hinzufügen
WordPress-Navigationsmenüs sind normalerweise nur Textlinks, die die Linkbezeichnung oder den Ankertext anzeigen. Was wäre, wenn Sie jedem Element in Ihrem Navigationsmenü eine kleine Beschreibung oder einen Slogan hinzufügen möchten?
Glücklicherweise verfügt WordPress über integrierte Funktionen, um jeder Navigationsmenü-Element eine Beschreibung hinzuzufügen.
Zuerst müssen Sie den Punkt Beschreibungen aktivieren. Klicken Sie auf die Schaltfläche Bildschirmoptionen in der oberen rechten Ecke des Bildschirms.
Dies zeigt eine Liste von Kontrollkästchen und Optionen, die Sie aktivieren können. Sie müssen das Kontrollkästchen neben 'Beschreibung' aktivieren.
Scrollen Sie nun nach unten und klicken Sie auf ein Menüelement, um es zu bearbeiten. Sie sehen dann eine Option zum Hinzufügen einer Beschreibung.
Fügen Sie Ihre Beschreibung hinzu und klicken Sie auf die Schaltfläche Menü speichern.
Wenn Ihr Theme Menü-Beschreibungen unterstützt, können Sie diese sofort sehen. Andernfalls müssen Sie Ihre Theme-Dateien bearbeiten, um Beschreibungen anzuzeigen.
Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Hinzufügen von Menü-Beschreibungen in Ihrem WordPress-Theme.
12. So fügen Sie Themen in WordPress-Navigationsmenüs hinzu
Wir werden oft gefragt, wie man Blog-Themen zu Navigationsmenüs in WordPress hinzufügt. Viele Anfänger gehen davon aus, dass sie für jedes Thema Seiten erstellen müssen, um sie zu Menüs hinzuzufügen.
Was Sie eigentlich brauchen, sind Kategorien. Kategorien und Tags sind in WordPress eingebaute Taxonomien, die es Ihnen ermöglichen, Inhalte nach relevanten Themen zu sortieren.
Fügen Sie Ihre Artikel zu relevanten Kategorien hinzu und gehen Sie dann zur Seite Darstellung » Menüs. 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 Details finden Sie in unserem Artikel darüber, wie Sie Themen zu WordPress-Navigationsmenüs hinzufügen.
13. Wie man Navigationsmenüs in der WordPress-Seitenleiste hinzufügt
WordPress-Themes haben normalerweise Navigationsmenüs oben oder unten. Sie können jedoch auch Menüs in Ihrer WordPress-Seitenleiste erstellen und hinzufügen.
Besuchen Sie einfach die Seite Darstellung » Widgets und fügen Sie das Widget „Benutzerdefiniertes Menü“ zu Ihrer Seitenleiste hinzu. Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Thema Hinzufügen und Verwenden von Widgets in WordPress.
Nachdem Sie das Widget zu einer Seitenleiste hinzugefügt haben, können Sie ein Menü aus der Dropdown-Option auswählen. Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Einstellungen zu speichern.
14. WordPress-Navigationsmenü in Beiträgen und Seiten hinzufügen
Normalerweise werden Navigationsmenüs im Header oder in der Seitenleiste einer Website angezeigt. Manchmal möchten Sie jedoch möglicherweise ein Menü in einem WordPress-Beitrag oder einer Seite hinzufügen. Hier erfahren Sie, wie Sie das tun würden.
Zuerst müssen Sie das Menu Shortcode Plugin installieren und aktivieren. Nach der Aktivierung bearbeiten Sie den Beitrag oder die Seite, auf der Sie Ihr Menü anzeigen möchten, und fügen Sie diesen Shortcode hinzu:
[listmenu menu="Ihr Menüname"]
Vergessen Sie nicht, „Ihr Menüname“ 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 Details finden Sie in unserem Leitfaden, wie Sie WordPress-Navigationsmenüs in Beiträge oder Seiten einfügen.
15. NoFollow-Links in WordPress-Navigationsmenüs hinzufügen
Normalerweise enthält das Navigationsmenü Ihrer Website Links zu Ihren eigenen Beiträgen und Seiten. Manchmal müssen Sie jedoch einen Link zu einer externen Website hinzufügen.
Viele SEO-Experten empfehlen, externen Links das Attribut rel="nofollow" hinzuzufügen. Hier erfahren Sie, wie Sie das nofollow-Attribut zu Links in WordPress-Navigationsmenüs hinzufügen.
Zuerst müssen Sie die Seite Darstellung » Menüs aufrufen und dann oben rechts auf dem Bildschirm auf die Schaltfläche "Bildschirmoptionen" klicken.
Dies öffnet ein Menü, in dem Sie die Kontrollkästchen neben 'Link-Beziehung (XFN)' und 'Link-Ziel' aktivieren müssen.
Klicken Sie nun auf das Menüelement, das Sie bearbeiten möchten. Sie werden zwei neue Optionen bemerken: Link-Beziehung und Link in neuem Fenster/Tab öffnen.
Sie müssen nofollow in die Option für die Link-Beziehung eingeben. Sie können auch die Option „Link in neuem Fenster/Tab öffnen“ aktivieren, wenn Sie dies wünschen.
Klicken Sie auf die Schaltfläche Menü speichern, um Ihre Änderungen zu speichern. Nun wird dieser spezielle Link in Ihrem WordPress-Navigationsmenü das Attribut rel="nofollow" erhalten.
Für detailliertere Anweisungen lesen Sie unser Tutorial, wie Sie Nofollow-Links in WordPress-Navigationsmenüs hinzufügen.
Wir hoffen, dieser Artikel hat Ihnen geholfen, die besten Tutorials zu meistern, um WordPress-Navigationsmenüs zu beherrschen. Möglicherweise möchten Sie auch unsere Liste von 24 unverzichtbaren WordPress-Plugins für Geschäftswebsites sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Jiří Vaněk
Ich mag Ihren Punkt Nummer 3 im Tutorial wirklich und bin fasziniert davon. Ich habe eine Mitgliedschaftsseite mit MemberPress und die Idee, dass eingeloggte Benutzer ein anderes Navigationsmenü haben könnten, ist fantastisch, weil ich Premium-Inhalte zum Menü hinzufügen kann, die normale Benutzer nicht sehen sollten. Ich bin auch überrascht, wie viele Funktionen im Bereich Darstellung » Menüs versteckt sind. Ich hatte keine Ahnung, wie nützlich es in dieser Hinsicht sein könnte.
ERFmama
Thank you so much for a fantastic overview! I’ve learned a few new things!
