Kürzlich hat uns einer unserer Benutzer gefragt, wie sie ihr Navigationsmenü durch ein jQuery-Folienmenü ersetzen können. Das Slide-Panel-Menü kann verwendet werden, um die Benutzererfahrung auf mobilen Websites erheblich zu verbessern. In diesem Artikel zeigen wir Ihnen, wie Sie ein Slide-Panel-Menü in WordPress-Themes hinzufügen.
Hinweis: Dies ist ein Tutorial der Mittelstufe und erfordert ausreichende HTML- und CSS-Kenntnisse.
Ersetzen des Standardmenüs durch ein Slide Panel-Menü in WordPress
Das Ziel hier ist es, Benutzern auf kleineren Bildschirmen ein Folienmenü anzuzeigen, während das Standardmenü unseres Designs beibehalten wird, damit die Benutzer auf Laptops und Desktops das vollständige Menü sehen können. Bevor wir loslegen, ist es wichtig zu wissen, dass es viele verschiedene WordPress-Themes gibt und Sie sich später mit ein wenig CSS beschäftigen müssen.
Als erstes müssen Sie einen Nur-Text-Editor auf Ihrem Computer wie Notepad öffnen und eine neue Datei erstellen. Kopieren Sie diesen Code und fügen Sie ihn ein:
(function($) { $('#toggle').toggle( function() { $('#popout').animate({ left: 0 }, 'slow', function() { $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); }, function() { $('#popout').animate({ left: -250 }, 'slow', function() { $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); } ); })(jQuery);
Ersetzen example.com
mit Ihrem eigenen Domainnamen, und auch ersetzen your-theme
mit Ihrem aktuellen Themenverzeichnis. Speichern Sie diese Datei als slidepanel.js auf Ihrem Desktop. Dieser Code verwendet jQuery, um ein Folienmenü umzuschalten. Es animiert auch den Toggle-Effekt.
Öffnen Sie einen FTP-Client wie Filezilla und stellen Sie eine Verbindung zu Ihrer Website her. Gehen Sie als Nächstes zu Ihrem Themenverzeichnis und öffnen Sie es, wenn es einen js-Ordner enthält. Wenn Ihr Themenverzeichnis keinen js-Ordner hat, müssen Sie einen erstellen und die Datei slidepanel.js in den js-Ordner hochladen.
Der nächste Schritt besteht darin, ein Menüsymbol zu entwerfen oder zu finden. Das am häufigsten verwendete Menüsymbol ist das mit drei Zeilen. Sie können eines mit Photoshop erstellen oder eines der vielen vorhandenen Bilder von Google finden. Für dieses Tutorial verwenden wir ein 27x23px Menüsymbol. Sobald Sie Ihr Menüsymbol erstellt oder gefunden haben, benennen Sie es in menu.png um und laden Sie es in den Bilderordner in Ihrem Themenverzeichnis hoch.
Der nächste Schritt besteht darin, die JavaScript-Datei für das Folienfenster in WordPress einzureihen. Kopieren Sie einfach diesen Code und fügen Sie ihn in Ihr Theme ein functions.php
Datei.
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );
Nachdem alles eingerichtet ist, müssen Sie das Standardmenü Ihres Themes ändern. Normalerweise zeigen die meisten Themes Navigationsmenüs in den Themes an header.php
Datei. Offen header.php
Datei und suchen Sie die Zeile ähnlich dieser:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
Das Ziel hier besteht darin, das Navigationsmenü Ihres Themes mit dem HTML-Code zu umschließen, um Ihr Folienmenü auf kleineren Bildschirmen anzuzeigen. Wir werden es in ein wickeln <div id="toggle">
und <div id="popout">
. So was:
<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div> <div id="popout"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </div>
Ersetzen Sie example.com durch Ihren eigenen Domainnamen und Ihr-Theme durch Ihr Themenverzeichnis. Speichern Sie Ihre Änderungen.
Der letzte Schritt besteht darin, CSS zu verwenden, um das Menüsymbol für Benutzer mit größeren Bildschirmen auszublenden und für Benutzer mit kleineren Bildschirmen anzuzeigen. Wir müssen auch die Position des Menüsymbols und das Erscheinungsbild des Folienbereichs anpassen. Kopieren Sie dieses CSS und fügen Sie es in das Stylesheet Ihres Themes ein.
@media screen and (min-width: 769px) { #toggle { display:none; } } @media screen and (max-width: 768px) { #popout { position: fixed; height: 100%; width: 250px; background: rgb(25, 25, 25); background: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; } #toggle { float: right; position: fixed; top: 60px; right: 45px; width: 28px; height: 24px; } .nav-menu li { border-bottom:1px solid #eee; padding:20px; width:100%; } .nav-menu li:hover { background:#CCC; } .nav-menu li a { color:#FFF; text-decoration:none; width:100%; } }
Denken Sie daran, dass das Navigationsmenü Ihres Themes möglicherweise verschiedene CSS-Klassen verwendet und diese möglicherweise mit diesem CSS-Stil in Konflikt geraten. Sie können diese Probleme jedoch beheben, indem Sie das Chrome Inspector-Tool verwenden, um herauszufinden, welche CSS-Klassen in Ihrem Stylesheet in Konflikt stehen. Spielen Sie mit dem CSS herum, um Ihrem Stil und Ihren Bedürfnissen gerecht zu werden.
Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, mit jQuery ein Folienmenü in WordPress hinzuzufügen. Für Feedback und Fragen hinterlassen Sie bitte unten einen Kommentar und vergessen Sie nicht, uns zu folgen Google+