Möchten Sie ein ansprechendes WordPress-Menü für mobile Geräte erstellen? Mobile Benutzer haben Desktop-Benutzer an vielen Standorten übertroffen. Durch Hinzufügen eines anpassbaren mobilen Menüs können Benutzer problemlos auf der Website navigieren. In diesem Artikel zeigen wir Ihnen, wie Sie auf einfache Weise ein reaktionsschnelles WordPress-Menü für mobile Geräte erstellen können.
Dies ist ein detailliertes Tutorial. Wir zeigen Ihnen die Addon-Methode für Anfänger (keine Codierung) und die Codierungsmethode für unsere fortgeschrittenen Benutzer.
Am Ende dieses Tutorials erfahren Sie, wie Sie ein gleitendes Popup-Menü, ein Dropdown-Popup-Menü und ein alternatives Popup-Menü erstellen.
Bereit? Lasst uns anfangen.
Videoanleitung
Melden Sie sich bei WPBeginner an
Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.
Methode 1: Fügen Sie mithilfe eines Plugins ein responsives Menü in WordPress hinzu
Diese Methode ist einfacher und wird Anfängern empfohlen, da keine benutzerdefinierte Codierung erforderlich ist.
Bei dieser Methode erstellen wir ein Hamburger-Menü, das auf dem mobilen Bildschirm angezeigt wird.
Als erstes müssen Sie das responsive Menü-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung fügt das Plugin Ihrer WordPress-Admin-Leiste einen neuen Menüpunkt namens “Responsive Menu” hinzu. Wenn Sie darauf klicken, gelangen Sie zur Konfigurationsseite des Plugins.
Sie müssen zuerst die Breite des Bildschirms eingeben, wenn das Plugin ein ansprechendes Menü anzeigt. Der Standardwert ist 800 px, was für die meisten Websites funktionieren sollte.
Danach müssen Sie das Menü auswählen, das Sie für das Antwortmenü verwenden möchten. Wenn Sie noch kein Menü erstellt haben, können Sie eines unter besuchen Aussehen »Menüs. Ausführliche Anweisungen finden Sie in unserer Anleitung zum Hinzufügen des Navigationsmenüs in WordPress.
Die letzte Option auf dem Bildschirm besteht darin, eine CSS-Klasse für Ihr Menü ohne aktuelle Antwort bereitzustellen. Dadurch kann das Plugin sein nicht reagierendes Menü auf kleineren Bildschirmen ausblenden.
Vergessen Sie nicht, auf “Update-Optionen” zu klicken, um Ihre Einstellungen zu speichern.
Sie können jetzt die Website besuchen und die Größe des Browserbildschirms ändern, um das Reaktionsmenü in Aktion zu sehen.
Das Responsive-Menü-Plugin enthält viele weitere Optionen, mit denen Sie das Verhalten und das Erscheinungsbild Ihres Responsive-Menüs ändern können. Sie können diese Optionen auf der Konfigurationsseite des Plugins untersuchen und nach Bedarf anpassen.
Methode 2: Fügen Sie mithilfe eines Plugins ein Dropdown-Auswahlmenü hinzu
Eine andere Möglichkeit, ein responsives Menü hinzuzufügen, besteht darin, ein Dropdown-Menü hinzuzufügen. Diese Methode erfordert keine Programmierkenntnisse und wird daher Anfängern empfohlen.
Als erstes sollten Sie das sinnvolle Auswahlmenü-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie besuchen Aussehen »Responsive Auswahl um die Plugin-Einstellungen zu konfigurieren.
Sie müssen zum Abschnitt “Themenpositionen aktivieren” scrollen. Standardmäßig ist das Plugin an allen Stellen des Themas aktiviert. Sie können dies ändern, indem Sie es selektiv für bestimmte Themenbereiche aktivieren.
Vergessen Sie nicht, auf die Schaltfläche Alle Einstellungen speichern zu klicken, um Ihre Änderungen zu speichern.
Sie können jetzt die Website besuchen und die Größe des Browserbildschirms ändern, um das entsprechende Auswahlmenü in Aktion zu sehen.
Methode 3: Erstellen Sie ein Reaktionsmenü für mobile Geräte mit Umschalteffekt
Eine der am häufigsten verwendeten Methoden zum Anzeigen eines Menüs auf mobilen Bildschirmen ist die Verwendung des Umschalteffekts.
Bei dieser Methode müssen Sie Ihren WordPress-Dateien benutzerdefinierten Code hinzufügen. Wenn Sie dies noch nicht getan haben, lesen Sie unseren Leitfaden zum Einfügen von Web-Snippets in WordPress.
Sie müssen zuerst einen Texteditor wie den Editor öffnen und diesen Code einfügen.
(function () {
var nav = document.getElementById (‘Site-Navigation’), Schaltfläche, Menü;
if (! nav) {
Kehrt zurück;
}}
button = nav.getElementsByTagName (‘button’) (0);
menu = nav.getElementsByTagName (‘ul’) (0);
if (button!) {
Kehrt zurück;
}}
// Schaltfläche ausblenden, wenn das Menü fehlt oder leer ist.
if (! menu ||! menu.childNodes.length) {
button.style.display = ‘keine’;
Kehrt zurück;
}}
button.onclick = function () {
Was ist, wenn (-1 === menu.className.indexOf (‘Navigationsmenü’)) {
menu.className = ‘Navigationsmenü’;
}}
Was ist, wenn (-1! == button.className.indexOf (‘alternative’)) {
button.className = button.className.replace (‘alternated’, ”);
menu.className = menu.className.replace (‘alternated’, ”);
} andere {
button.className + = ‘alternative’;
menu.className + = ‘alternative’;
}}
};
}) (jQuery);
Jetzt müssen Sie diese Datei als navigation.js auf Ihrem Desktop speichern.
Als nächstes müssen Sie einen FTP-Client öffnen, um diese Datei in den Ordner / wp-content / theme / your-theme-dir / js / auf Ihrer WordPress-Site hochzuladen.
Ersetzen Sie das Themenverzeichnis durch das aktuelle Themenverzeichnis. Wenn das Themenverzeichnis keinen js-Ordner hat, müssen Sie ihn erstellen.
Nach dem Laden der JavaScript-Datei müssen Sie im nächsten Schritt sicherstellen, dass Ihre WordPress-Site dieses JavaScript lädt. Sie müssen der Datei functions.php Ihres Themas den folgenden Code hinzufügen.
wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, array (‘jquery’), ‘20160909’, true);
Jetzt müssen wir das Navigationsmenü zu unserem WordPress-Theme hinzufügen. Normalerweise wird das Navigationsmenü zur Datei header.php eines Themas hinzugefügt.
