So fügen Sie ein Folienfenster in WordPress-Themes hinzu

Kürzlich hat uns einer unserer Benutzer gefragt, wie er sein Navigationsmenü durch ein jQuery-Folienmenü ersetzen kann. Das Folienbedienfeldmenü kann verwendet werden, um die Benutzererfahrung auf mobilen Websites erheblich zu verbessern. In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress-Themes ein Folienfenster hinzufügen.

Hinweis: Dieses Lernprogramm für Fortgeschrittene erfordert ausreichende HTML- und CSS-Kenntnisse.

Ersetzen des Standardmenüs durch ein Folienbedienfeldmenü in WordPress

Das Ziel hier ist, den Benutzern auf kleineren Bildschirmen ein Menü für die Folienanzeige zu zeigen, während das Standardmenü des Themas beibehalten wird, sodass Benutzer auf Laptops und Desktops das vollständige Menü sehen können. Bevor wir beginnen, ist es wichtig zu wissen, dass es viele verschiedene WordPress-Themes gibt, und Sie müssen sich später mit ein wenig CSS beschäftigen.

Zuerst müssen Sie einen einfachen Texteditor (z. B. Notepad) auf Ihrem Computer öffnen und eine neue Datei erstellen. Kopieren Sie diesen Code und fügen Sie ihn ein:

 (Funktion ($) $ ('# toggle'). toggle (Funktion () $ ('# popout'). animate (left: 0, 'slow', Funktion () $ ('# toggle') ) .html (''); ); , function () $ ('# popout'). animieren (left: -250, 'slow', function () $ ('# toggle'). html (''); ); ); ) (jQuery); 

Ersetzen example.com mit Ihrem eigenen Domainnamen und auch ersetzen dein-thema mit Ihrem aktuellen Themenverzeichnis. Speichern Sie diese Datei unter dem Namen slidepanel.js auf Ihrem Desktop. Dieser Code verwendet jQuery zum Umschalten eines Folienbedienfeldmenüs. Es animiert auch den Umschalteffekt.

Öffnen Sie einen FTP-Client wie Filezilla und stellen Sie eine Verbindung zu Ihrer Website her. Gehen Sie als nächstes in Ihr Designverzeichnis und öffnen Sie es, wenn es einen js-Ordner hat. Wenn Ihr Design-Verzeichnis keinen Ordner "js" hat, müssen Sie einen erstellen und die Datei "slidepanel.js" in den Ordner "js" hochladen.

Der nächste Schritt ist das Entwerfen oder Suchen eines Menüsymbols. 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. Wenn Sie Ihr Menüsymbol erstellt oder gefunden haben, benennen Sie es in menu.png um und laden Sie es in den Bilderordner in Ihrem Designverzeichnis hoch.

Der nächste Schritt ist das Einreihen der Javascript-Datei für das Folienfenster in WordPress. 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); 

Nun, da alles eingerichtet ist, müssen Sie das Standardmenü Ihres Themes ändern. Normalerweise zeigen die meisten Themen Navigationsmenüs in den Themen an header.php Datei. Öffnen header.php Datei und finde die Zeile ähnlich dieser:

  'primary', 'menu_class' => 'nav-menu'))); ?> 

Das Ziel hier ist, das Navigationsmenü Ihres Themas mit dem HTML-Code zu umschließen, um das Menü der Folienleiste auf kleineren Bildschirmen anzuzeigen. Wir werden es in ein packen und . So was:

    'primary', 'menu_class' => 'nav-menu'))); ?>  

Ersetzen Sie example.com durch Ihren eigenen Domainnamen und Ihr Design durch Ihr Designverzeichnis. Speichern Sie Ihre Änderungen.

Der letzte Schritt ist die Verwendung von CSS, 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 Schiebereglers anpassen. Kopieren Sie dieses CSS in das Stylesheet Ihres Themes.

 @media screen und (min-width: 769px) #toggle display: none;  @media screen und (max-width: 768px) #popout position: fixed; Höhe: 100%; Breite: 250px; Hintergrund: rgb (25, 25, 25); Hintergrund: rgba (25, 25, 25, .9); Farbe weiß; oben: 0px; links: -250px; Überlauf: Auto;  #toggle float: right; Position: feststehend; oben: 60px; rechts: 45px; Breite: 28px; Höhe: 24px;  .nav-menu li border-bottom: 1px solid #eee; Polsterung: 20px; Breite: 100%;  .nav-menu li: hover Hintergrund: #CCC;  .nav-menu li a color: #FFF; Textdekoration: keine; Breite: 100%;  

Denken Sie daran, dass das Navigationsmenü Ihres Themas möglicherweise unterschiedliche CSS-Klassen verwendet und diese möglicherweise zu einem Konflikt mit diesem CSS-Stil führen. Sie können diese Probleme jedoch beheben, indem Sie mit dem Chrome-Inspector-Tool herausfinden, welche CSS-Klassen in Ihrem Stylesheet in Konflikt stehen. Spielen Sie mit CSS, um Ihrem Stil und Ihren Bedürfnissen zu entsprechen.

Wir hoffen, dieses Tutorial hat Ihnen dabei geholfen, mit jQuery ein Menü für das Folienfenster in WordPress hinzuzufügen. Für Feedback und Fragen hinterlassen Sie bitte einen Kommentar und vergessen Sie nicht, uns bei Google zu folgen+