Vil du lage en responsiv meny på WordPress-bloggen din?

Mobilbrukere er flere enn stasjonære PC-brukere i disse dager. Å legge til en responsiv mobilmeny gjør det lettere for brukere å navigere på nettstedet ditt.

I denne opplæringen vil vi vise deg hvordan du enkelt kan lage en responsiv meny på WordPress.

Men før, hvis du aldri har installert WordPress Discover Hvor mange plugins skal installeres på WordPress. et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

Hvordan lage responsiv mobil wordpress-meny

Her vil det være et spørsmål om å gå i dybden ved å vise deg både metoden med et plugin for nybegynnere og kodingsmetoden for avanserte brukere.

Første metode: Lag en mobilmeny med en WordPress-plugin

Denne metoden er enklere og anbefales for nybegynnere fordi den ikke krever noen spesiell kodingsferdighet.

I denne metoden vil vi lage en meny (med et hamburgerikon) som glir på mobilskjermen.

lage en responsiv meny


Det første du trenger å gjøre er å installere og aktivere WordPress Responsive Menu plugin . For flere detaljer, sjekk ut vår guide om hvordan du installerer et WordPress-plugin .

Etter å ha aktivert plugin, vil plugin legge til et nytt element på menyen, med tittelen " responsive Meny ". Hvis du klikker på den, kommer du til innstillingssiden til WordPress Plugin.

WordPress responsive dashboard meny plugin

Du må først oppgi størrelsen mobilmenyen skal vises fra. Standard er 800 px, som skal fungere for de fleste nettsteder.

Etter det må du velge menyen du vil bruke på mobil.

Det siste alternativet på skjermen lar deg tilby en CSS-klasse for menyen. Dette gjør at pluginet kan skjule den ikke-responsive menyen din på små skjermer.

Ikke glem å klikke på « Oppdater alternativer For å lagre innstillingene.

Vi anbefaler deg også å oppdage vårt 10 WordPress-plugins for å lage menyer på bloggen din

Du kan nå besøke nettstedet ditt og endre størrelse på nettleserskjermen for å se den responsive menyen i aksjon.

Site-in-action-menu-responsive til mobil

Plugin « responsive Meny »Tilbyr mange andre alternativer som lar deg endre oppførselen og utseendet til den responsive menyen. Du kan utforske disse alternativene på plugins innstillingsside og justere det etter behov.

2-metode: Slik legger du til en mobilmeny manuelt

En av de vanligste metodene som brukes til å vise en meny på mobile skjermer, er å bruke gearing.

Denne metoden krever at du legger til tilpasset kode til WordPress-filene dine.

I en av våre tidligere tutorials viser vi deg hvordan lage en WordPress-plugin.

Først må du åpne en tekstredigerer som Notisblokk og lime inn denne koden.

(funksjon () {nav var = document.getElementById ('site-navigation'), knapp, meny; if (! nav) {return;} knapp = nav.getElementsByTagName ('knapp') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! -knappen) {return;} // Skjul knappen hvis menyen mangler eller er tom hvis (! 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 ('tilkoblet')) {button.className = button.className.replace ('tilkoblet', ''); menu.className = menu.className.replace ('koblet til' -on ',' ');} else {button.className + =' tilkoblet '; menu.className + =' tilkoblet ';}};}) (jQuery);

Nå må du lagre denne filen med navnet " navigation.js På skrivebordet ditt.

Deretter må du åpne en FTP-klient for å laste ned denne filen til "/ wp-content / temas / ditt-tema / js /" -stedet på WordPress-nettstedet.

Erstatt uttrykket " your-tema » med navnet på mappen din WordPress tema strøm. Hvis temakatalogen din ikke har en js-mappe, må du opprette en.

Etter at du har lastet opp JavaScript-filen, er neste trinn å sørge for at WordPress-nettstedet ditt laster inn JavaScript-filene. Du må legge til følgende kode i " functions.php »Av dine WordPress tema.

Oppdag noe annet Hva kan du gjøre med filen features.php?

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

Nå må vi legge til navigasjonsmenyen i vår WordPress tema. Vanligvis legges navigasjonsmenyen til 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 at menyplasseringen definert av WordPress-temaet ditt kalles " primære ". Ellers bruker du plasseringen som er definert av WordPress-temaet ditt.

Det siste trinnet er å legge til CSS slik at menyen vår bruker de riktige CSS-klassene for å bytte når den vises på mobile 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 nå besøke nettstedet ditt og endre størrelsen på nettleserskjermen for å se om den responsive menyen din bytter.

Rocking-menu-wordpress-opplæringen

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. UberMenu

UberMenu er en WordPress Plugin dedikert til å lage en svært tilpassbar, responsiv og brukertilgjengelig megameny. Den er funksjonell etter installasjonen, uten behov for noen spesiell konfigurasjon.

Ubermenu wordpress mega meny -plugin

Det er et brukervennlig plugin, men likevel kraftig nok til å lage svært tilpassbare og kreative mega-menyoppsett.

Se også vår 9 WordPress-plugins for å lage prisnett på en blogg

Du finner blant annet: 3 menymaler, fullt responsivt oppsett, kompatibilitet med mobile enheter (iPhone, iPad, Android), berøringsstøtte, etc ...

Last ned | dEMO | Webhotell

2. LMM

Liquida Mega Menu også kalt LMM er en WordPress Plugin designet for brukere og utviklere. Den har et enkelt og intuitivt grensesnitt, integrert i WP-dashbordet, slik at du kan lage og tilpasse et ubegrenset antall megamenyer, uten noen programmeringskunnskaper.

Lmm wordpress responsiv mega-meny basert på bootstrap

Den kommer med dusinvis av funksjoner, enten for vanlige eller avanserte brukere. Som funksjonalitet tilbyr den blant annet: automatisk og manuell integrering, støtte for multisite, å ta vare på barns temaer, helt tilpassbar stil for menyer, tilpassbare menyplasseringer, klebrig meny, etc ...

Last ned | dEMO | Webhotell

3. 8Degree Fly-meny

8Degree Fly Menu er et premium WordPress-plugin som lar deg legge til en lerretmeny på nettstedet ditt, for å gi det et blikk som fremhever og enkelt din informasjon. Den bruker standard WordPress-menyfunksjon for å lage menyer.

8degree fly meny responsiv av meny plugin for wordpress

Du vil kunne legge til flere elementer i standardmenyelementene, for eksempel ikoner, menyslagord, en pseudogrupperingshode og en lang beskrivelse.

Les også: 10 WordPress-plugins for å optimalisere sidefelt og klebrig overskrifter

Den kommer også med en WYSIWYG-redigerer som hjelper deg å forstå den lange beskrivelsen på en brukervennlig måte. Med denne redigereren kan du også bruke kortkoder.

Last ned | dEMO | Webhotell

Andre anbefalte ressurser

Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.

konklusjonen

Så! Det var alt for denne opplæringen, jeg håper den lar deg lage en meny for mobilbrukere. Føl deg fri til å del tipset med vennene dine på dine sosiale nettverk.

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Men i mellomtiden, fortell oss om din commentaires og forslag i den dedikerte delen.

...