Vill du skapa en lyhörd mobilmeny på din WordPress-blogg?

Mobilanvändare är fler än stationära användare idag. Att lägga till en lyhörd mobilmeny gör det lättare för användare att navigera på din webbplats.

I denna handledning visar vi dig hur du enkelt kan skapa en lyhörd meny på WordPress.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Hur man skapar responsiv mobil wordpress-meny

Här kommer det att vara en fråga om att gå djupare genom att visa dig både metoden med ett plugin för nybörjare och kodningsmetoden för avancerade användare.

Första metoden: Skapa en mobilmeny med ett WordPress-plugin

Denna metod är enklare och rekommenderas för nybörjare eftersom den inte kräver några speciella kodningskunskaper.

I den här metoden skapar vi en meny (med en hamburgare-ikon) som glider på mobilskärmen.

Responsivt WordPress-meny-plugin

Det första du behöver göra är att installera och aktivera WordPress Responsive Menu-plugin . För mer information, kolla in vår guide om hur du installerar ett WordPress-plugin .

Efter aktivering av plugin kommer plugin att lägga till ett nytt objekt på menyn med titeln " Responsive Meny ". Om du klickar på den kommer du till inställningssidan för WordPress-plugin.

WordPress-responsivt instrumentpanelmeny-plugin

Du måste först ange den storlek som mobilmenyn ska visas från. Standard är 800 pixlar, vilket borde fungera för de flesta webbplatser.

Efter det måste du välja den meny du vill använda på mobilen.

Det sista alternativet på skärmen låter dig tillhandahålla en CSS-klass för din meny. Detta gör det möjligt för pluginet att dölja din icke-responsiva meny på små skärmar.

Glöm inte att klicka på « uppdaterings~~POS=TRUNC För att spara dina inställningar.

Vi föreslår också att du upptäcker vårt 10 WordPress-plugins för att skapa menyer på din blogg

Du kan nu besöka din webbplats och ändra storlek på webbläsarens skärm för att se den responsiva menyn i handling.

Site-in-action-menu-lyhörd till mobil

Plugin « Responsive Meny »Erbjuder många andra alternativ som låter dig ändra beteendet och utseendet på din responsiva meny. Du kan utforska dessa alternativ på insticksidan för insticksprogrammet och justera det efter behov.

2-metod: Hur man lägger till en mobilmeny manuellt

En av de vanligaste metoderna som används för att visa en meny på mobila skärmar är att använda hävstång.

Den här metoden kräver att du lägger till anpassad kod i dina WordPress-filer.

I en av våra tidigare handledning visar vi dig hur man skapar ett WordPress-plugin.

Först måste du öppna en textredigerare som Anteckningar och klistra in den här koden.

(funktion () {nav var = document.getElementById ('site-navigation'), knapp, meny; if (! nav) {return;} knapp = nav.getElementsByTagName ('knapp') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! -knapp) {return;} // Dölj knapp om menyn saknas eller tom om (! meny ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('tillkopplad')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Nu måste du spara den här filen med namnet " navigation.js På ditt skrivbord.

Sedan måste du öppna en FTP-klient för att ladda ner den här filen till "/ wp-content / teman / ditt-tema / js /" på din WordPress-webbplats.

Ersätt uttrycket " your-tema Med namnet på din nuvarande WordPress-temamapp. Om din temakatalog inte har en js-mapp måste du skapa en.

Efter att ha laddat upp JavaScript-filen är nästa steg att se till att din WordPress-webbplats laddar JavaScript-filerna. Du måste lägga till följande kod i " functions.php Av ditt WordPress-tema.

Upptäck något annat Vad kan du göra med filen features.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', sant.);

Nu måste vi lägga till navigationsmenyn i vårt WordPress-tema. Vanligtvis läggs navigationsmenyn till filen " header.php Av ditt WordPress-tema.

Meny 'primär', 'menu_klass' => 'nav-meny')); ?>

Vi antar att menyplatsen som definieras av ditt WordPress-tema kallas " primär ". Annars använder du platsen som definieras av ditt WordPress-tema.

Upptäck också vår 5 WordPress-plugins för att skapa prenumerationsformulär

Det sista steget är att lägga till lite CSS så att vår meny använder rätt CSS-klasser för att växla när den visas på mobila enheter.

