Möchten Sie benutzerdefinierte Navigationsmenüs in Ihr WordPress-Theme einfügen? Navigationsmenüs sind die horizontale Liste von Links, die oben auf den meisten Websites angezeigt wird.
Standardmäßig werden WordPress-Themes mit vordefinierten Menüpositionen und Layouts geliefert, aber was, wenn Sie Ihre eigenen benutzerdefinierten Navigationsmenüs hinzufügen möchten?
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach benutzerdefinierte Navigationsmenüs in WordPress erstellen und hinzufügen können, so dass Sie sie überall in Ihrem Theme anzeigen können.
- Wann brauchen Sie dieses WordPress-Navigationsmenü-Tutorial?
- Erstellen von benutzerdefinierten Navigationsmenüs in WordPress-Themes
- Anzeigen von benutzerdefinierten Navigationsmenüs in WordPress-Themes
- Hinzufügen eines benutzerdefinierten Navigationsmenüs in WordPress mit dem Page Builder
- Erstellen von mobilfreundlichen responsiven Menüs in WordPress
- Mehr tun mit WordPress-Navigationsmenüs
Die meisten WordPress-Themes verfügen über mindestens eine Stelle, an der Sie die Navigationslinks Ihrer Website in einem Menü anzeigen können.
Sie können die Menüpunkte über eine einfach zu bedienende Oberfläche in Ihrem WordPress-Adminbereich verwalten.
Wenn Sie nur Navigationsmenüs auf Ihrer Website hinzufügen möchten, dann folgen Sie einfach unserer Anleitung für Einsteiger, wie man ein Navigationsmenü in WordPress hinzufügt.
Das Ziel dieses Tutorials ist es, Heimwerkern und fortgeschrittenen Nutzern zu helfen, benutzerdefinierte Navigationsmenüs in ihren WordPress-Themes hinzuzufügen.
Wir werden die folgenden Themen in diesem Artikel behandeln:
- Erstellen eines benutzerdefinierten Navigationsmenüs in WordPress-Themes
- Anzeigen eines benutzerdefinierten Navigationsmenüs in einem WordPress-Theme
- Hinzufügen eines benutzerdefinierten Navigationsmenüs in WordPress unter Verwendung des Page Builders
- Erstellen von mobilfreundlichen responsiven Menüs in WordPress
- Weitere Dinge, die man mit WordPress-Navigationsmenüs tun kann
Nachdem wir das gesagt haben, lassen Sie uns einen Blick darauf werfen, wie Sie benutzerdefinierte WordPress-Navigationsmenüs in Ihr Theme einfügen können.
Navigationsmenüs sind eine Funktion von WordPress-Themes. Jedes Theme kann seine eigenen Menüpositionen und Menüunterstützung definieren.
Um ein benutzerdefiniertes Navigationsmenü hinzuzufügen, müssen Sie zunächst Ihr neues Navigationsmenü registrieren, indem Sie diesen Code in die Datei functions.php Ihres Themes einfügen.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));}add_action( 'init', 'wpb_custom_new_menu' );
Sie können nun auf die Seite Erscheinungsbild “ Menüs in Ihrem WordPress-Admin gehen und versuchen, ein neues Menü zu erstellen oder zu bearbeiten. Sie werden „Mein benutzerdefiniertes Menü“ als Option für den Themenstandort sehen.
Wenn Sie mehr als einen neuen Standort für ein Navigationsmenü hinzufügen möchten, müssen Sie einen Code wie diesen verwenden:
function wpb_custom_new_menu() { register_nav_menus( array( 'my-custom-menu' => __( 'My Custom Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) );}add_action( 'init', 'wpb_custom_new_menu' );
Nachdem Sie den Menüstandort hinzugefügt haben, fügen Sie einige Menüpunkte im WordPress-Admin hinzu, indem Sie unserem Tutorial zum Hinzufügen von Navigationsmenüs für Anfänger folgen.
Damit können wir zum nächsten Schritt übergehen, nämlich der Anzeige des Menüs in deinem Theme.
Als Nächstes müssen wir das neue Navigationsmenü in Ihrem WordPress-Theme anzeigen. Der häufigste Ort, an dem Navigationsmenüs platziert werden, ist der Kopfbereich einer Website, direkt nach dem Titel oder dem Logo der Website.
Doch Sie können Ihr Navigationsmenü überall dort einfügen, wo Sie möchten.
Sie müssen diesen Code in die Vorlagendatei Ihres Themas an der Stelle einfügen, an der Sie Ihr Menü anzeigen möchten.
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
Die Position des Themas ist der Name, den wir im vorherigen Schritt ausgewählt haben.
Die Containerklasse ist die CSS-Klasse, die zu Ihrem Navigationsmenü hinzugefügt wird. Ihr Menü wird auf Ihrer Website als einfache Aufzählungsliste erscheinen.
Sie können die CSS-Klasse .custom_menu_class verwenden, um Ihre Menüs zu gestalten. Hier ist ein CSS-Beispiel, um Ihnen den Einstieg zu erleichtern:
div.custom-menu-class ul { margin:20px 0px 20px 0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
Um mehr über die Gestaltung eines Navigationsmenüs zu erfahren, sehen Sie sich unser ausführliches Tutorial zur Gestaltung von WordPress-Navigationsmenüs an
Wenn Sie ein benutzerdefiniertes Landing Page- oder Home Page-Layout erstellen, dann würde die Verwendung eines WordPress Page Builder-Plugins die ganze Sache viel einfacher machen.
Wir empfehlen die Verwendung von Beaver Builder, dem besten WordPress-Seitenerstellungsprogramm auf dem Markt. Er ermöglicht es Ihnen, jede Art von Seitenlayout mit einfachen Drag-and-Drop-Tools zu erstellen (keine Codierung erforderlich).
Dazu gehört auch das Hinzufügen eines benutzerdefinierten Navigationsmenüs zu Ihrem Seitenlayout.
Zunächst müssen Sie das Beaver Builder-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie eine neue Seite erstellen oder eine bestehende Seite bearbeiten, auf der Sie das Navigationsmenü hinzufügen möchten. Auf dem Bildschirm des Beitragseditors klicken Sie auf die Schaltfläche „Launch Beaver Builder“.
Wenn es sich um eine neue Seite handelt, dann können Sie eine der vorgefertigten Vorlagen verwenden, die mit Beaver Builder geliefert werden. Sie können auch Ihre bestehende Seite sofort bearbeiten.
Als Nächstes müssen Sie das Modul „Menüs“ hinzufügen und es per Drag & Drop auf Ihre Seite an die Stelle ziehen, an der Sie das Menü anzeigen möchten.
Dadurch werden die Einstellungen für das Menümodul in einem Popup-Fenster angezeigt. Zunächst müssen Sie das gewünschte Navigationsmenü auswählen. Sie können jederzeit neue Menüs erstellen oder ein bestehendes Menü bearbeiten, indem Sie die Seite Erscheinungsbild “ Menüs im WordPress-Adminbereich besuchen.
Sie können auch andere Einstellungen überprüfen. Beaver Builder ermöglicht es Ihnen, benutzerdefinierte Farben, Hintergrund und andere Stileigenschaften für Ihr Menü zu wählen.
Wenn Sie fertig sind, können Sie auf die Schaltfläche „Speichern“ klicken und eine Vorschau Ihres Menüs anzeigen.
Erstellen von mobilfreundlichen responsiven Menüs in WordPress
Mit der zunehmenden Nutzung von Mobilgeräten möchten Sie Ihre Menüs vielleicht mobilfreundlich gestalten, indem Sie einen der vielen beliebten Effekte hinzufügen.
Sie können einen Slide-Out-Effekt (oben), einen Dropdown-Effekt und sogar einen Toggle-Effekt für mobile Menüs hinzufügen.
Wir haben eine ausführliche Schritt-für-Schritt-Anleitung, wie man mobilfähige responsive WordPress-Menüs erstellt.
Navigationsmenüs sind ein leistungsstarkes Webdesign-Tool. Sie ermöglichen es Ihnen, Nutzer auf die wichtigsten Bereiche Ihrer Website zu verweisen.
Mit WordPress können Sie viel mehr tun, als nur Links in Ihrem Menü anzuzeigen. Probieren Sie diese nützlichen Anleitungen aus, um die Funktionalität von Navigationsmenüs auf Ihrer WordPress-Website zu erweitern.
- Wie man Bildsymbole mit Navigationsmenüs in WordPress hinzufügt
- Wie man bedingte Logik zu Menüs in WordPress hinzufügt
- Wie man Menübeschreibungen in seinem WordPress-Theme hinzufügt
- Wie man ein bildschirmfüllendes responsives Menü in WordPress hinzufügt
- Wie man ein Megamenü zu seiner WordPress-Site hinzufügt
Das ist alles, wir hoffen, dass diese ultimative Anleitung Ihnen geholfen hat, zu lernen, wie man ein Navigationsmenü in WordPress hinzufügt. Vielleicht interessieren Sie sich auch für unsere Liste der 25 nützlichsten WordPress-Widgets und unsere Liste der unverzichtbaren WordPress-Plugins.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.