Så utformar du WordPress-navigationsmenyer

Vill du utforma dina WordPress-navigationsmenyer för att ändra färger eller utseende? Medan ditt WordPress-tema hanterar utseendet på dina navigationsmenyer, kan du enkelt anpassa det med CSS för att uppfylla dina krav. I den här artikeln visar vi dig hur du utformar navigationsmenyerna för WordPress på din webbplats.


Styling av navigationsmenyer i WordPress

Vi kommer att visa två olika metoder. Den första metoden är för nybörjare eftersom den använder ett plugin och inte kräver någon kodkunskap. Den andra metoden är för mellanliggande DIY-användare som föredrar att använda CSS-kod istället för ett plugin.

Metod 1: Styling av WordPress-navigationsmenyer med ett plugin

Ditt WordPress-tema använder CSS för att utforma navigationsmenyer. Många nybörjare är inte bekväma med att redigera temafiler eller skriva CSS-kod på egen hand.

Det är när ett WordPress-styling-plugin är praktiskt. Det sparar dig från att redigera temafiler eller skriva någon kod.

Först måste du göra är att installera och aktivera CSS Hero-plugin. Mer information finns i vår steg för steg-guide för hur du installerar ett WordPress-plugin.

CSS Hero är ett premium WordPress-plugin som låter dig designa ditt eget WordPress-tema utan att skriva en enda rad med kod (Ingen HTML eller CSS krävs). Se vår CSS Hero-recension för att lära dig mer.

WPBeginner-användare kan använda denna CSS Hero-kupong för att få 34% rabatt på sina köp.

Vid aktivering kommer du att omdirigeras för att få din CSS Hero License-nyckel. Följ bara anvisningarna på skärmen så kommer du att omdirigeras tillbaka till din webbplats med några klick.

Därefter måste du klicka på CSS Hero-knappen i ditt WordPress adminverktygsfält.

Lansera CSS Hero

CSS Hero erbjuder en WYSIWYG (vad du ser är vad du får) redaktör. Om du klickar på knappen kommer du till din webbplats med ett flytande CSS Hero-verktygsfält som syns på skärmen.

CSS Hero Toolbar

Du måste klicka på den blå ikonen längst upp för att börja redigera.

När du har klickat på den blå ikonen tar du musen till navigationsmenyn och CSS Hero kommer att markera den genom att visa gränserna runt den. När du klickar på den markerade navigeringsmenyn visar den de objekt du kan redigera.

Peka och klicka för att anpassa menyn

I skärmdumpen ovan visar det oss behållaren för navigationsmenyn. Låt oss anta att vi vill ändra bakgrundsfärgen på vår navigationsmeny. I så fall väljer vi toppnavigering som påverkar hela menyn.

CSS Hero kommer nu att visa dig olika egenskaper som du kan redigera som text, bakgrund, kant, marginaler, stoppning osv.

CSS-egenskaper

Du kan klicka på vilken egendom du vill ändra. CSS Hero visar dig ett enkelt gränssnitt där du kan göra dina ändringar.

Ändra utseendet på ett element

I skärmdumpen ovan valde vi bakgrund, och det visade oss ett trevligt gränssnitt för att välja bakgrundsfärg, lutning, bild och mer.

När du gör ändringar kommer du att kunna se dem live i temaförhandsgranskningen.

Live förhandsvisning av dina CSS-ändringar

När du är nöjd med ändringarna klickar du på spara-knappen i CSS Hero-verktygsfältet för att spara dina ändringar.

Det bästa med att använda den här metoden är att du enkelt kan ångra alla ändringar du gör. CSS Hero har en fullständig historik över alla dina förändringar, och du kan gå fram och tillbaka mellan dessa förändringar.

Metod 2: Manuell stil WordPress-navigationsmenyer

Denna metod kräver att du manuellt lägger till anpassad CSS och är avsedd för mellananvändare.

WordPress-navigationsmenyer visas i en oordnad lista (punktlista).

Vanligtvis om du använder WordPress-standardtagg, kommer den att visa en lista utan CSS-klasser associerade med den.

<?php wp_nav_menu (); ?>

Din oordnade lista skulle ha klassnamnet ‘meny’ med varje listobjekt som har sin egen CSS-klass.

Detta kan fungera om du bara har en menyplats. De flesta teman har dock flera platser där du kan visa navigationsmenyer.

