So erstellen Sie ein für Mobilgeräte geeignetes responsives WordPress-Menü

Veröffentlicht: 2016-11-04

Spezieller WordPress-Hosting-Vorschlag für unsere Leser, wie man ein Mobile-Ready ansprechendes WordPress-Menü erstellt. Möchten Sie ein responsives WordPress-Menü für Mobilgeräte erstellen? Mobile Benutzer haben Desktop-Benutzer für viele Websites übertrieben. Das Anhängen eines responsiven Menüs für Mobilgeräte erleichtert Benutzern die Verwaltung Ihrer Website. In diesem Artikel erklären Ihnen unsere Spezialisten, wie Sie ganz einfach ein mobiles responsives WordPress-Menü erstellen können.

Erstellen Sie ein responsives WordPress-Menü für Mobilgeräte

Dies ist ein ausführliches Tutorial. Wir zeigen sowohl die Plugin-Methode für Anfänger (keine Codierung) als auch die Codierungsmethode für unsere fortgeschrittenen Benutzer.

Am Ende dieses Tutorials erfahren Sie, wie Sie ein mobiles Slide-in-Menü, ein mobiles Dropdown-Menü und ein mobiles Umschaltmenü erstellen.

Bereit? Lass uns anfangen.

Technik 1: Fügen Sie mit Hilfe eines Plug-ins ein responsives Menü in WordPress hinzu

Diese Technik ist für Anfänger einfacher und besser, da sie keine Client-Codierung erfordert. Bei dieser Technik erstellen wir ein Hamburger-Menü, das auf dem Bildschirm Ihres Mobiltelefons gleiten kann.

Responsive Menü-Plugin-Demo

Zunächst müssen Sie den Installations- und Aktivierungsprozess mit dem Responsive Menu-Plug-in durchführen. Wenn Sie mehr Details lesen möchten, sehen Sie sich unsere Anleitung zur Installation eines WordPress-Plugins an.

Nach der Aktivierung fügt das Plug-in Ihrer WordPress-Admin-Leiste einen neuen Menüpunkt mit der Bezeichnung „Responsive Menu“ hinzu. Wenn Sie darauf klicken, gelangen Sie zur Einstellungsseite des Plugins.

Responsive Menüeinstellungen

Zuerst müssen Sie die Breite des Bildschirms eingeben, in diesem Moment wird das Plug-in beginnen, ein ansprechendes Menü anzuzeigen. Der reservierte Wert beträgt 800 Pixel, die für die meisten Websites funktionieren müssen.

Danach müssen Sie das Menü auswählen, das Sie für Ihr responsives Menü verwenden möchten. Sollten Sie noch keine Speisekarte erstellt haben, so können Sie eine nach Anwesenheit erstellen » Speisekarte. Sehen Sie sich unsere Anleitung zum Anhängen des Navigationsmenüs in WordPress an, um spezielle Anweisungen zu erhalten.

Die letzte Option auf dem Bildschirm besteht darin, eine CSS-Klasse für Ihr aktuelles nicht reagierendes Menü bereitzustellen. Dadurch kann das Plugin Ihr nicht reagierendes Menü auf kleineren Bildschirmen ausblenden.

Vergessen Sie nicht, auf die Schaltfläche „Optionen aktualisieren“ zu klicken, um Ihre Einstellungen zu speichern.

Sie können jetzt Ihre Website besuchen und die Größe Ihres Browserbildschirms ändern, um das responsive Menü in Aktion zu sehen.

Responsive Menü-Plugin-Demo

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 Einstellungsseite des Plugins erkunden und sie nach Bedarf anpassen.

Methode 2: Fügen Sie ein Dropdown-Auswahlmenü mit einem Plugin hinzu

Eine andere Methode zum Anhängen eines responsiven Menüs ist das Anhängen eines Dropdown-Auswahlmenüs. Diese Technik erfordert keine Programmiererfahrung und ist daher die beste Methode für Anfänger.

Die Auswahl des responsiven Menüs

Nach der Aktivierung müssen Sie unter Anwesenheitsdarstellung » Responsiv wählen, um die Plug-in-Einstellungen zu konfigurieren.

Menüeinstellungen auswählen

