{"id":35718,"date":"2020-07-16T04:45:44","date_gmt":"2020-07-16T04:45:44","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/so-erstellen-sie-ein-ansprechendes-wordpress-menu-fur-mobile-gerate\/"},"modified":"2020-07-16T04:45:44","modified_gmt":"2020-07-16T04:45:44","slug":"so-erstellen-sie-ein-ansprechendes-wordpress-menu-fur-mobile-gerate","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/so-erstellen-sie-ein-ansprechendes-wordpress-menu-fur-mobile-gerate\/","title":{"rendered":"So erstellen Sie ein ansprechendes WordPress-Men\u00fc f\u00fcr mobile Ger\u00e4te"},"content":{"rendered":"

M\u00f6chten Sie ein ansprechendes WordPress-Men\u00fc f\u00fcr mobile Ger\u00e4te erstellen? Mobile Benutzer haben Desktop-Benutzer an vielen Standorten \u00fcbertroffen. Durch Hinzuf\u00fcgen eines anpassbaren mobilen Men\u00fcs k\u00f6nnen Benutzer problemlos auf der Website navigieren. In diesem Artikel zeigen wir Ihnen, wie Sie auf einfache Weise ein reaktionsschnelles WordPress-Men\u00fc f\u00fcr mobile Ger\u00e4te erstellen k\u00f6nnen. <\/p>\n

\"Erstellen<\/p>\n

Dies ist ein detailliertes Tutorial. Wir zeigen Ihnen die Addon-Methode f\u00fcr Anf\u00e4nger (keine Codierung) und die Codierungsmethode f\u00fcr unsere fortgeschrittenen Benutzer.<\/p>\n

Am Ende dieses Tutorials erfahren Sie, wie Sie ein gleitendes Popup-Men\u00fc, ein Dropdown-Popup-Men\u00fc und ein alternatives Popup-Men\u00fc erstellen.<\/p>\n

Bereit? Lasst uns anfangen.<\/p>\n

Videoanleitung<\/h4>\n

Melden Sie sich bei WPBeginner an<\/p>\n

Wenn Ihnen das Video nicht gef\u00e4llt oder Sie weitere Anweisungen ben\u00f6tigen, lesen Sie weiter.<\/p>\n

Methode 1: F\u00fcgen Sie mithilfe eines Plugins ein responsives Men\u00fc in WordPress hinzu<\/h4>\n

Diese Methode ist einfacher und wird Anf\u00e4ngern empfohlen, da keine benutzerdefinierte Codierung erforderlich ist. <\/p>\n

Bei dieser Methode erstellen wir ein Hamburger-Men\u00fc, das auf dem mobilen Bildschirm angezeigt wird.<\/p>\n

\"Responsive<\/p>\n

Als erstes m\u00fcssen Sie das responsive Men\u00fc-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-f\u00fcr-Schritt-Anleitung zum Installieren eines WordPress-Plugins.<\/p>\n

Nach der Aktivierung f\u00fcgt das Plugin Ihrer WordPress-Admin-Leiste einen neuen Men\u00fcpunkt namens “Responsive Menu” hinzu. Wenn Sie darauf klicken, gelangen Sie zur Konfigurationsseite des Plugins. <\/p>\n

\"Responsive<\/p>\n

Sie m\u00fcssen zuerst die Breite des Bildschirms eingeben, wenn das Plugin ein ansprechendes Men\u00fc anzeigt. Der Standardwert ist 800 px, was f\u00fcr die meisten Websites funktionieren sollte. <\/p>\n

Danach m\u00fcssen Sie das Men\u00fc ausw\u00e4hlen, das Sie f\u00fcr das Antwortmen\u00fc verwenden m\u00f6chten. Wenn Sie noch kein Men\u00fc erstellt haben, k\u00f6nnen Sie eines unter besuchen Aussehen \u00bbMen\u00fcs<\/strong>. Ausf\u00fchrliche Anweisungen finden Sie in unserer Anleitung zum Hinzuf\u00fcgen des Navigationsmen\u00fcs in WordPress. <\/p>\n

Die letzte Option auf dem Bildschirm besteht darin, eine CSS-Klasse f\u00fcr Ihr Men\u00fc ohne aktuelle Antwort bereitzustellen. Dadurch kann das Plugin sein nicht reagierendes Men\u00fc auf kleineren Bildschirmen ausblenden. <\/p>\n

Vergessen Sie nicht, auf “Update-Optionen” zu klicken, um Ihre Einstellungen zu speichern.<\/p>\n

Sie k\u00f6nnen jetzt die Website besuchen und die Gr\u00f6\u00dfe des Browserbildschirms \u00e4ndern, um das Reaktionsmen\u00fc in Aktion zu sehen. <\/p>\n

\"Responsive<\/p>\n

Das Responsive-Men\u00fc-Plugin enth\u00e4lt viele weitere Optionen, mit denen Sie das Verhalten und das Erscheinungsbild Ihres Responsive-Men\u00fcs \u00e4ndern k\u00f6nnen. Sie k\u00f6nnen diese Optionen auf der Konfigurationsseite des Plugins untersuchen und nach Bedarf anpassen. <\/p>\n

Methode 2: F\u00fcgen Sie mithilfe eines Plugins ein Dropdown-Auswahlmen\u00fc hinzu<\/h4>\n

Eine andere M\u00f6glichkeit, ein responsives Men\u00fc hinzuzuf\u00fcgen, besteht darin, ein Dropdown-Men\u00fc hinzuzuf\u00fcgen. Diese Methode erfordert keine Programmierkenntnisse und wird daher Anf\u00e4ngern empfohlen. <\/p>\n

\"Reaktionsschnelles<\/p>\n

Als erstes sollten Sie das sinnvolle Auswahlmen\u00fc-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-f\u00fcr-Schritt-Anleitung zum Installieren eines WordPress-Plugins.<\/p>\n

Nach der Aktivierung m\u00fcssen Sie besuchen Aussehen \u00bbResponsive Auswahl<\/strong> um die Plugin-Einstellungen zu konfigurieren. <\/p>\n

\"W\u00e4hlen<\/p>\n

Sie m\u00fcssen zum Abschnitt “Themenpositionen aktivieren” scrollen. Standardm\u00e4\u00dfig ist das Plugin an allen Stellen des Themas aktiviert. Sie k\u00f6nnen dies \u00e4ndern, indem Sie es selektiv f\u00fcr bestimmte Themenbereiche aktivieren. <\/p>\n

Vergessen Sie nicht, auf die Schaltfl\u00e4che Alle Einstellungen speichern zu klicken, um Ihre \u00c4nderungen zu speichern. <\/p>\n

Sie k\u00f6nnen jetzt die Website besuchen und die Gr\u00f6\u00dfe des Browserbildschirms \u00e4ndern, um das entsprechende Auswahlmen\u00fc in Aktion zu sehen. <\/p>\n

Methode 3: Erstellen Sie ein Reaktionsmen\u00fc f\u00fcr mobile Ger\u00e4te mit Umschalteffekt<\/h4>\n

Eine der am h\u00e4ufigsten verwendeten Methoden zum Anzeigen eines Men\u00fcs auf mobilen Bildschirmen ist die Verwendung des Umschalteffekts. <\/p>\n

Bei dieser Methode m\u00fcssen Sie Ihren WordPress-Dateien benutzerdefinierten Code hinzuf\u00fcgen. Wenn Sie dies noch nicht getan haben, lesen Sie unseren Leitfaden zum Einf\u00fcgen von Web-Snippets in WordPress. <\/p>\n

Sie m\u00fcssen zuerst einen Texteditor wie den Editor \u00f6ffnen und diesen Code einf\u00fcgen. <\/p>\n

(function () {
var nav = document.getElementById (‘Site-Navigation’), Schaltfl\u00e4che, Men\u00fc;
if (! nav) {
Kehrt zur\u00fcck;
}}<\/p>\n

button = nav.getElementsByTagName (‘button’) (0);
menu = nav.getElementsByTagName (‘ul’) (0);
if (button!) {
Kehrt zur\u00fcck;
}}<\/p>\n

\/\/ Schaltfl\u00e4che ausblenden, wenn das Men\u00fc fehlt oder leer ist.
if (! menu ||! menu.childNodes.length) {
button.style.display = ‘keine’;
Kehrt zur\u00fcck;
}}<\/p>\n

