Slik utformer du WordPress-navigasjonsmenyer

Vil du style WordPress-navigasjonsmenyene dine for å endre farger eller utseende? Mens WordPress-temaet håndterer utseendet til navigasjonsmenyene dine, kan du enkelt tilpasse det ved å bruke CSS for å oppfylle dine krav. I denne artikkelen vil vi vise deg hvordan du styler navigasjonsmenyene til WordPress på nettstedet ditt.


Styling av navigasjonsmenyer i WordPress

Vi viser to forskjellige metoder. Den første metoden er for nybegynnere fordi den bruker en plugin og ikke krever kodekunnskap. Den andre metoden er for mellomliggende DIY-brukere som foretrekker å bruke CSS-kode i stedet for en plugin.

Metode 1: Styling av WordPress-navigasjonsmenyer ved hjelp av en plugin

WordPress-temaet ditt bruker CSS for å style navigasjonsmenyer. Mange nybegynnere er ikke komfortable med å redigere temafiler eller skrive CSS-kode på egen hånd.

Det er når en WordPress-styling-plugin kommer godt med. Det sparer deg fra å redigere temafiler eller skrive hvilken som helst kode.

Først må du gjøre er å installere og aktivere CSS Hero-plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

CSS Hero er et premium WordPress-plugin som lar deg designe ditt eget WordPress-tema uten å skrive en eneste kodelinje (Ingen HTML eller CSS kreves). Se vår CSS Hero-anmeldelse for å lære mer.

WPBeginner-brukere kan bruke denne CSS Hero-kupongen for å få 34% rabatt på kjøpet.

Etter aktivering vil du bli omdirigert for å få CSS Hero License-nøkkelen. Bare følg instruksjonene på skjermen, så blir du omdirigert tilbake til nettstedet ditt med noen få klikk.

Deretter må du klikke på CSS Hero-knappen i WordPress-adminverktøylinjen.

Start CSS Hero

CSS Hero tilbyr en WYSIWYG (hva du ser er hva du får) redigerer. Ved å klikke på knappen tar du deg til nettstedet ditt med en flytende CSS Hero-verktøylinje som er synlig på skjermen.

CSS Hero Toolbar

Du må klikke på det blå ikonet øverst for å begynne å redigere.

Når du har klikket på det blå ikonet, tar du musen til navigasjonsmenyen, og CSS Hero vil markere den ved å vise kantene rundt den. Når du klikker på den uthevede navigasjonsmenyen, viser den elementene du kan redigere.

Pek og klikk for å tilpasse menyen

I skjermdumpen over viser det oss toppen navigasjonsmenybeholder. La oss anta at vi ønsker å endre bakgrunnsfargen på navigasjonsmenyen vår. I så fall velger vi toppnavigering som påvirker hele menyen.

CSS Hero vil nå vise deg forskjellige egenskaper som du kan redigere som tekst, bakgrunn, kant, marginer, polstring osv.

CSS egenskaper

Du kan klikke på hvilken som helst eiendom du vil endre. CSS Hero vil vise deg et enkelt grensesnitt der du kan gjøre endringene dine.

Endre utseendet til et element

I skjermdumpen over valgte vi bakgrunn, og det viste oss et fint grensesnitt for å velge bakgrunnsfarge, gradient, bilde og mer.

Når du gjør endringer, vil du kunne se dem live i temavisningen.

Live-forhåndsvisning av CSS-endringene

Når du er fornøyd med endringene, klikker du på lagre-knappen i CSS Hero-verktøylinjen for å lagre endringene.

Det beste med å bruke denne metoden er at du enkelt kan angre endringer du gjør. CSS Hero holder en fullstendig historie med alle endringene dine, og du kan gå frem og tilbake mellom disse endringene.

Metode 2: Manuelt stil WordPress-navigasjonsmenyer

Denne metoden krever at du manuelt legger til tilpasset CSS og er ment for mellombrukere.

WordPress navigasjonsmenyer vises i en uordnet liste (punktliste).

Hvis du bruker standard WordPress-menykoden, vil den vanligvis vise en liste uten CSS-klasser tilknyttet den.

<?php wp_nav_menu (); ?>

Den uordnede listen din vil ha klassens navn ‘meny’ med hvert listeelement med sin egen CSS-klasse.

Dette kan fungere hvis du bare har en menyplassering. Imidlertid har de fleste temaer flere steder der du kan vise navigasjonsmenyer.

Hvis du bare bruker standard CSS-klassen, kan det føre til konflikt med menyer på andre steder.