Sie müssen nach unten scrollen, um 'Themenorte aktivieren' einzuteilen. Standardmäßig ist das Plug-in an allen Themenstandorten aktiviert. Sie können es durch gezielte Umstellung auf bestimmte Themenstandorte variieren.

Denken Sie daran, dass Sie auf die Taste Alle Installation speichern klicken müssen, um Ihre Änderungen zu speichern.

Sie können jetzt Ihre Website besuchen und die Größe des Browserbildschirms ändern, um das reaktionsschnelle Auswahlmenü in Arbeit anzuzeigen.

Technik 3: Erstellen eines mobilen ausgehenden reaktionsschnellen Menüs mit Schalteraktion

Eine der am häufigsten verwendeten Techniken zum Anzeigen eines Menüs auf mobilen Bildschirmen ist die Hilfe der Schalteraktion.

Diese Technik erfordert, dass Sie einen benutzerdefinierten Schlüssel an Ihren WordPress-Datensatz anhängen. Wenn Sie dies noch nicht erstellt haben, sehen Sie sich unsere Anleitung zum Einfügen von Snippets aus dem Internet in WordPress an.

Zuerst müssen Sie einen Textredakteur öffnen, zum Beispiel Notepad, und diesen Code einfügen.

Nach diesem Spielzeug muss CSS angehängt werden, damit unser Menü die korrekten CSS-Klassen verwendet, damit der Schalter funktioniert, wenn er auf Mobiltelefonen angezeigt wird.

Technik 4: Fügen Sie ein mobiles Slide-In-Menü in WordPress hinzu

Eine andere gängige Methode besteht darin, ein mobiles Menü mit Hilfe eines Einschubmenüs anzuhängen (wie Sie in Technik 1 sehen können).

Technik 4 erfordert, dass Sie Code an Ihre WordPress-Designdateien anhängen, und es ist nur eine andere Art, die gleichen Ergebnisse wie Technik 1 zu erzielen.

Zunächst müssen Sie einen Klartext-Editor öffnen, zum Beispiel Notepad, und den speziellen Code an eine leere Textdatei anhängen.

Denken Sie daran, dass Sie example.com durch Ihren persönlichen Namen der Domain und Ihr Design durch Ihr tatsächliches Designverzeichnis ersetzen müssen. Speichern Sie diese Datei als slidepanel.js auf Ihrem Desktop.

Danach benötigen Sie ein Bild, das Sie als Symbol des Menüs verwenden.

Als Menü-Icon wird am häufigsten ein Icon eines Hamburgers verwendet. Sie werden Tonnen solcher Bilder von verschiedenen Internetseiten sehen. Wir verwenden das Menüsymbol aus der Google Material Icons-Bibliothek.

Jetzt sehen Sie ein Bild, das Sie verwenden möchten, speichern Sie es als menu.png.

Danach müssen Sie einen FTP-Kunden öffnen und die Datei slidepanel.js in den Ordner /wp-content/your-theme/js/ hochladen.

Wenn Ihr Themenkatalog keinen JS-Ordner enthält, müssen Sie ihn erstellen und dann Ihre Datei hochladen.

Nach diesem Vorgang müssen Sie die Datei menu.png in den Ordner /wp-content/themes/your-theme/images/ hochladen.

Sobald die Dateien hochgeladen sind, müssen wir davon überzeugt sein, dass Ihr Design die JavaScript-Datei, die Sie in diesem Moment hinzufügen, beeinflusst. Wir erreichen dies, indem wir die JavaScript-Datei in die Warteschlange einreihen.

Hängen Sie diesen Code an die Datei functions.php Ihres Themes an.

Beachten Sie, dass das Navigationsmenü Ihres Designs immer noch vorhanden ist. Wir haben es gerade um HTML gewickelt, das wir brauchen, um das Slidepanel-Menü auszulösen.

Der letzte Schritt besteht darin, CSS hinzuzufügen, um das Menübildsymbol auf größeren Bildschirmen auszublenden. Sie müssen auch die Position des Menüsymbols anpassen.

Abhängig von Ihrem WordPress-Theme müssen Sie möglicherweise das CSS anpassen, um Konflikte zu vermeiden.