![\"Slider-Panel-Men\u00fc](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/slide-panel-menu.png\" "\\"Slider-Panel-Men\u00fc")
<\/p>\nK\u00fcrzlich hat uns einer unserer Benutzer gefragt, wie das Navigationsmen\u00fc durch ein jQuery-Slider-Panel-Men\u00fc ersetzt werden kann. Das Schiebetafelmen\u00fc kann verwendet werden, um die Benutzererfahrung auf mobilen Websites erheblich zu verbessern. In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Themen ein Folienmen\u00fc hinzuf\u00fcgen.<\/p>\n
<\/p>\n
Hinweis: Dies ist ein Tutorial f\u00fcr Fortgeschrittene und erfordert ausreichende Kenntnisse in HTML und CSS.<\/p>\n
Ziel ist es, ein Schiebetafelmen\u00fc f\u00fcr Benutzer auf kleineren Bildschirmen anzuzeigen, wobei das Standardthemenmen\u00fc f\u00fcr Benutzer auf Laptops beibehalten wird und der Desktop das vollst\u00e4ndige Men\u00fc sehen kann. Bevor wir anfangen, ist es wichtig zu wissen, dass es viele verschiedene WordPress-Themen gibt und dass Sie sich sp\u00e4ter mit etwas CSS befassen m\u00fcssen. <\/p>\n
Das erste, was Sie tun sollten, ist, einen Nur-Text-Editor auf Ihrem Computer wie Notepad zu \u00f6ffnen und eine neue Datei zu erstellen. Kopieren Sie diesen Code und f\u00fcgen Sie ihn ein: <\/p>\n
(Funktion ($) {
$ (‘# umschalten’). abwechselnd (
Besetzung () {
$ (‘# popout’). animieren ({left: 0}, ‘langsam’, function () {
$ (‘# umschalten’). html (‘![\"in](\"https:\/\/www.example.com\/wp-content\/themes\/your-theme\/images\/menu.png\")
‘);
});
}}
function () {
$ (‘# popout’). animieren ({left: -250}, ‘slow’, function () {
$ (‘# umschalten’). html (‘‘);
});
}}
);
}) (jQuery);<\/p>\n
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\u00fc zu \u00e4ndern. Es animiert auch den Umschalteffekt. <\/p>\n
\u00d6ffnen Sie einen FTP-Client wie Filezilla und stellen Sie eine Verbindung zu Ihrer Website her. Gehen Sie dann zum Themenverzeichnis und \u00f6ffnen Sie es, wenn Sie einen js-Ordner haben. Wenn das Themenverzeichnis keinen js-Ordner hat, m\u00fcssen Sie einen erstellen und die Datei slidepanel.js in den js-Ordner laden. <\/p>\n
Der n\u00e4chste Schritt besteht darin, ein Men\u00fcsymbol zu erstellen oder zu finden. Das am h\u00e4ufigsten verwendete Men\u00fcsymbol ist das mit drei Zeilen. Sie k\u00f6nnen eines mit Photoshop erstellen oder eines der vielen Bilder bei Google finden. F\u00fcr dieses Tutorial verwenden wir ein 27x23px-Men\u00fcsymbol. Benennen Sie das Men\u00fcsymbol nach dem Erstellen oder Suchen in menu.png um und laden Sie es in den Bilderordner im Themenverzeichnis. <\/p>\n
Der n\u00e4chste Schritt besteht darin, die Javascript-Datei im Folienfenster von WordPress in die Warteschlange zu stellen. Kopieren Sie diesen Code einfach und f\u00fcgen Sie ihn in die Datei functions.php Ihres Themas ein. <\/p>\n
wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘\/js\/slidepanel.js’, array (‘jquery’), ‘20131010’, true);<\/p>\n
Nachdem alles eingerichtet ist, sollten Sie das Standardmen\u00fc Ihres Themas \u00e4ndern. Im Allgemeinen zeigen die meisten Themen Navigationsmen\u00fcs in der Datei header.php des Themas an. \u00d6ffnen Sie die Datei header.php und suchen Sie die folgende Zeile: <\/p>\n ","protected":false},"excerpt":{"rendered":"
K\u00fcrzlich hat uns einer unserer Benutzer gefragt, wie das Navigationsmen\u00fc durch ein jQuery-Slider-Panel-Men\u00fc ersetzt werden kann. Das Schiebetafelmen\u00fc kann verwendet werden, um die Benutzererfahrung auf mobilen Websites erheblich zu verbessern. In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Themen ein Folienmen\u00fc hinzuf\u00fcgen. Hinweis: Dies ist ein Tutorial f\u00fcr Fortgeschrittene und erfordert ausreichende Kenntnisse in HTML […]<\/p>\n","protected":false},"author":1,"featured_media":37301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/Como-agregar-un-menu-de-panel-de-diapositivas-en-temas.jpg","fifu_image_alt":""},"categories":[7],"tags":[1300,10633,271,10634],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/37300"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=37300"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/37300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/37301"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=37300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=37300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=37300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}