Vill du skapa en responsiv meny 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 många insticksprogram installeras på WordPress. et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

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

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.

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.

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.

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 mapp Wordpress tema nuvarande. 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 din 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 navigeringsmenyn i vår Wordpress tema. Vanligtvis läggs navigeringsmenyn till i " header.php Av ditt WordPress-tema.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

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

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.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #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 to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #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-weight: bold;
    }
    .menu-toggle {
        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.

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

Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.

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

1. UberMenu

UberMenu är en Wordpress plugin dedikerad till att skapa en mycket anpassningsbar, lyhörd och användartillgänglig megameny. Den är funktionell efter installationen, utan behov av någon speciell konfiguration.

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 även kallad LMM är en Wordpress plugin designad för användare och utvecklare. Den har ett enkelt och intuitivt gränssnitt, integrerat i WP-instrumentpanelen, så att du kan skapa och anpassa en obegränsad mängd megamenyer utan några programmeringskunskaper.

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.

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.

• Hur byta namn på bilder på en Wordpress-blogg
• Hur man skapar en flytande meny på Wordpress
• 8 WordPress-plugins för att skapa en megamenu på din blogg
• Några tips för att skapa moderna menyer för din blogg
• 6 WordPress plugins för att hantera kategorier och underkategorier på din blogg

Slutsats

Så ! Det var allt för den här handledningen, jag hoppas att den låter 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.

.