/ * Navigationsmeny * / .main-navigation {margin-top: 24px; margin-top: 1.714285714rem; textjustera: centrum; } .main-navigation li {margin-top: 24px; margin-top: 1.714285714rem; teckenstorlek: 12 pixlar; font-storlek: 0.857142857rem; linjehöjd: 1.42857143; }. huvudnavigering a {färg: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS att använda på mobila enheter @media-skärmen och (min-bredd: 600 pixlar) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # ededed; border-top: 1px solid #ededed; display: inline-block! viktigt; textjustera: vänster; bredd: 100%; }. huvudnavigering ul {margin: 0; textindrag: 0; } .main-navigation li a, .main-navigation li {display: inline-block; text-dekoration: ingen; } .main-navigation li a {border-bottom: 0; färg: # 6a6a6a; linjehöjd: 3.692307692; text-transform: versaler; white-space: nowrap; }. huvudnavigering li a: sväva,. huvudnavigering li a: fokus {färg: # 000; } .main-navigation li {margin: 0 40px 0 0; marginal: 0 2.857142857rem 0 0; position: relativ; } .main-navigation li ul {margin: 0; stoppning: 0; position: absolut; topp 100%; z-index: 1; höjd: 1px; bredd: 1px; överflöd: dold; klipp: rekt (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 0; vänster: 100%; } .main-navigering ul li: sväva> ul, .main-navigering ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; klipp: ärva; överflöd: ärva; höjd: ärva; bredd: ärva; } .main-navigation li ul li a {background: #efefef; border-bottom: 1px solid #ededed; display: blockera; teckenstorlek: 11 pixlar; font-size: 0.785714286rem; linjehöjd: 2.181818182; stoppning: 8px 10px; stoppning: 0.571428571rem 0.714285714rem; bredd: 180 pixlar; bredd: 12.85714286rem; white-space: normal; } .main-navigation li ul li a: sväva, .main-navigation li ul li a: fokus {bakgrund: # e3e3e3; färg: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; font-vikt: fet; } .meny-växla {display: none; }}

Du kan nu besöka din webbplats och ändra storlek på webbläsarens skärm för att se om din responsiva meny växlar.

Rocking-menu-wordpress-tutorial

Upptäck också några premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. UberMenu

UberMenu är ett WordPress-tillägg som är dedikerat till att skapa ett mycket anpassningsbart, lyhörd och tillgängligt för användarnas megamenu. Den är funktionell efter installationen utan behov av speciell konfiguration.

Ubermenu wordpress mega meny plugin

Det är ett lättanvänt plugin, men ändå kraftfullt nog för att skapa mycket anpassningsbara och kreativa mega-menylayouter.

Se även vår 9 WordPress-plugins för att skapa prisnät på en blogg

Du hittar bland annat: 3 menymallar, fullt responsiv layout, kompatibilitet med mobila enheter (iPhone, iPad, Android), pekstöd, etc ...

Ladda ner | demo | webbhotell

2. LMM

Liquida Mega Menu kallas också LMM är ett WordPress-plugin utformat för användare och utvecklare. Den har ett enkelt och intuitivt gränssnitt, integrerat med WP-instrumentpanelen, så att du kan skapa och anpassa ett obegränsat antal megamenyer, utan några programmeringskunskaper.

Lmm wordpress-responsiv mega-meny baserad på bootstrap

Den levereras med dussintals funktioner, antingen för vanliga eller avancerade användare. Som funktioner erbjuder den bland annat: automatisk och manuell integration, stöd för multisite, ta hand om barnens teman, helt anpassningsbar stil för menyer, anpassningsbara menyplatser, klibbig meny etc.

Ladda ner | demo | webbhotell

3. 8Degree Fly Meny

8Degree Fly Menu är ett premium WordPress-plugin som låter dig lägga till en canvas-meny på din webbplats för att ge den en titt som lyfter fram och enkelt din information. Den använder standard WordPress-menyfunktionen för att skapa sina menyer.

8degree fly meny svarar på menyn plugin för wordpress

Du kommer att kunna lägga till ytterligare element i standardmenyalternativen, till exempel ikoner, menyslagor, en pseudogrupprubrik och en lång beskrivning.

Läs också: 10 WordPress-plugins för att optimera sidofält och klibbiga rubriker

Det kommer också med en WYSIWYG-redigerare som hjälper dig att ta tag i din långa beskrivning på ett användarvänligt sätt. Med denna redigerare kan du också använda kortkoder.

Ladda ner | demo | webbhotell

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

Slutsats

Det är det! Det är det för den här tutorialen, jag hoppas att det kommer att låta dig skapa en meny för mobilanvändare. Känn dig fri att dela tipset med dina vänner på dina sociala nätverk.

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Men under tiden berätta om din commentaires och förslag i det dedikerade avsnittet.

.

6 aktier
del4
tweet
Enregistrer2