Dette er grunnen til at du også må definere CSS-klasse og menyplassering. Sjansen er stor for at WordPress-temaet ditt allerede gjør det ved å legge til navigasjonsmenyene ved å bruke en slik kode:

<?php
wp_nav_menu (matrise (
‘theme_location’ => ‘hoved’,
‘menu_class’ => ‘Hovedmeny’,
));
?>

Denne koden forteller WordPress at det er her temaet viser primærmeny. Den legger også til en CSS-klasse primærmeny til navigasjonsmenyen.

Nå kan du style navigasjonsmenyen din ved hjelp av denne CSS-strukturen.

// containerklasse
#header .primary-menu {}

// container class første uordnede liste
#header .primary-menu ul {}

// uordnet liste i en uordnet liste
#header .primary-menu ul ul {}

// hvert navigasjonselement
#header .primary-menu li {}

// hvert navigasjonselementanker
#header .primary-menu li a {}

// uordnet liste hvis det er nedtrekkselementer
#header .primary-menu li ul {}

// hvert nedtrekksnavigasjonselement
#header .primary-menu li li {}

// hvert draper ned navigasjonselementankeret
#header .primary-menu li li a {}

Du må bytte ut #header med beholderen CSS-klassen som brukes av navigasjonsmenyen.

Denne strukturen vil hjelpe deg med å endre utseendet til navigasjonsmenyen fullstendig.

Imidlertid er det andre WordPress-genererte CSS-klasser som automatisk legges til hver meny og menyelement. Disse klassene lar deg tilpasse navigasjonsmenyen enda mer.

// Klasse for nåværende side
.current_page_item {}

// Klasse for nåværende kategori
.strøm-cat {}

// Klasse for andre aktuelle menyposter
.strøm menypost {}

// Klasse for en kategori
.menypost-type-taksonomi {}

// Klasse for innleggstyper
.menypost-type-post_type {}

// Klasse for eventuelle tilpassede lenker
.menypost-type-tilpasset {}

// Klasse for hjemmet Link
.menypost-home {}

WordPress lar deg også legge til dine egne tilpassede CSS-klasser til individuelle menyelementer.

Du kan bruke denne funksjonen til å style menyelementer, som å legge til bildeikoner med menyene dine eller ved å bare endre farger for å utheve et menyelement.

Gå over til Utseende »Menyer -siden i WordPress-administratoren din og klikk på skjermalternativer-knappen.

Aktiver alternativet for CSS-klasser for individuelle menyelementer

Når du har merket av i denne boksen, vil du se at et ekstra felt legges til når du går for å redigere hvert enkelt menyelement.

Legge til en tilpasset CSS-klasse til et menyelement i WordPress

Nå kan du bruke denne CSS-klassen i stilarket ditt til å legge til din tilpassede CSS. Det vil bare påvirke menypunktet med CSS-klassen du la til.

Eksempler på stylingnavigasjonsmenyer i WordPress

Ulike WordPress-temaer kan bruke forskjellige stylingsalternativer, CSS-klasser og til og med JavaScript for å lage navigasjonsmenyer. Dette gir deg mange alternativer for å endre disse stilene og tilpasse navigasjonsmenyene dine for å oppfylle dine egne krav.

Inspiseringsverktøyet i nettleseren din vil være din beste venn når det gjelder å finne ut hvilke CSS-klasser som skal endres. Hvis du ikke har brukt det før, kan du ta en titt i guiden vår om hvordan du kan bruke inspeksjonsverktøyet for å tilpasse WordPress-temaer.

I utgangspunktet trenger du bare å peke markøren mot elementet du vil endre, høyreklikk og deretter velge Inspiser verktøy fra nettlesermenyen.

Bruk inspiserverktøy for å slå opp etter CSS-klasser å endre

Når det er sagt, la oss se på noen eksempler på det virkelige livet på styling av navigasjonsmenyer i WordPress.

1. Hvordan endre skriftfarge i WordPress-navigasjonsmenyer

Her er eksemplet på tilpasset CSS som du kan legge til i temaet ditt for å endre skriftfarge på navigasjonsmenyer.

# toppmeny li.menu-element a {
color: # ff0000;
}

I dette eksemplet er # toppmenyen IDen som er tilordnet den uordnede listen som viser navigasjonsmenyen vår. Du må bruke inspeksjonsverktøyet for å finne ut ID-en som brukes av temaet ditt.

Endre skriftfarge på navigasjonsmenyene til WordPress

2. Slik endrer du bakgrunnsfargen på navigeringsmenylinjen

