Wie eine ansprechende Menü für mobile Wordpress erstellen

Möchten Sie ein Responsive Mobile-Menü in Ihrem WordPress-Blog erstellen?

Heutzutage gibt es mehr mobile Benutzer als Desktop-Benutzer. Das Hinzufügen eines reaktionsschnellen Menüs für Handys erleichtert Benutzern das Navigieren auf Ihrer Website.

In diesem Tutorial zeigen wir Ihnen, wie Sie auf einfache Weise ein responsives Menü in WordPress erstellen.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren

Dann zurück zu warum wir hier sind.

Dies wird vertieft, indem sowohl die Methode mit einem Plugin für Anfänger als auch die Codierungsmethode für fortgeschrittene Benutzer gezeigt werden.

Erste Methode: Erstellen Sie ein mobiles Menü mit einem WordPress-Plugin

Diese Methode ist einfacher und für Anfänger zu empfehlen, da keine besonderen Programmierkenntnisse erforderlich sind.

In dieser Methode erstellen wir ein Menü (mit einem Hamburger-Symbol), die auf dem mobilen Bildschirm gleitet.

Als erstes müssen Sie das installieren und aktivieren WordPress Responsive Menu Plugin . Für weitere Details, Lesen Sie in unserer Anleitung nach, wie Sie ein WordPress-Plugin installieren .

Nach dem Aktivieren des Plugins fügt das Plugin einen neuen Menüpunkt mit dem Titel " Responsive Menü “. Wenn Sie darauf klicken, gelangen Sie zur Seite mit den Plugin-Einstellungen.

Sie müssen zuerst die Größe eingeben, ab der das mobile Menü angezeigt wird. Der Standardwert ist 800 px, was für die meisten Websites funktionieren sollte.

Danach müssen Sie das Menü auswählen, das Sie auf dem Handy verwenden möchten.

Mit der letzten Option auf dem Bildschirm können Sie eine CSS-Klasse für Ihr Menü angeben. Dadurch kann das Plugin Ihr nicht reagierendes Menü auf kleineren Bildschirmen ausblenden.

Vergessen Sie nicht, auf «zu klicken Update-Optionen Speichern Sie Ihre Einstellungen.

Wir empfehlen Ihnen auch, unsere zu entdecken 10 WordPress-Plugins zum Erstellen von Menüs in Ihrem Blog

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

Das Plugin « Responsive Menü Bietet viele weitere Optionen, mit denen Sie das Verhalten und das Erscheinungsbild Ihres reaktionsfähigen Menüs ändern können. Sie können diese Optionen auf der Plugin-Einstellungsseite erkunden und nach Bedarf anpassen.

2-Methode: Manuelles Hinzufügen eines mobilen Menüs

Eine der am häufigsten verwendeten Methoden zum Anzeigen eines Menüs auf mobilen Bildschirmen ist die Verwendung der Hebelwirkung.

Bei dieser Methode müssen Sie Ihren WordPress-Dateien benutzerdefinierten Code hinzufügen.

In einem unserer vorherigen Tutorials zeigen wir es Ihnen Wie erstelle ich ein WordPress-Plugin?.

Sie müssen zuerst einen Texteditor wie Notepad öffnen und diesen Code einfügen.

(Function () {var nav = document.getElementById ( 'Website-Navigation'), Taste, Menü; if (nav) {return ;!} Taste = nav.getElementsByTagName ( 'Taste') [0] = nav-Menü. getElementsByTagName ( 'ul') [0] if {return;} (Taste!) // Schaltfläche ausblenden, wenn Menü fehlt oder ist leer, wenn (|| menu.childNodes.length Menü!) = {button.style.display. 'keine'; return;} button.onclick = function () {if (-1 === menu.className.indexOf (NAV-Menü ')) {menu.className = nav-Menü';} if (- ! == 1 button.className.indexOf ( 'umgeschaltet werden')) {button.className button.className.replace = ( 'umgeschaltet werden', ''); menu.className menu.className.replace = ( ‚umgeschaltet -on ',' ');} else {button.className + =' umgeschaltet '; menu.className + =' umgeschaltet ';}};}) (jQuery);

Jetzt müssen Sie diese Datei mit dem Namen " Navigation.js Auf deinem Schreibtisch.

Dann müssen Sie einen FTP-Client öffnen, um diese Datei in das Verzeichnis "/ wp-content / themes / your-theme / js /" auf Ihrer WordPress-Website herunterzuladen.

Ersetzen Sie den Ausdruck " Ihr-Thema Mit dem Namen des Ordners Ihres aktuellen WordPress-Themas. Wenn Ihr Themenverzeichnis keinen js-Ordner enthält, müssen Sie einen erstellen.

Nachdem Sie die JavaScript-Datei heruntergeladen haben, müssen Sie sicherstellen, dass Ihre WordPress-Website die JavaScript-Dateien lädt. Sie müssen der Datei den folgenden Code hinzufügen functions.php Von deinem WordPress Theme.

Etwas anderes entdecken Was können Sie mit der Datei functions.php machen?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (‘jquery '), 20160909', true.);

Jetzt müssen wir das Navigationsmenü in unserem WordPress-Theme hinzufügen. Normalerweise wird das Navigationsmenü zur Datei hinzugefügt. " header.php Von deinem WordPress Theme.

<nav id = "site-navigation" class = "main-navigation" role = "navigation"> <button class = "menu-toggle"> Menü </ button> <? php wp_nav_menu (array ('theme_location' => ' primary ',' menu_class '=>' nav-menu ')); ?> </ nav>

Wir gehen davon aus, dass der von Ihrem WordPress-Theme definierte Menüpfad " primär “. Wenn nicht, verwenden Sie den von Ihrem WordPress-Theme definierten Ort.

Entdecken Sie auch unsere 5 WordPress-Plugins zum Erstellen von Anmeldeformularen

Der letzte Schritt ist das Hinzufügen von CSS, damit unser Menü die richtigen CSS-Klassen verwendet, um bei der Anzeige auf Mobilgeräten umzuschalten.

/ * Navigationsmenü * / .main-navigation {Rand oben: 24px; Rand oben: 1.714285714rem; Textausrichtung: Mitte; } .main-navigation li {margin-top: 24px; Rand oben: 1.714285714rem; Schriftgröße: 12px; Schriftgröße: 0.857142857rem; Zeilenhöhe: 1.42857143; } .main-navigation a {color: #5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: #21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS ist mobile Geräte @media Bildschirm zu verwenden und (min-width: 600px) {ul.nav .main Menü-Navigationsmenü div.nav .main-Navigation> ul {border-bottom: solid # 1px ededed; border-top: 1px solid #ededed; Anzeige: Inline-Block! wichtig; Text ausrichten: links; Breite: 100%; } .main-navigation ul {margin: 0; Texteinzug: 0; } .main-navigation li a, .main-navigation li {Anzeige: Inline-Block; Textdekoration: keine; } .main-navigation li a {border-bottom: 0; Farbe: #6a6a6a; Zeilenhöhe: 3.692307692; Text-Transformation: Großbuchstaben; Leerraum: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {Farbe: #000; } .main-navigation li {margin: 0 40px 0 0; Rand: 0 2.857142857rem 0 0; Position: relativ; } .main-navigation li ul {margin: 0; Polsterung: 0; Position: absolut; oben: 100%; Z-Index: 1; Höhe: 1px; width: 1px; Überlauf: versteckt; Clip: Rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; links: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; clip: erben; Überlauf: erben; Höhe: erben; Breite: erben; } .main-navigation li ul li {Hintergrund: #efefef; border-bottom: 1px solid #ededed; Anzeige: Block; Schriftgröße: 11px; Schriftgröße: 0.785714286rem; Zeilenhöhe: 2.181818182; Polsterung: 8px 10px; Polsterung: 0.571428571rem 0.714285714rem; width: 180px; width: 12.85714286rem; Leerraum: normal; } .main-navigation li li li: hover, .main-navigation li li li: focus {Hintergrund: #e3e3e3; Farbe: #444; } .Current-item-Menü-Navigation .main> hat .Current-Vorfahr-Menü-Navigation .main> hat .main-Navigation .current_page_item> hat .main-Navigation .current_page_ancestor> a {color: #636363; Schriftgröße: fett; } .menu-toggle {display: none; }}

Sie können jetzt Ihre Website besuchen und die Größe Ihres Browser-Bildschirms ändern, um festzustellen, ob Ihr responsives Menü umgedreht wird.

Entdecken Sie auch einige Premium-WordPress-Plugins

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. UberMenu

UberMenu ist ein WordPress-Plugin, das sich der Erstellung eines anpassbaren, reaktionsschnellen und für Benutzer zugänglichen Megamenüs widmet. Es ist nach der Installation ohne spezielle Konfiguration funktionsfähig.

Es ist ein benutzerfreundliches Plugin, das jedoch leistungsstark genug ist, um äußerst anpassbare und kreative Megamenü-Konfigurationen zu erstellen.

Siehe auch unsere 9 WordPress-Plugins zum Erstellen von Preisgittern in einem Blog

Sie finden unter anderem: 3-Menüvorlagen, voll ansprechendes Layout, Kompatibilität mit Mobilgeräten (iPhone, iPad, Android), Touch-Unterstützung usw.

Download | Demo | Web-Hosting

2. LMM

Liquida Mega Menu, noch LMM genannt, ist ein WordPress-Plugin, das für Benutzer und Entwickler entwickelt wurde. Es verfügt über eine einfache und intuitive Benutzeroberfläche, die in das WP-Dashboard integriert ist und es Ihnen ermöglicht, eine unbegrenzte Anzahl von Megamenüs ohne Programmierkenntnisse zu erstellen und anzupassen.

Es bietet Dutzende von Funktionen, egal ob für normale oder fortgeschrittene Benutzer. Als Funktionalität bietet es unter anderem: automatische und manuelle Integration, Unterstützung für Multisite, kümmert sich um kinderthemen, der vollständig anpassbare Stil für Menüs, anpassbare Menüpositionen, das Sticky-Menü usw.

Download | Demo | Web-Hosting

3. 8Degree Flugmenü

8Degree Fly Menu ist ein Premium-WordPress-Plugin, mit dem Sie Ihrer Website ein Canvas-Menü hinzufügen können, das Ihre Informationen hervorhebt und vereinfacht. Es verwendet die Standard-WordPress-Menüfunktion, um seine Menüs zu erstellen.

Sie können den Standardmenüelementen zusätzliche Elemente hinzufügen, z. B. Symbole, Menüslogans, eine Pseudo-Gruppierungsüberschrift und eine lange Beschreibung.

Lesen Sie auch: 10 WordPress-Plugins zur Optimierung von Seitenleisten und Kopfzeilen

Außerdem ist ein WYSIWYG-Editor enthalten, mit dem Sie Ihre lange Beschreibung benutzerfreundlich erfassen und Shortcodes verwenden können.

Download | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

• Wie ein schwebendes Menü auf Wordpress erstellen
• 8 WordPress-Plugins zum Erstellen eines Megamenüs in Ihrem Blog
• Einige Tipps zum Erstellen moderner Menüs für Ihren Blog
• 6 WordPress-Plugins zum Verwalten von Kategorien und Unterkategorien in Ihrem Blog

Fazit

Das war's Ich hoffe, Sie können damit ein Menü für mobile Benutzer erstellen. Zögern Sie nicht zu Teilen Sie den Tipp mit Ihren Freunden in Ihren sozialen Netzwerken.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Aber erzählen Sie uns in der Zwischenzeit von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

...