En besökare landar på din webbplats, öppnar sidan "Tjänster" och kan inte omedelbart se var de befinner sig. Menyalternativen ser identiska ut. Det finns ingen aktiv markering. Det här är inte en bugg i WordPress; som standard krävs det inte att ett tema framhäver det aktuella menyalternativet. Men några rader CSS löser problemet på under en minut.

WordPress har automatiskt tilldelat en uppsättning CSS-klasser till varje menyalternativ sedan version 3.0. Tre av dem indikerar "användaren befinner sig just nu på denna sida eller i denna sektion". Allt du behöver göra är att skriva stilarna, så blir navigeringen tydlig utan ett enda klick.

💡 Snabb översikt:

• Öppna webbläsarens inspector och hitta CSS-selektorn för din webbplats meny
• Lägg till 3-5 rader CSS i Anpassa eller style.css som riktar sig mot klasserna .current-menu-item, .current-page-ancestor och .current-post-ancestor
• Om webbplatsen har flera menyer, förfina selektorn så att markeringen bara gäller huvudmenyn
• I blockteman (FSE) är tillvägagångssättet detsamma, men CSS läggs till via webbplatsredigeraren

Vilka klasser WordPress lägger till på menyalternativ

När WordPress renderar en meny via wp_nav_menu() får varje <li>-element flera klasser. Här är de tre som styr det "aktiva" läget:

.current-menu-item tilldelas det alternativ vars länk pekar på den aktuella sidan. Öppna "Kontakt", så får menyalternativet "Kontakt" denna klass. Den mest okomplicerade och vanligast använda.

.current-page-ancestor aktiveras när användaren är på en undersida medan menyalternativet pekar på föräldern. Till exempel: menyn innehåller "Portfölj" och besökaren läser en case study i den sektionen. Föräldraalternativet "Portfölj" får ancestor-klassen, så du kan markera det också och visa vilken sektion av webbplatsen användaren befinner sig i.

.current-post-ancestor är samma koncept, men för inlägg och kategorier. Om ett menyalternativ länkar till kategorin "Nyheter" och läsaren öppnar en specifik artikel från den kategorin, kommer alternativet "Nyheter" att bära denna klass.

WordPress tilldelar alla tre klasserna automatiskt. Du behöver inte skriva PHP-villkor eller redigera mallar manuellt, till skillnad från WP 2.9-eran och tidigare, då varje länk måste omslutas av en if-kontroll mot den aktuella webbadressen. Idag kan du bara öppna inspectorn och se vilken klass som redan är kopplad till det aktuella alternativet.

Steg 1: Hitta menyselektorn

Öppna din webbplats, tryck på F12 (utvecklarverktyg) och leta reda på det <ul>- eller <nav>-element som innehåller menyalternativen. Det ser vanligtvis ut så här:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Notera identifieraren (#primary-menu) eller klassen (.main-navigation) för din meny. Detta är selektorn vi kommer att använda i nästa steg för att begränsa CSS:ens räckvidd.

I klassiska teman renderas menyer oftast via wp_nav_menu() med ett theme_location-argument som 'primary'. CSS-klasser tilldelas av funktionen nav_menu_css_class, och ett filter med samma namn låter utvecklare lägga till eller ta bort klasser programmatiskt. Men för grundläggande markering behövs ingen kod, bara CSS.

Steg 2: Lägg till CSS för markering

Det enklaste och säkraste tillvägagångssättet är att infoga stilar via den inbyggda Anpassa-funktionen. I WordPress admin, gå till Utseende → Anpassa → Extra CSS.

Kopiera och klistra in:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

Vad denna kod gör: när ett menyalternativ får klassen .current-menu-item ändrar dess länk textfärg till vit och bakgrund till blå, plus en lätt avrundning. Resultatet syns omedelbart i förhandsgranskningen i Anpassa, innan du sparar.

För finare kontroll kan du också markera ancestors:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

Här finns istället för en fyllning en understrykning med en blå linje. Detta alternativ ser renare ut i minimalistiska teman.

Steg 3: Begränsa räckvidden

Om din webbplats har flera menyer (huvudmeny i sidhuvudet, sekundär i sidfoten, en widget-meny i sidofältet) kommer CSS:en från föregående steg att markera det aktiva alternativet överallt. Det är sällan önskvärt.

Lägg till ID:t eller klassen för den specifika meny du hittade i steg 1 före klass-selektorn:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Nu aktiveras markeringen endast inuti elementet med id="primary-menu". Andra menyer på webbplatsen förblir oförändrade.

Om ditt tema använder en klass istället för ett ID, skriv .main-navigation .current-menu-item > a. Principen är densamma.

Hur är det med blockteman (FSE)

I blockbaserade teman (Twenty Twenty-Four, Twenty Twenty-Five och liknande) finns ingen klassisk Anpassa med ett fält för Extra CSS. Menyer byggs via navigeringsblocket.

CSS läggs till via webbplatsredigeraren: Utseende → Redigerare → Stilar → tre punkter (meny) → Extra CSS. Koden är exakt densamma; WordPress fortsätter att tilldela klasserna .current-menu-item och andra även i blockteman.

Skillnaden är selektorn. I FSE är menyomslaget ett <nav> med en klass som .wp-block-navigation. Bekräfta selektorn via inspectorn och lägg den före de aktiva klasserna:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

Om din webbplats körs på ett modernt tema och menyn inte markeras "out of the box", kontrollera om temat självt åsidosätter länktillstånd via :hover och :focus utan stilar för .current-menu-item. Lösningen är att lägga till en selektor med lika hög specificitet.

Djupare menyanpassning (från megamenyer till mobilnavigering) behandlas i en separat artikel. Den innehåller också en plugin-översikt för fall när CSS inte längre räcker: från kostnadsfria byggare till professionella lösningar med rutnät och ikoner.

⁉️🤔 Vanliga frågor

Varför markeras inte menyn efter att jag lagt till CSS:en?

Den vanligaste orsaken är att selektorn inte matchar den faktiska HTML-strukturen. Öppna inspectorn (F12), klicka på det aktiva menyalternativet och kontrollera: har <li>-elementet klassen .current-menu-item? Om klassen saknas anser inte WordPress att denna sida är "aktuell" för det alternativet. Detta kan hända med anpassade inläggstyper eller plugins som åsidosätter menylogiken. Lösning: registrera den anpassade typen med 'show_in_nav_menus' => true eller lägg till stöd via nav_menu_css_class-filtret.

Kan jag markera ett menyalternativ med olika färg för varje sida?

Ja. WordPress lägger till en unik klass som .menu-item-{ID} till varje alternativ, till exempel .menu-item-42. Använd inspectorn för att hitta ID:t för det aktuella alternativet och skriv: .menu-item-42 > a { background: #d63638; }. Detta låter dig färgkoda menyn för att matcha webbplatsens sektioner.

Hur markerar jag ett menyalternativ om det är en extern länk eller ett ankare?

En extern länk kommer inte att få .current-menu-item eftersom den pekar på en annan webbplats, och WordPress kan inte identifiera den som "aktuell". För ankare inom samma sida aktiveras klassen inte heller. I dessa fall lägger du till en anpassad CSS-klass manuellt på alternativet: Utseende → Menyer → Skärmalternativ → kryssa i CSS-klasser, ange sedan din klass i alternativets inställningar och stila den.

Är det säkert att lägga till CSS via Extra CSS i Anpassa?

Ja. Stilar från detta fält lagras i databasen och går inte förlorade när temat uppdateras, till skillnad från redigeringar i style.css i ett barntema som kan skrivas över av misstag. Fältet har funnits sedan WordPress 4.7 och stöds av praktiskt taget alla klassiska teman.

Är det värt besväret: sammanfattning på tre rader

Att markera det aktiva menyalternativet är inte ett designinflytande; det är en grundläggande navigeringsfunktion. Utan den lägger besökare extra sekunder på att orientera sig. Med den är webbplatsstrukturen tydlig vid en första anblick.

Uppgiften hanteras helt av tre klasser: .current-menu-item, .current-page-ancestor och .current-post-ancestor. Den ryms på fem rader kod. Implementering tar tre minuter via Anpassa.

Om du behöver mer (icke-standardiserat menybeteende, villkorlig markering efter användarroll eller anpassade indikatorer) se översikten över 15+ menyplugins. För grundläggande markering räcker CSS.