Først må du finne ut CSS-IDen eller klassen som brukes av temaet ditt for beholderen som omgir navigasjonsmenyen.

Finne CSS-klasse for navigasjonsmenybeholder

Etter det kan du bruke følgende tilpassede CSS til å endre bakgrunnsfarge på navigasjonsmenylinjen.

.navigasjonstopp {
background-color: # 000;
}

Slik så det ut på demo-nettstedet vårt.

Endre bakgrunnsfarge på navigasjonsmenylinjen

3. Hvordan endre bakgrunnsfarge på et enkelt menyelement

Du har kanskje lagt merke til at mange nettsteder bruker en annen bakgrunnsfarge for de viktigste koblingene i navigasjonsmenyen. Denne lenken kan være en påloggings-, påmeldings-, kontakt- eller kjøpeknapp. Ved å gi den en annen farge, gjør den lenken mer merkbar.

For å oppnå dette, vil vi legge til en tilpasset CSS-klasse til menypunktet som vi vil utheve med en annen bakgrunnsfarge.

Gå over til Utseende »Menyer og klikk på Skjermalternativer-knappen øverst til høyre på skjermen. Dette viser en nedtrekksmeny der du må merke av i ruten ved siden av ‘CSS klasser’.

Aktiver alternativet for CSS-klasser for individuelle menyelementer

Etter det må du bla ned til menypunktet du vil endre og klikke for å utvide det. Du vil merke et nytt alternativ for å legge til din tilpassede CSS-klasse.

Legger til tilpasset css-klasse til et menyelement

Nå kan du bruke denne CSS-klassen til å style det aktuelle menyvalget på en annen måte.

.kontakt oss {
bakgrunnsfarge: # ff0099;
border-radius: 5 px;
}

Slik så det ut på testnettstedet vårt.

Endre bakgrunnsfarge på et enkelt menyelement i navigasjonsmenyene i WordPress

4. Legge til Hover Effects i WordPress Navigasjonsmenyer

Vil du at menyelementene skal endre farger ved musovergang? Dette spesielle CSS-trikset gjør at navigasjonsmenyene dine ser mer interaktive ut.

Bare legg til følgende tilpassede CSS til temaet ditt.

# toppmeny li.menu-element a: hover {
background-color: #fff;
color: # 666;
border-radius: 5 px;
}

I dette eksemplet er # toppmeny CSS-IDen som brukes av temaet ditt for den uordnede navigasjonsmenylisten.

Slik så dette ut på testnettstedet vårt.

Mouseover-effekt i WordPress navigasjonsmenyer

5. Lag klebrig flytende navigasjonsmenyer i WordPress

Normalt vises navigasjonsmenyer på toppen og forsvinner når en bruker ruller ned. Klissete flytende navigasjonsmenyer holder seg på toppen når en bruker ruller ned.

Du kan legge til følgende CSS-kode til temaet ditt for å gjøre navigasjonsmenyene klebrige.

# toppmeny {
bakgrunn: # 2194af;
høyde: 60 px;
z-index: 170;
margin: 0 auto;
border-bottom: 1px solid #dadada;
bredde: 100%;
stilling: fast;
topp: 0;
venstre: 0;
høyre: 0;
tekstjustering: høyre;
padding-right: 30px
}

Bytt ut # toppmeny med CSS ID på navigasjonsmenyen.

Slik så det ut i demonstrasjonen vår:

Klistret navigasjonsmeny

For mer detaljerte instruksjoner og alternativ metode, se vår guide for hvordan du lager en klebrig flytende navigasjonsmeny i WordPress.

6. Lag gjennomsiktige navigasjonsmenyer i WordPress

Mange nettsteder bruker store eller fullskjermede bakgrunnsbilder med oppfordringsknappen. Bruk av gjennomsiktige menyer gjør at navigasjonen din smelter sammen med bildet. Dette gjør brukerne mer sannsynlig å fokusere på oppfordringen til handling.

Bare legg til følgende eksempel CSS til temaet for å gjøre navigasjonsmenyene transparente.

# site-navigation {
bakgrunnsfarge: gjennomsiktig;
}

Slik så det ut på demosiden vår.

Gjennomsiktige navigasjonsmenyer i WordPress

Avhengig av temaet ditt, kan det hende du må justere posisjonen til toppteksten slik at det dekker området bak de transparente menyene.

Vi håper denne artikkelen hjalp deg med å lære hvordan du utformer navigasjonsmenyer for WordPress. Det kan også være lurt å se guiden vår om hvordan du legger til mobilklar responsiv WordPress-meny.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me