Vil du oprette en responsiv menu på din WordPress blog?

Mobilbrugere overstiger desktop-pc-brugere i disse dage. Tilføjelse af en lydhør mobilmenu gør det lettere for brugerne at navigere på dit websted.

I denne tutorial vil vi vise dig, hvordan du nemt kan oprette en lydhør menu på WordPress.

Men før, hvis du aldrig har installeret WordPress-opdagelse Hvor mange plugins skal installeres på WordPress. et Hvordan at finde, installere og aktivere et WordPress tema på din blog 

Så tilbage til, hvorfor vi er her.

Her handler det om at gå i dybden ved at vise dig både metoden med et plugin til begyndere og kodningsmetoden til avancerede brugere.

Første metode: Opret en mobilmenu med et WordPress-plugin

Denne metode er lettere og anbefales til begyndere, fordi den ikke kræver nogen specielle kodningsfærdigheder.

I denne metode opretter vi en menu (med et hamburgerikon), der glider på mobilskærmen.

Den første ting du skal gøre er at installere og aktivere WordPress Responsive Menu-plugin . For flere detaljer, tjek vores guide til, hvordan du installerer et WordPress-plugin .

Efter aktivering af plugin tilføjer plugin et nyt element i menuen med titlen " Responsive Menu ". Hvis du klikker på den, kommer du til indstillingssiden for WordPress plugin.

Du skal først indtaste den størrelse, hvorfra mobilmenuen skal vises. Standard er 800 pixel, som skal fungere for de fleste websteder.

Derefter skal du vælge den menu, du vil bruge på mobilen.

Den sidste mulighed på skærmen giver dig mulighed for at give en CSS-klasse til din menu. Dette giver pluginet mulighed for at skjule din ikke-responsive menu på små skærme.

Glem ikke at klikke på « Opdateringsindstillinger For at gemme dine indstillinger.

Vi anbefaler dig også at opdage vores 10 WordPress-plugins til at oprette menuer på din blog

Du kan nu besøge dit websted og ændre størrelsen på din browserskærm for at se den responsive menu i aktion.

Plugin « Responsive Menu »Tilbyder mange andre muligheder, der giver dig mulighed for at ændre adfærd og udseende på din responsive menu. Du kan udforske disse muligheder på plugins indstillingsside og justere det efter behov.

2-metode: Sådan tilføjes manuelt en mobilmenu

En af de mest almindelige metoder, der bruges til at vise en menu på mobile skærme, er at bruge gearing.

Denne metode kræver, at du tilføjer tilpasset kode til dine WordPress-filer.

I en af ​​vores tidligere tutorials viser vi dig hvordan man opretter et WordPress-plugin.

Først skal du åbne en teksteditor som Notesblok og indsætte denne kode.

(funktion () {nav var = document.getElementById ('site-navigation'), knap, menu; if (! nav) {return;} knap = nav.getElementsByTagName ('knap') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! -knap) {return;} // Skjul knap, hvis menuen mangler eller er tom, hvis (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = funktion () {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 ('skiftet' -on ',' ');} else {button.className + =' slået til '; menu.className + =' tilsluttet ';}};}) (jQuery);

Nu skal du gemme denne fil med navnet " navigation.js På dit skrivebord.

Derefter skal du åbne en FTP-klient for at downloade denne fil til "/ wp-content / temas / dit-tema / js /" på dit WordPress-websted.

Erstat udtrykket " din-tema » med navnet på din mappe WordPress tema nuværende. Hvis din temamappe ikke har en js-mappe, skal du oprette en.

Efter upload af JavaScript-filen er det næste trin at sikre, at dit WordPress-websted indlæser JavaScript-filerne. Du bliver nødt til at tilføje følgende kode til " functions.php »Af din WordPress tema.

Opdag noget andet Hvad kan du gøre med filen features.php?

 Wp_enqueue_script ('bpc_togglemenu', get_template_directory_uri (). '/js/navigation.js', array ('jquery'), '20160909', true);

Nu skal vi tilføje navigationsmenuen i vores WordPress tema. Normalt tilføjes navigationsmenuen i " header.php Af dit 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 antager, at menuplaceringen defineret af dit WordPress-tema kaldes " primære ". Ellers skal du bruge den placering, der er defineret af dit WordPress-tema.

Det sidste trin er at tilføje nogle CSS, så vores menu bruger de rigtige CSS-klasser til at skifte, når de vises på mobile enheder.

/* 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øge dit websted og ændre størrelsen på din browserskærm for at se, om din responsive menu skifter.

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. UberMenu

UberMenu er en WordPress plugin dedikeret til at skabe en meget tilpasselig, lydhør og brugertilgængelig megamenu. Den er funktionel efter installationen uden behov for nogen særlig konfiguration.

Det er et brugervenligt plugin, men alligevel kraftigt nok til at skabe meget tilpasselige og kreative mega-menulayouter.

Se også vores 9 WordPress-plugins til at oprette prisnet på en blog

Du finder blandt andet: 3 menuskabeloner, fuldt responsivt layout, kompatibilitet med mobile enheder (iPhone, iPad, Android), touch-support osv ...

Downloade | demo | Web-hosting

2. LMM

Liquida Mega Menu også kaldet LMM er en WordPress plugin designet til brugere og udviklere. Den har en enkel og intuitiv grænseflade, integreret i WP-dashboardet, så du kan oprette og tilpasse en ubegrænset mængde megamenuer uden nogen programmeringsevner.

Den leveres med snesevis af funktioner, hvad enten det er for almindelige eller avancerede brugere. Som funktionalitet tilbyder den blandt andet: automatisk og manuel integration, støtte til multisite, tager sig af børns temaer, helt tilpasselig stil til menuer, tilpasselige menuplaceringer, klæbrig menu osv.…

Downloade | demo | Web-hosting

3. 8Degree Fly Menu

8Degree Fly Menu er et premium WordPress-plugin, der giver dig mulighed for at tilføje en lærredsmenu på dit websted for at give det et look, der fremhæver og nemt dine oplysninger. Det bruger standard WordPress-menufunktionen til at oprette sine menuer.

Du vil være i stand til at tilføje yderligere elementer til standardmenupunkterne, såsom ikoner, menusloganer, en pseudogrupperingshoved og en lang beskrivelse.

Læs også: 10 WordPress-plugins til at optimere sidebjælker og klæbrige overskrifter

Den leveres også med en WYSIWYG-editor til at hjælpe dig med at forstå din lange beskrivelse på en brugervenlig måde. Med denne editor kan du også bruge kortkoder.

Downloade | demo | Web-hosting

Andre anbefalede ressourcer

Vi inviterer dig også til at konsultere nedenstående ressourcer for at komme videre i grebet og kontrollen af ​​dit websted og blog.

• Sådan omdøber billeder på en WordPress blog
• Sådan oprettes en flydende menu på WordPress
• 8 WordPress-plugins til at oprette en megamenu på din blog
• Nogle tips til at oprette moderne menuer til din blog
• 6 WordPress plugins til at styre kategorier og underkategorier på din blog

Konklusion

Så! Det var det for denne tutorial, jeg håber, at den vil give dig mulighed for at oprette en menu til mobile brugere. du er velkommen til del tipet med dine venner på dine sociale netværk.

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Men i mellemtiden, fortæl os om din kommentarer og forslag i det dedikerede afsnit.

...