Vill du markera ett menyalternativ på din WordPress-webbplats?
Att markera ett menyalternativ kan verkligen hjälpa dig att rikta användarens uppmärksamhet till ett specifikt område av din meny. Detta kan vara bra om du vill lyfta fram sidan Prissättning eller Kontakta oss på din webbplats.
I den här artikeln visar vi dig hur du enkelt markerar ett menyalternativ i WordPress med hjälp av CSS-kod.
Varför ska jag markera ett menyalternativ?
En navigeringsmeny är en lista med länkar som pekar till viktiga delar av din webbplats. De presenteras vanligtvis som en horisontell stapel överst på varje sida på en WordPress-webbplats.
Den här navigeringsmenyn skapas genom att lägga till olika menyalternativ. För mer information kan du se vår artikel om hur man lägger till en navigeringsmeny i WordPress.
Ett markerat menyalternativ kan vara ett bra sätt att dra användarens uppmärksamhet på din mest framträdande uppmaning. Besökarnas ögon fokuserar automatiskt på menyalternativet när de besöker din webbplats.
Genom att lägga till den här funktionen kan du skapa en användarvänlig webbplats och markera viktiga menyalternativ som du vill att dina användare ska kolla in.
Med det sagt, låt oss se hur du kan markera ett menyalternativ i WordPress med CSS.
Om du använder ett blockaktiverat tema kommer du att ha den fullständiga Site Editor istället för den gamla Theme Customizer. Du kan också enkelt markera ett menyalternativ.
Gå först till Utseende » Redaktör från WordPress adminpanel. Detta leder dig till hela webbplatsredigeraren.
Dubbelklicka här helt enkelt på menyalternativet du vill markera och klicka sedan på kugghjulsikonen högst upp. Detta öppnar omedelbart “Inställningar”-blocket för det specifika menyalternativet.
Bläddra helt enkelt ner i “Inställningar”-blocket till fliken “Avancerat” och klicka på pilikonen bredvid den för att expandera fliken.
Detta öppnar ett “Ytterligare CSS-klass”-fält där du helt enkelt måste skriva in den markerade menyn i fältet.
Klicka sedan på knappen “Spara” högst upp på sidan för att spara dina ändringar.
Efter det måste du lägga till lite CSS till ditt tema för att uppnå höjdpunktseffekten. Du kan fixa den saknade Theme Customizer eller så kan du använda ett kodavsnittsplugin för att lägga till CSS-kod.
Hur man lägger till CSS-snuttar med WPCode
För att lägga till CSS i WordPress rekommenderar vi att du använder WPC-kod eftersom det är det enklaste sättet att lägga till anpassad kod till WordPress.
Först måste du installera och aktivera gratis WPCode-plugin. För mer instruktioner, se vår guide om hur du installerar ett WordPress-plugin.
Efter aktivering, navigera till Kodavsnitt » Lägg till kodavsnitt från din WordPress adminpanel. Klicka nu på knappen “Lägg till ny”.
Detta tar dig till sidan “Lägg till utdrag”.
Håll muspekaren över alternativet “Lägg till din anpassade kod (nytt kodavsnitt)” och klicka helt enkelt på knappen “Använd kodavsnitt” nedan.
Nu när du är på sidan “Skapa anpassat utdrag” börjar du med att välja ett namn och “kodtyp” för ditt CSS-utdrag.
Du kan välja vilket namn du vill.
Klicka sedan helt enkelt på rullgardinsmenyn bredvid alternativet “Kodtyp” till höger och välj sedan alternativet “Universal Snippet”.
Efter det, kopiera och klistra in följande CSS-kod i ‘Code Preview’.
Se till att inkludera stiltaggarna, som du ser på raderna 1 och 10 nedan.
Efter att ha klistrat in koden, gå till avsnittet “Infoga” genom att rulla nedåt.
Välj här helt enkelt “Auto Infoga” så att koden kan köras automatiskt över hela din webbplats.
Gå nu till toppen av sidan och växla från “Inaktiv” till “Aktiv.”
Klicka sedan på knappen “Spara utdrag”.
Du har nu framgångsrikt markerat ett menyalternativ i WordPress med hjälp av en fullständig webbplatsredigerare.
Så här kommer ditt menyalternativ att se ut efter att du har lagt till CSS-koden.
Hur man kommer åt temaanpassaren med ett blocktema
Om du vill använda Theme Customizer och använda ett FSE-tema, kopiera och klistra bara in följande URL i din webbläsare. Se till att ersätta ‘example.com’ med domännamnet på din egen webbplats.
https://example.com/wp-admin/customize.php
Här behöver du helt enkelt klicka på fliken ‘Ytterligare CSS’.
Expandera nu fältet “Ytterligare CSS” och kopiera och klistra sedan in följande kodavsnitt.
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Efter det klickar du helt enkelt på “Publicera”-knappen högst upp.
Det är allt som krävs för att markera ett menyalternativ.
Det ska se ut så här på din webbplats när det är klart:
Om du använder ett tema som inte är aktiverat för låsning, kommer du förmodligen att ha en temaanpassare aktiverad som standard. Att markera ett menyalternativ i en temaanpassare är en ganska enkel process.
Gå först till Utseende » Anpassa i din WordPress-instrumentpanel för att starta temaanpassaren. När temaanpassaren öppnas klickar du helt enkelt på fliken “Menyer”.
När du är i avsnittet “Menyer”, klicka bara på kugghjulsikonen uppe till höger för att visa de avancerade egenskaperna.
Markera nu helt enkelt rutan ‘CSS-klasser’.
Efter det, scrolla ner till avsnittet “Menyer”.
Om du har flera menyer på din webbplats klickar du helt enkelt på menyn vars objekt du vill markera.
Detta öppnar en ny flik där du kan välja menyalternativet du vill markera. Det kan vara “Kom igång”, som i vårt exempel, eller det kan vara din kontaktformulärsida eller länken till din webbutik.
Klicka bara på menyalternativet du väljer, vilket kommer att expandera det för att visa några alternativ. Klicka på fältet “CSS-klasser”.
Allt du behöver göra är att skriva “markerad meny” i fältet. Du kan lägga till den här CSS-klassen till flera menyalternativ och de kommer alla att markeras.
Gå sedan helt enkelt till fliken “Ytterligare CSS” i temaanpassaren.
Nu är det bara att kopiera och klistra in följande CSS-kod.
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Grattis! Du har markerat ett menyalternativ.
Notera: Ditt tema kanske inte har ett “Ytterligare CSS”-fält i temaanpassaren. Annars, kontrollera dina temainställningar för att ta reda på hur du lägger till anpassad CSS. Om du inte hittar den kan du kontakta utvecklaren eller lägg till det med WPCode.
Nu när du har markerat menyalternativet kan du justera CSS-koden för att anpassa menyalternativet hur du vill.
Du kan till exempel ändra bakgrundsfärgen för ditt menyalternativ.
Hitta helt enkelt följande kod i CSS-kodavsnittet du precis klistrade in.
När du har hittat den kan du helt enkelt ersätta den rosa färgkodsnumret med hex-koden för valfri färg:
Ovan är den hexadecimala koden för akvamarin.
Du kan kolla in vår guide för att enkelt lägga till anpassad CSS för andra idéer om hur du anpassar det markerade menyalternativet.
När du är nöjd med dina alternativ klickar du helt enkelt på knappen “Publicera” i temaanpassaren eller “Spara utdrag” i WPCode för att spara dina ändringar.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du markerar en menyikon i WordPress. Du kanske också vill kolla in vår nybörjarguide om hur du designar WordPress-navigeringsmenyer eller våra expertval av WordPress-plugins som du måste ha för att få din webbplats att växa.
