Slik lager du en mobil-klar responsiv WordPress-meny

Ønsker du å lage en mobil-klar responsiv WordPress-meny? Mobilbrukere har allerede overgått stasjonære brukere på mange nettsteder. Ved å legge til en mobil responsiv meny gjør det lettere for brukere å navigere på nettstedet ditt. I denne artikkelen vil vi vise deg hvordan du enkelt kan lage en mobilklar responsiv WordPress-meny.


Lag mobilsvarende WordPress-meny

Dette er en grundig opplæring. Vi vil vise både plugin-metoden for nybegynnere (ingen koding) og kodingsmetoden for våre mer avanserte brukere.

Mot slutten av denne opplæringen lærer du hvordan du oppretter en mobilmeny, en rullegardinmeny, og en mobilmeny som skiftes..

Klar? La oss komme i gang.

Videoopplæring

Abonner på WPBeginner

Hvis du ikke liker videoen eller trenger flere instruksjoner, kan du fortsette å lese.

Metode 1: Legg til en responsiv meny i WordPress ved hjelp av en plugin

Denne metoden er enklere og anbefales for nybegynnere, da den ikke krever tilpasset koding.

I denne metoden skal vi lage en hamburgermeny som glir ut på mobilskjermen.

Responsiv menyplugin-demo

Det første du trenger å gjøre er å installere og aktivere Responsive Menu-plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

Ved aktivering vil plugin-en legge til et nytt menyelement merket ‘Responsive Menu’ til WordPress-administratorfeltet. Hvis du klikker på den, kommer du til innstillingssiden for plugin.

Responsive menyinnstillinger

Først må du angi bredden på skjermen på hvilket tidspunkt pluginen begynner å vise responsiv meny. Standardverdien er 800px som skal fungere for de fleste nettsteder.

Etter det må du velge menyen du vil bruke til den responsive menyen. Hvis du ikke har opprettet en meny ennå, kan du opprette en ved å gå til Utseende »Menyer. Se vår guide for hvordan du legger til navigasjonsmeny i WordPress for detaljerte instruksjoner.

Siste alternativ på skjermen er å tilby en CSS-klasse for den nåværende ikke-responsive menyen. Dette vil tillate plugin-skjulet å skjule menyen som ikke reagerer på mindre skjermer.

Ikke glem å klikke på “Oppdater alternativer” -knappen for å lagre innstillingene dine.

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

Responsiv menyplugin-demo

Det responsive menypluginet kommer med mange andre alternativer som lar deg endre oppførsel og utseende på den responsive menyen. Du kan utforske disse alternativene på innstillingssiden for plugin og justere dem etter behov.

Metode 2: Legg til en rullegardinmeny Velg meny ved hjelp av en plugin

En annen måte å legge til en responsiv meny er ved å legge til en rullegardinmeny. Denne metoden krever ingen kodingsferdigheter, så den anbefales for nybegynnere.

Responsiv velg meny

Det første du trenger å gjøre er å installere og aktivere Responsive Select Menu-plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

Ved aktivering må du besøke Utseende »Responsive Select for å konfigurere plugin-innstillinger.

Velg menyinnstillinger

Du må bla ned til delen “Aktiver temaplasseringer”. Som standard aktiveres plugin-modulen på alle temaplasseringer. Du kan endre det ved selektiv å slå på den for bestemte temaposisjoner.

Ikke glem å klikke på Lagre alle innstillinger-knappen for å lagre endringene dine.

Du kan nå besøke nettstedet ditt og endre størrelsen på nettleserskjermen for å se responsiv valgmeny i aksjon.

Metode 3: Opprette mobilvennlig responsiv meny med veksleeffekt

En av de mest brukte metodene for å vise en meny på mobilskjermer er ved å bruke veksleeffekten.

Denne metoden krever at du legger til tilpasset kode til WordPress-filene dine. Hvis du ikke har gjort dette før, kan du ta en titt på guiden vår for å lime inn kodebiter fra nettet i WordPress.

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

(funksjon () {
var nav = document.getElementById (‘site-navigation’), knapp, meny;
hvis (! nav) {
komme tilbake;
}

knapp = nav.getElementsByTagName (‘knapp’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
hvis (! -knappen) {
komme tilbake;
}

// Skjul knappen hvis menyen mangler eller er tom.
if (! meny ||! menu.childNodes.length) {
button.style.display = ‘ingen’;
komme tilbake;
}

button.onclick = funksjon () {
if (-1 === menu.className.indexOf (‘nav-meny’)) {
menu.className = ‘nav-menu’;
}

if (-1! == button.className.indexOf (‘koblet til’)) {
button.className = button.className.replace (’tilkoblet’, ”);
menu.className = menu.className.replace (’tilkoblet’, ”);
} annet {
button.className + = ’tilkoblet’;
menu.className + = ’tilkoblet’;
}
};
}) (jQuery);

Nå må du lagre denne filen som navigation.js på skrivebordet.

Deretter må du åpne en FTP-klient for å laste opp denne filen til / wp-content / temas / din-tema-dir / js / mappe på ditt WordPress-nettsted.

Bytt ut din temakatalog med katalogen til det nåværende tematikken. Hvis temakatalogen din ikke har en js-mappe, må du opprette den.

Etter å ha lastet opp JavaScript-filen, er neste trinn å forsikre deg om at WordPress-nettstedet ditt laster inn denne JavaScript. Du må legge til følgende kode i temaets features.php-fil.

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, array (‘jquery’), ‘20160909’, sant);

Nå må vi legge til navigasjonsmenyen i WordPress-temaet vårt. Vanligvis legges navigasjonsmenyen til i et temas header.php-fil.

Meny
<?php wp_nav_menu (array (‘theme_location’ => ‘primær’, ‘menu_class’ => ‘nav-meny’)); ?>

Vi antar at temaposisjonen som er definert av temaet, kalles primær. Hvis det ikke er det, kan du bruke temaplasseringen definert av WordPress-temaet.

Det siste trinnet er å legge til CSS slik at menyen vår bruker de riktige CSS-klasser for å veksle til å fungere når de vises på mobile enheter.

/ * Navigasjonsmeny * /
.hovednavigering {
margin-top: 24px;
margin-top: 1.714285714rem;
tekstjustering: sentrum;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
skriftstørrelse: 12px;
skriftstørrelse: 0.857142857rem;
linjehøyde: 1,42857143;
}
.hovednavigering a {
farge: # 5e5e5e;
}
.main-navigation a: hover,
.main-navigation a: focus {
farge: # 21759b;
}
.hovednavigering ul.nav-meny,
.hovednavigasjon div.nav-meny > ul {
skjerm: ingen;
}

.main-navigation ul.nav-menu.toggled-on,
.meny-veksle {
skjerm: inline-block;
}

// CSS å bruke på mobile enheter

@media-skjerm og (min. bredde: 600 piksler) {

.hovednavigering ul.nav-meny,
.hovednavigasjon div.nav-meny > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
skjerm: inline-block! viktig;
tekstjustering: venstre;
bredde: 100%;
}
.main-navigation ul {
margin: 0;
tekstinnrykk: 0;
}
.main-navigation li a,
.main-navigation li {
skjerm: inline-block;
tekstdekorasjon: ingen;
}
.main-navigation li a {
border-bottom: 0;
farge: # 6a6a6a;
linjehøyde: 3.692307692;
tekst-transform: store bokstaver;
white-space: nowrap;
}
.main-navigation li a: hover,
.main-navigation li a: fokus {
farge: # 000;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
stilling: relativ;
}
.main-navigation li ul {
margin: 0;
polstring: 0;
stilling: absolutt;
topp: 100%;
z-indeks: 1;
høyde: 1px;
bredde: 1px;
overløp: skjult;
klipp: rect (1px, 1px, 1px, 1px);
}
.main-navigation li ul ul {
topp: 0;
venstre: 100%;
}
.main-navigation ul li: hover > ul,
.main-navigation ul li: fokus > ul,
.hovednavigering .fokus > ul {
grense-venstre: 0;
klipp: arve;
overløp: arve;
høyde: arve;
bredde: arve;
}
.main-navigation li ul li a {
bakgrunn: #efefef;
border-bottom: 1px solid #ededed;
skjerm: blokkering;
skriftstørrelse: 11px;
skriftstørrelse: 0,785714286rem;
linjehøyde: 2.181818182;
polstring: 8px 10px;
polstring: 0.571428571rem 0.714285714rem;
bredde: 180px;
bredde: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a: hover,
.main-navigation li ul li a: fokus {
bakgrunn: # e3e3e3;
farge: # 444;
}
.hovednavigering .strømmenyelement > en,
.main-navigation .current-menu-stamfar > en,
.main-navigation .current_page_item > en,
.main-navigation .current_page_ancestor > en {
farge: # 636363;
font-vekt: fet;
}
.meny-veksle {
skjerm: ingen;
}

}

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

Bytt forhåndsvisning av menyen

