Free cookie consent management tool by TermsFeed So fügen Sie benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzu - DrDomains Blog

So fügen Sie benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzu

Möchten Sie benutzerdefinierte Navigationsmenüs in Ihrem WordPress-Theme hinzufü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, sodass Sie sie überall in Ihrem Theme anzeigen können.

Wann brauchen Sie dieses WordPress-Navigationsmenü-Tutorial?

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 Menüpunkte über eine einfach zu bedienende Oberfläche in Ihrem WordPress-Adminbereich verwalten. Wenn Sie einfach 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 / fortgeschrittenen Benutzern zu helfen, benutzerdefinierte Navigationsmenüs in ihren WordPress-Themes hinzuzufügen.

Wir werden die folgenden Themen in diesem Artikel behandeln: Lassen Sie uns einen Blick darauf werfen, wie Sie benutzerdefinierte WordPress-Navigationsmenüs in Ihrem Theme hinzufügen können.

Erstellen von benutzerdefinierten Navigationsmenüs in WordPress-Themes

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 wpm_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'Mein eigenes Menü' )); } add_action( 'init', 'wpm_custom_new_menu' ); 

Sie können nun in Ihrem WordPress-Admin auf die Seite Erscheinungsbild " Menüs gehen und versuchen, ein neues Menü zu erstellen oder zu bearbeiten.

Sie werden "My Custom Menu" als Option für den Themenstandort sehen.

Custom navigation menu added to the theme Wenn Sie mehr als einen Ort für ein neues Navigationsmenü hinzufügen möchten, müssen Sie einen Code wie den folgenden verwenden:

function wpm_custom_new_menu() { register_nav_menus( array( 'my-custom-menu' => __( 'Mein eigenes Menü' ), 'extra-menu' => __( 'Extra Menü' ) ) ); } add_action( 'init', 'wpm_custom_new_menu' ); 

Sobald Sie den Speicherort des Menüs hinzugefügt haben, fügen Sie einige Menüpunkte im WordPress-Admin hinzu, indem Sie unserer Anleitung 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 Ihrem Theme.

Anzeige von benutzerdefinierten Navigationsmenüs in WordPress-Themes

Als nächstes müssen wir das neue Navigationsmenü in Ihrem WordPress-Theme anzeigen.

Der häufigste Ort, an dem Navigationsmenüs in der Regel platziert werden, ist im Header-Bereich einer Website direkt nach dem Website-Titel oder Logo. Sie können Ihr Navigationsmenü jedoch überall dort einfügen, wo Sie möchten. Sie müssen diesen Code in der Template-Datei Ihres Themes an der Stelle einfügen, an der Sie Ihr Menü anzeigen möchten.

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

Der Speicherort 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 als einfache Aufzählungsliste auf Ihrer Website angezeigt.

Custom displayed as plain list Sie können die CSS-Klasse .custom_menu_class verwenden, um Ihre Menüs zu gestalten. Hier ist ein Beispiel-CSS, das Ihnen den Einstieg erleichtert:

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; } 

Custom menu styled Um mehr über die Gestaltung eines Navigationsmenüs zu erfahren, lesen Sie unser ausführliches Tutorial zur Gestaltung von WordPress-Navigationsmenüs

Hinzufügen eines benutzerdefinierten Navigationsmenüs in WordPress mithilfe des Page Builders

Wenn Sie ein benutzerdefiniertes Landing Page- oder Home Page-Layout erstellen, dann würde die Verwendung eines WordPress Page Builder-Plugins das Ganze um einiges einfacher machen.

Wir empfehlen die Verwendung von Beaver Builder, dem besten WordPress-Seiten-Builder 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.

Zuerst müssen Sie das Beaver Builder-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die 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.

Klicken Sie auf dem Post-Editor-Bildschirm auf die Schaltfläche " Beaver Builderstarten".

Launch Beaver Builder Wenn es sich um eine neue Seite handelt, dann können Sie eine der vorgefertigten Vorlagen verwenden, die mit dem Beaver Builder geliefert werden. Sie können auch Ihre bestehende Seite sofort bearbeiten.

Choose a template Als Nächstes müssen Sie das Modul Menüs hinzufügen und es per Drag & Drop auf Ihrer Seite an die Stelle ziehen, an der Sie das Menü anzeigen möchten. Add menu module to your page Dadurch werden die Einstellungen des Menüs-Moduls in einem Popup-Fenster angezeigt.

Zuerst müssen Sie das Navigationsmenü auswählen, das Sie verwenden möchten. Sie können jederzeit neue Menüs erstellen oder ein bestehendes Menü bearbeiten, indem Sie die Seite "Erscheinungsbild" " Menüs im WordPress-Adminbereich besuchen

Menu module settings Sie können auch andere Einstellungen überprüfen. Mit Beaver Builder können Sie benutzerdefinierte Farben, Hintergründe und andere Stileigenschaften für Ihr Menü auswählen. Sobald Sie fertig sind, können Sie auf die Schaltfläche "Speichern" klicken und eine Vorschau Ihres Menüs anzeigen.

Preview of a custom navigation menu added with Beaver BuilderErstellen von mobilfreundlichen responsiven Menüs in WordPress

Mit der zunehmenden Nutzung von mobilen Geräten möchten Sie vielleicht Ihre Menüs mobilfreundlich gestalten, indem Sie einen der vielen beliebten Effekte hinzufügen. Responsive menu example 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 detaillierte Schritt-für-Schritt-Anleitung, wie Sie mobilfähige responsive WordPress-Menüs erstellen.

Machen Sie mehr mit WordPress-Navigationsmenüs

Navigationsmenüs sind ein mächtiges Webdesign-Tool.

Sie ermöglichen es Ihnen, Benutzer auf die wichtigsten Abschnitte 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.

Das ist alles, wir hoffen, dass diese ultimative Anleitung Ihnen geholfen hat zu lernen, wie man ein Navigationsmenü in WordPress hinzufügt.


Verwandte Artikel: