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

Mobile Benutzer sind heutzutage zahlreicher als Desktop-Benutzer. Das Hinzufügen eines reaktionsschnellen mobilen Menüs 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 viele Plugins müssen unter WordPress installiert werden?. et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Hier geht es darum, in die Tiefe zu gehen, indem wir Ihnen sowohl die Methode mit einem Plugin für Anfänger als auch die Codierungsmethode für fortgeschrittene Benutzer zeigen.

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 unsere Anleitung zur Installation eines WordPress-Plugins .

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 Einstellungen für das WordPress-Plugin.

Sie müssen zuerst die Größe eingeben, ab der das mobile Menü angezeigt werden soll. Der Standardwert ist 800px, 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ü bereitstellen. Dadurch kann das Plugin Ihr nicht reagierendes Menü auf kleinen 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 Browserbildschirms ändern, um das Reaktionsmenü in Aktion zu sehen.

Das Plugin « Responsive Menü »Bietet viele andere Optionen, mit denen Sie das Verhalten und das Erscheinungsbild Ihres Reaktionsmenüs ändern können. Sie können diese Optionen auf der Einstellungsseite des Plugins erkunden und nach Bedarf anpassen.

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

Eine der häufigsten Methoden zum Anzeigen eines Menüs auf mobilen Bildschirmen ist die 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?.

Zuerst müssen Sie 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 Ihres aktuellen WordPress-Theme-Ordners. Wenn Ihr Themenverzeichnis keinen js-Ordner hat, müssen Sie einen erstellen.

Nach dem Hochladen der JavaScript-Datei müssen Sie im nächsten Schritt sicherstellen, dass Ihre WordPress-Website die JavaScript-Dateien lädt. Sie müssen den folgenden Code zum " functions.php Von deinem WordPress Theme.

Entdecke etwas anderes 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">Menu</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üort "" heißt. primär ". Verwenden Sie andernfalls den von Ihrem WordPress-Theme definierten Ort.

Der letzte Schritt besteht darin, etwas CSS hinzuzufügen, damit unser Menü die richtigen CSS-Klassen verwendet, um bei der Anzeige auf Mobilgeräten zu wechseln.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 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 to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

Sie können jetzt Ihre Website besuchen und die Größe Ihres Browserbildschirms ändern, um festzustellen, ob Ihr responsives Menü umschaltet.

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 hochgradig anpassbaren, reaktionsschnellen und für Benutzer zugänglichen Megamenu widmet. Es ist nach der Installation funktionsfähig, ohne dass eine spezielle Konfiguration erforderlich ist.

Es ist ein benutzerfreundliches Plugin, das jedoch leistungsstark genug ist, um hochgradig anpassbare und kreative Mega-Menü-Layouts zu erstellen.

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

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

Download | Demo | Web-Hosting

2. LMM

Das Liquida Mega Menu, auch LMM genannt, ist ein WordPress-Plugin für Benutzer und Entwickler. 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 Mega-Menü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, vollständig anpassbarer Stil für Menüs, anpassbare Menüpositionen, Sticky-Menü usw.

Download | Demo | Web-Hosting

3. 8Degree Flugmenü

8Degree Fly Menu ist ein Premium-WordPress-Plugin, mit dem Sie ein Canvas-Menü auf Ihrer Website hinzufügen können, um ein Erscheinungsbild zu erhalten, das Ihre Informationen auf einfache Weise hervorhebt. 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 umbenennen Bilder auf einem Wordpress-Blog
• 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

So ! Das war es für dieses Tutorial. Ich hoffe, es ermöglicht Ihnen, ein Menü für mobile Benutzer zu erstellen. fühlen sich frei 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.

...