Om du bara använder standard CSS-klassen kan det orsaka konflikter med menyer på andra platser.

Därför måste du också definiera CSS-klass och menyplats. Chansen är stor att ditt WordPress-tema redan gör det genom att lägga till navigationsmenyerna med en kod som denna:

<?php
wp_nav_menu (matris (
‘theme_location’ => ‘primär’,
‘menu_class’ => ‘Primär-menyn’,
));
?>

Den här koden säger till WordPress att det är här temat visar primärmeny. Den lägger också till en primärmeny i CSS-klass till navigationsmenyn.

Nu kan du utforma din navigationsmeny med denna CSS-struktur.

// containerklass
#header .primary-menu {}

// containerklass första oordnade listan
#header .primary-menu ul {}

// oordnad lista inom en oordnad lista
#header .primary-menu ul ul {}

// varje navigationsobjekt
#header .primary-menu li {}

// varje ankar för navigationsobjekt
#header .primary-menu li a {}

// oordnad lista om det finns listrutor
#header .primary-menu li ul {}

// varje nedrullningsbar navigationsobjekt
#header .primary-menu li li {}

// varje drapera ner navigationsartikelförankringen
#header .primary-menu li li a {}

Du måste ersätta #header med behållaren CSS-klassen som används av din navigationsmeny.

Denna struktur hjälper dig att helt ändra utseendet på din navigationsmeny.

Men det finns andra WordPress-genererade CSS-klasser som automatiskt läggs till i varje meny och menypost. Med dessa klasser kan du anpassa din navigationsmeny ytterligare.

// Klass för aktuell sida
.current_page_item {}

// Klass för aktuell kategori
.ström-katt {}

// Klass för alla andra aktuella menyalternativ
.nuvarande menyalternativ {}

// Klass för en kategori
.menu-item-type-taxonomi {}

// Klass för posttyper
.menu-item-type-post_type {}

// Klass för alla anpassade länkar
.menu-item-typ-custom {}

// Klass för hemlänken
.menu-item-hem {}

Med WordPress kan du också lägga till dina egna CSS-klasser till enskilda menyalternativ.

Du kan använda den här funktionen för att utforma menyalternativ, som att lägga till bildikoner med dina menyer eller genom att bara ändra färger för att markera ett menyalternativ.

Gå över till Utseende »Menyer i din WordPress-admin och klicka på Skärmalternativ-knappen.

Aktivera alternativ för CSS-klasser för enskilda menyalternativ

När du har markerat den rutan ser du att ett extra fält läggs till när du går för att redigera varje enskilt menyalternativ.

Lägga till en anpassad CSS-klass till ett menyalternativ i WordPress

Nu kan du använda denna CSS-klass i ditt formatmall för att lägga till din anpassade CSS. Det påverkar bara menyalternativet med CSS-klassen du lagt till.

Exempel på stylingnavigeringsmenyer i WordPress

Olika WordPress-teman kan använda olika stylingsalternativ, CSS-klasser och till och med JavaScript för att skapa navigationsmenyer. Detta ger dig många alternativ för att ändra dessa stilar och anpassa dina navigationsmenyer för att möta dina egna krav.

Inspektionsverktyget i din webbläsare kommer att vara din bästa vän när det gäller att ta reda på vilka CSS-klasser som ska ändras. Om du inte har använt den tidigare, ta en titt på vår guide om hur du använder inspekteringsverktyget för att anpassa WordPress-teman.

I grund och botten behöver du bara peka markören mot det element du vill ändra, högerklicka och sedan välja Inspektera verktyg från webbläsarens meny.

Använd inspekteringsverktyget för att leta efter CSS-klasser att modifiera

Som sagt, låt oss ta en titt på några verkliga exempel på stylingnavigeringsmenyer i WordPress.

1. Hur man ändrar teckensnittsfärg i WordPress-navigationsmenyer

Här är ett exempel på anpassad CSS som du kan lägga till i ditt tema för att ändra teckensnittsfärgen på navigationsmenyerna.

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

I det här exemplet är # -menyn ID som tilldelats den oordnade listan som visar vår navigationsmeny. Du måste använda inspektionsverktyget för att ta reda på ID som används av ditt tema.

Ändra teckensnittsfärg på WordPress-navigationsmenyer

2. Hur man ändrar bakgrundsfärgen på menyn i navigationsmenyn

