Kürzlich hat uns einer unserer Benutzer gefragt, wie das Navigationsmenü durch ein jQuery-Slider-Panel-Menü ersetzt werden kann. Das Schiebetafelmenü kann verwendet werden, um die Benutzererfahrung auf mobilen Websites erheblich zu verbessern. In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Themen ein Folienmenü hinzufügen.
Hinweis: Dies ist ein Tutorial für Fortgeschrittene und erfordert ausreichende Kenntnisse in HTML und CSS.
Ersetzen Sie das Standardmenü in WordPress durch ein Schiebefeldmenü
Ziel ist es, ein Schiebetafelmenü für Benutzer auf kleineren Bildschirmen anzuzeigen, wobei das Standardthemenmenü für Benutzer auf Laptops beibehalten wird und der Desktop das vollständige Menü sehen kann. Bevor wir anfangen, ist es wichtig zu wissen, dass es viele verschiedene WordPress-Themen gibt und dass Sie sich später mit etwas CSS befassen müssen.
Das erste, was Sie tun sollten, ist, einen Nur-Text-Editor auf Ihrem Computer wie Notepad zu öffnen und eine neue Datei zu erstellen. Kopieren Sie diesen Code und fügen Sie ihn ein:
(Funktion ($) {
$ (‘# umschalten’). abwechselnd (
Besetzung () {
$ (‘# popout’). animieren ({left: 0}, ‘langsam’, function () {
$ (‘# umschalten’). html (‘
‘);
});
}}
function () {
$ (‘# popout’). animieren ({left: -250}, ‘slow’, function () {
$ (‘# umschalten’). html (‘‘);
});
}}
);
}) (jQuery);
Ersetzen Sie example.com durch Ihren eigenen Domainnamen und ersetzen Sie Ihr Thema durch das eigentliche Themenverzeichnis. Speichern Sie diese Datei als slidepanel.js auf Ihrem Desktop. Dieser Code verwendet jQuery, um ein Schiebetafelmenü zu ändern. Es animiert auch den Umschalteffekt.
Öffnen Sie einen FTP-Client wie Filezilla und stellen Sie eine Verbindung zu Ihrer Website her. Gehen Sie dann zum Themenverzeichnis und öffnen Sie es, wenn Sie einen js-Ordner haben. Wenn das Themenverzeichnis keinen js-Ordner hat, müssen Sie einen erstellen und die Datei slidepanel.js in den js-Ordner laden.
Der nächste Schritt besteht darin, ein Menüsymbol zu erstellen 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 Bilder bei Google finden. Für dieses Tutorial verwenden wir ein 27x23px-Menüsymbol. Benennen Sie das Menüsymbol nach dem Erstellen oder Suchen in menu.png um und laden Sie es in den Bilderordner im Themenverzeichnis.
Der nächste Schritt besteht darin, die Javascript-Datei im Folienfenster von WordPress in die Warteschlange zu stellen. Kopieren Sie diesen Code einfach und fügen Sie ihn in die Datei functions.php Ihres Themas ein.
wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, array (‘jquery’), ‘20131010’, true);
Nachdem alles eingerichtet ist, sollten Sie das Standardmenü Ihres Themas ändern. Im Allgemeinen zeigen die meisten Themen Navigationsmenüs in der Datei header.php des Themas an. Öffnen Sie die Datei header.php und suchen Sie die folgende Zeile:
