So erstellen Sie ein responsives Navigationsmenü in WordPress
Veröffentlicht: 2021-07-22Der Weg zum Erstellen eines responsiven Navigationsmenüs in WordPress ist offen. Dank der Flexibilität, die WordPress bietet, gibt es unzählige Möglichkeiten, dies zu tun.
Heute zeige ich Ihnen, wie Sie ein schlankes und responsives Navigationsmenü erstellen. Lean, weil wir all dies in weniger als 8 Kilobyte erreichen werden, und gemein, weil es ein unglaublich effizientes Navigationsmenü sein wird. Wir werden einfach Ihr aktuelles Navigationsmenü spiegeln, damit Sie nicht zwei verschiedene pflegen müssen. Indem wir zwei Fliegen mit einer Klappe schlagen, erstellen wir ein Menü, das sie alle beherrscht.
Bevor wir beginnen, empfehlen wir Ihnen, über grundlegende Kenntnisse in der Front-End-Entwicklung zu verfügen. (Wir setzen nur Vertrautheit und keine Kenntnisse voraus, also bitte keine Panik.) Grundlegende HTML-, CSS-, jQuery- und WordPress-Kenntnisse wären ideal. Dies ist ein Tutorial für Anfänger bis Fortgeschrittene, da es die Änderung von WordPress-Designdateien beinhaltet.
Sie benötigen außerdem Zugriff auf die folgenden WordPress-Designdateien:
-
functions.php -
header.php -
footer.php -
Style.css
Bevor Sie Änderungen vornehmen, erstellen Sie bitte unbedingt ein Backup Ihrer Website oder testen Sie die Änderungen zuerst in einer lokalen Umgebung. Sie möchten immer eine Möglichkeit haben, zu Ihren Originaldateien zurückzukehren.
Wir werden bigSlide.js verwenden, ein winziges jQuery-Plug-in zum Erstellen von Off-Screen-Folienfeldern. Auf der Website des Plugins wird es als „ein klitzekleines (~1kb komprimiertes) jQuery-Plugin zum Erstellen einer Off-Screen-Slide-Panel-Navigation“ beschrieben. Dies steht im Einklang mit unserem schlanken und reaktionsschnellen Navigationsziel.
Lass uns mit der Arbeit beginnen.
1. Laden Sie die neueste komprimierte Version von bigSlide.js herunter. Kopieren Sie die Datei in den /js -Ordner Ihres Themes.
2. Öffnen Sie die functions.php in Ihrem bevorzugten Code-Editor. Suche nach wp_enqueue_script . Du wirst wahrscheinlich mehrere Instanzen sehen, da wp_enqueue_script die Standardmethode zum Hinzufügen von Skripten zu WordPress ist.
3. Fügen Sie direkt nach der letzten Instanz von wp_enqueue_script das folgende Snippet hinzu und speichern Sie es.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. Öffnen header.php und fügen Sie den Klassen- push zum ersten div direkt nach dem body-Tag hinzu. Dieser Abschnitt sieht normalerweise so aus:
<body <?php body_class(); ?>><div class="hfeed site">.Nach dem Hinzufügen sollten Sie also Folgendes erhalten:
<div class="hfeed site push">. 5. Während Sie sich noch in header.php suchen Sie nach site-navigation . Abhängig von Ihrem Thema ist dies entweder eine Klasse oder eine ID. In den meisten WordPress-Themes sollte es in etwa so aussehen:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt; 6. Fügen Sie das folgende Snippet direkt vor </nav> . Sie sollten damit enden:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt;Hier erstellen wir ein Hamburger-Symbol, das zum Auslösen des mobilen Menüs verwendet wird.
7. Öffnen footer.php und suchen Sie nach <?php wp_footer(); ?> <?php wp_footer(); ?> . Fügen Sie direkt nach dieser Zeile das folgende Snippet hinzu:
&amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({ menu: '.mobile-menu', speed: 300, side:"right", easyClose:true});&amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;gt;Grundsätzlich erstellen wir ein verstecktes doppeltes Navigationsmenü in der Fußzeile.
8. Öffnen Sie schließlich style.css und fügen Sie direkt nach der letzten Zeile das folgende Code-Snippet hinzu:
.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;} .push{position:relative;} .menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;} .mobile-menu a{display:block;color:#fff;padding:10px 15px;} .mobile-menu a:hover{background-color:#555;} .mobile-menu li{border-bottom:1px #444 solid;} @media only screen and (max-width:900px) { #primary-menu{display:none;} .mobile-menu #primary-menu{display:block;} .menu-link{display:inline-block;} }Ich habe hier ein dunkles Farbschema verwendet, aber Sie können die Farben gerne an Ihre Bedürfnisse anpassen.
Dieser Ansatz funktioniert bei fast allen Standard-WordPress-Themes. Aufgrund der unterschiedlichen Anwendungsfälle und Header-Layouts müssen Sie jedoch möglicherweise einige Anpassungen vornehmen.
Letztlich bleiben die Grundlagen gleich. Der Grund dafür ist, dass Sie bei einer Bildschirmgröße von 900 Pixel oder weniger die Standard-Hauptnavigation ausblenden und stattdessen das Hamburger-Symbol anzeigen.
Wenn Sie auf das Hamburger-Symbol klicken oder tippen, öffnet sich das Menü, das wir in der Fußzeile dupliziert haben, als App-ähnliche Seitenleiste.
Wenn Sie nicht weiterkommen, hinterlassen Sie bitte unten einen Kommentar. Ich helfe Ihnen gerne weiter. Viel Spaß beim Codieren!