Först måste du ta reda på CSS-ID eller klassen som används av ditt tema för behållaren kring navigeringsmenyn.

Hitta CSS-klass för behållare för navigationsmeny

Efter det kan du använda följande anpassade CSS för att ändra bakgrundsfärgen i navigeringsmenyfältet.

.navigation-top {
background-color: # 000;
}

Så här såg det ut på vår demowebbplats.

Ändra bakgrundsfärg i navigeringsmenyfältet

3. Hur man ändrar bakgrundsfärg för en enda menypost

Du kanske har lagt märke till att många webbplatser använder en annan bakgrundsfärg för de viktigaste länkarna i sin navigationsmeny. Den här länken kan vara en inloggnings-, registrerings-, kontakt- eller köpknapp. Genom att ge den en annan färg gör det länken mer synlig.

För att uppnå detta lägger vi till en anpassad CSS-klass till menyalternativet som vi vill markera med en annan bakgrundsfärg.

Gå över till Utseende »Menyer och klicka på skärmalternativsknappen längst upp till höger på skärmen. Detta visar en nedrullningsmeny där du måste markera rutan bredvid alternativet ‘CSS klasser’.

Aktivera alternativ för CSS-klasser för enskilda menyalternativ

Efter det måste du bläddra ner till menyalternativet som du vill ändra och klicka för att utöka det. Du kommer att märka ett nytt alternativ för att lägga till din anpassade CSS-klass.

Lägga till anpassad css-klass i ett menyalternativ

Nu kan du använda denna CSS-klass för att utforma det specifika menyalternativet annorlunda.

.kontakta oss {
bakgrundsfärg: # ff0099;
border-radius: 5px;
}

Så här såg det ut på vår testsida.

Ändra bakgrundsfärg för ett enda menyalternativ i WordPress navigationsmenyer

4. Lägga till Hover Effects till WordPress Navigation Menyer

Vill du att dina menyalternativ ska ändra färger vid muspekaren? Detta specifika CSS-trick gör att navigationsmenyerna ser mer interaktiva ut.

Lägg bara till följande anpassade CSS till ditt tema.

# toppmeny li.menu-artikel a: sväva {
background-color: #fff;
color: # 666;
border-radius: 5px;
}

I det här exemplet är # toppmenyn CSS-ID som används av ditt tema för den oordnade navigeringsmenylistan.

Så här såg ut på vår testsida.

Musöverföringseffekt i WordPress navigationsmenyer

5. Skapa klibbiga flytande navigationsmenyer i WordPress

Normalt visas navigationsmenyer på toppen och försvinner när en användare rullar ner. Klibbiga flytande navigationsmenyer förblir på topp när en användare rullar ner.

Du kan lägga till följande CSS-kod till ditt tema för att göra navigationsmenyerna klibbiga.

#topp meny {
Bakgrund: # 2194af;
höjd: 60 bildpunkter;
z-index: 170;
marginal: 0 auto;
gräns-botten: 1px solid #dadada;
bredd: 100%;
läget: fast;
top: 0;
vänster: 0;
höger: 0;
text-align: höger;
padding-right: 30px
}

Byt helt enkelt ut # toppmenyn med CSS-ID för din navigationsmeny.

Så här såg det ut i vår demo:

Klibbig navigationsmeny

För mer detaljerade instruktioner och alternativ metod, se vår guide om hur du skapar en klibbig flytande navigationsmeny i WordPress.

6. Skapa transparenta navigationsmenyer i WordPress

Många webbplatser använder stora eller fullskärmiga bakgrundsbilder med sina uppmaningsknappar. Om du använder transparenta menyer får din navigering att smälta in i bilden. Detta gör användarna mer benägna att fokusera på din uppmaning.

Lägg bara till följande CSS-exempel till ditt tema för att göra dina navigationsmenyer transparenta.

# site-navigation {
bakgrundsfärg: transparent;
}

Så här såg det ut på vår demosida.

Transparenta navigationsmenyer i WordPress

Beroende på ditt tema kan du behöva justera positionen för rubrikbilden så att den täcker området bakom dina transparenta menyer.

Vi hoppas att den här artikeln hjälpte dig att lära dig att utforma WordPress-navigationsmenyer. Du kanske också vill se vår guide för hur du lägger till mobil-klara lyhörd WordPress-meny.

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