button.onclick = function () {
Was ist, wenn (-1 === menu.className.indexOf (‘Navigationsmen\u00fc’)) {
menu.className = ‘Navigationsmen\u00fc’;
}}<\/p>\n

Was ist, wenn (-1! == button.className.indexOf (‘alternative’)) {
button.className = button.className.replace (‘alternated’, \u201d);
menu.className = menu.className.replace (‘alternated’, \u201d);
} andere {
button.className + = ‘alternative’;
menu.className + = ‘alternative’;
}}
};
}) (jQuery);<\/p>\n

Jetzt m\u00fcssen Sie diese Datei als navigation.js auf Ihrem Desktop speichern. <\/p>\n

Als n\u00e4chstes m\u00fcssen Sie einen FTP-Client \u00f6ffnen, um diese Datei in den Ordner \/ wp-content \/ theme \/ your-theme-dir \/ js \/ auf Ihrer WordPress-Site hochzuladen. <\/p>\n

Ersetzen Sie das Themenverzeichnis durch das aktuelle Themenverzeichnis. Wenn das Themenverzeichnis keinen js-Ordner hat, m\u00fcssen Sie ihn erstellen. <\/p>\n

Nach dem Laden der JavaScript-Datei m\u00fcssen Sie im n\u00e4chsten Schritt sicherstellen, dass Ihre WordPress-Site dieses JavaScript l\u00e4dt. Sie m\u00fcssen der Datei functions.php Ihres Themas den folgenden Code hinzuf\u00fcgen. <\/p>\n

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘\/js\/navigation.js’, array (‘jquery’), ‘20160909’, true);<\/p>\n

Jetzt m\u00fcssen wir das Navigationsmen\u00fc zu unserem WordPress-Theme hinzuf\u00fcgen. Normalerweise wird das Navigationsmen\u00fc zur Datei header.php eines Themas hinzugef\u00fcgt. <\/p>\n ","protected":false},"excerpt":{"rendered":"

M\u00f6chten Sie ein ansprechendes WordPress-Men\u00fc f\u00fcr mobile Ger\u00e4te erstellen? Mobile Benutzer haben Desktop-Benutzer an vielen Standorten \u00fcbertroffen. Durch Hinzuf\u00fcgen eines anpassbaren mobilen Men\u00fcs k\u00f6nnen Benutzer problemlos auf der Website navigieren. In diesem Artikel zeigen wir Ihnen, wie Sie auf einfache Weise ein reaktionsschnelles WordPress-Men\u00fc f\u00fcr mobile Ger\u00e4te erstellen k\u00f6nnen. Dies ist ein detailliertes Tutorial. Wir […]<\/p>\n","protected":false},"author":1,"featured_media":35719,"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-crear-un-menu-de-WordPress-receptivo-listo-para-dispositivos.jpg","fifu_image_alt":""},"categories":[7],"tags":[9618,109,155,131,198,147,60,9256],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/35718"}],"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=35718"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/35718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/35719"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=35718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=35718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=35718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}