Feilsøking: Avhengig av WordPress-temaet ditt, kan det hende du trenger å justere CSS. Bruk inspiser elementverktøyet for å finne ut av CSS-konfliktene med temaet ditt.

Metode 4: Legg til en Slide-In Mobile Menu i WordPress

En annen vanlig teknikk for å legge til en mobilmeny er ved å bruke en skyv-i-panelmeny (som vist i metode 1).

Metode 4 krever at du legger til kode i WordPress-temafilene dine, og det er bare en annen måte å oppnå de samme resultatene som metode 1.

Først må du åpne en ren tekstredigerer som Notisblokk og legge til følgende kode i en tom tekstfil.

(funksjon ($) {
$ ( ‘# Toggle’). Toggle (
funksjon () {
$ (‘# popout’). animere ({venstre: 0}, ‘sakte’, funksjon () {
$ ( ‘# Toggle’). Html (‘Lukk‘);
});
},
funksjon () {
$ (‘# popout’). animere ({venstre: -250}, ‘sakte’, funksjon () {
$ ( ‘# Toggle’). Html (‘Lukk‘);
});
}
);
}) (JQuery);

Ikke glem å erstatte example.com med ditt eget domenenavn og ditt tema med din faktiske temakatalog. Lagre denne filen som slidepanel.js på skrivebordet ditt.

Nå trenger du et bilde som vil bli brukt som menyikon. Et hamburgerikon brukes ofte som menyikonet. Du vil finne mange slike bilder fra forskjellige nettsteder. Vi bruker menyikonet fra Google Material Icons-biblioteket.

Når du har funnet et bilde du vil bruke, lagrer du det som menu.png.

Deretter må du åpne en FTP-klientklient og laste opp slidepanel.js-fil til / wp-content / your-theme / js / folder.

Hvis temakatalogen din ikke har JS-mappen, må du opprette tit og deretter laste opp filen.

Etter det må du laste opp menu.png-filen til / wp-content / temas / ditt-tema / bilder / mappe.

Når filene er lastet opp, må vi sørge for at temaet laster inn JavaScript-filen du nettopp la til. Dette vil vi oppnå ved å anføre JavaScript-filen.

Legg til denne koden i temaets features.php-fil.

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, array (‘jquery’), ‘20160909’, sant);

Nå må vi legge til den faktiske koden i temaets header.php-fil for å vise navigasjonsmenyen. Du bør se etter kode som ligner på dette:

<?php wp_nav_menu (array (‘theme_location’ => ‘primær’, ‘menu_class’ => ‘nav-meny’)); ?>

Du vil pakke inn eksisterende navigasjonsmeny med HTML-koden for å vise lysbildepanelmenyen på mindre skjermer.

Forestilling

<?php wp_nav_menu (array (‘theme_location’ => ‘primær’, ‘menu_class’ => ‘nav-meny’)); ?>

Legg merke til at navigasjonsmenyen til temaet ditt fortsatt er der. Vi har nettopp pakket det rundt HTML som vi trenger for å utløse slidepanel-menyen.

Siste trinn er å legge til CSS for å skjule menybildeikonet på større skjermer. Du må også justere plasseringen av menyikonet.

Her er et eksempel på CSS som du kan bruke som utgangspunkt:

@media-skjerm og (min. bredde: 769px) {
#veksle {
display: none;
}

}

@media-skjerm og (maks. bredde: 768px) {
#sprette ut {
stilling: fast;
høyde: 100%;
bredde: 250px;
bakgrunn: rgb (25, 25, 25);
bakgrunn: rgba (25, 25, 25, .9);
farge: hvit;
topp: 0px;
venstre: -250px;
flow: auto;
}

#veksle {
flyte: høyre;
stilling: fast;
topp: 60px;
til høyre: 45px;
bredde: 28px;
høyde: 24px;

}

.nav-menu li {
border-bottom: 1px solid #eee;
padding: 20 piksler;
bredde: 100%;
}

.nav-menu li: hover {
bakgrunn: #CCC;
}

.nav-menu li a {
farge: #fff;
text-decoration: none;
bredde: 100%;
}
}

Avhengig av WordPress-temaet ditt, kan det hende du må justere CSS for å unngå konflikter.

Slik så det ut på demo-nettstedet:

Responsiv lysbildemeny i WordPress

Vi håper denne artikkelen hjalp deg å lære hvordan du lager en mobilklar responsiv WordPress-meny. Det kan også være lurt å se guiden vår for hvordan du legger til en responsiv meny i fullskjerm i WordPress

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map