Vill du markera ett menyalternativ p\u00e5 din WordPress-webbplats?<\/p>\n
Att markera ett menyalternativ kan verkligen hj\u00e4lpa dig att rikta anv\u00e4ndarens uppm\u00e4rksamhet till ett specifikt omr\u00e5de av din meny. Detta kan vara bra om du vill lyfta fram sidan Priss\u00e4ttning eller Kontakta oss p\u00e5 din webbplats.<\/p>\n
I den h\u00e4r artikeln visar vi dig hur du enkelt markerar ett menyalternativ i WordPress med hj\u00e4lp av CSS-kod.<\/p>\n En navigeringsmeny \u00e4r en lista med l\u00e4nkar som pekar till viktiga delar av din webbplats. De presenteras vanligtvis som en horisontell stapel \u00f6verst p\u00e5 varje sida p\u00e5 en WordPress-webbplats.<\/p>\n Den h\u00e4r navigeringsmenyn skapas genom att l\u00e4gga till olika menyalternativ. F\u00f6r mer information kan du se v\u00e5r artikel om hur man l\u00e4gger till en navigeringsmeny i WordPress.<\/p>\n Ett markerat menyalternativ kan vara ett bra s\u00e4tt att dra anv\u00e4ndarens uppm\u00e4rksamhet p\u00e5 din mest framtr\u00e4dande uppmaning. Bes\u00f6karnas \u00f6gon fokuserar automatiskt p\u00e5 menyalternativet n\u00e4r de bes\u00f6ker din webbplats. <\/p>\n Genom att l\u00e4gga till den h\u00e4r funktionen kan du skapa en anv\u00e4ndarv\u00e4nlig webbplats och markera viktiga menyalternativ som du vill att dina anv\u00e4ndare ska kolla in.<\/p>\n Med det sagt, l\u00e5t oss se hur du kan markera ett menyalternativ i WordPress med CSS.<\/p>\n Om du anv\u00e4nder ett blockaktiverat tema kommer du att ha den fullst\u00e4ndiga Site Editor ist\u00e4llet f\u00f6r den gamla Theme Customizer. Du kan ocks\u00e5 enkelt markera ett menyalternativ.<\/p>\n G\u00e5 f\u00f6rst till Utseende \u00bb Redakt\u00f6r<\/strong> fr\u00e5n WordPress adminpanel. Detta leder dig till hela webbplatsredigeraren.<\/p>\n Dubbelklicka h\u00e4r helt enkelt p\u00e5 menyalternativet du vill markera och klicka sedan p\u00e5 kugghjulsikonen h\u00f6gst upp. Detta \u00f6ppnar omedelbart “Inst\u00e4llningar”-blocket f\u00f6r det specifika menyalternativet. <\/p>\n Bl\u00e4ddra helt enkelt ner i “Inst\u00e4llningar”-blocket till fliken “Avancerat” och klicka p\u00e5 pilikonen bredvid den f\u00f6r att expandera fliken.<\/p>\n Detta \u00f6ppnar ett “Ytterligare CSS-klass”-f\u00e4lt d\u00e4r du helt enkelt m\u00e5ste skriva in den markerade menyn i f\u00e4ltet.<\/p>\n Klicka sedan p\u00e5 knappen “Spara” h\u00f6gst upp p\u00e5 sidan f\u00f6r att spara dina \u00e4ndringar.<\/p>\n Efter det m\u00e5ste du l\u00e4gga till lite CSS till ditt tema f\u00f6r att uppn\u00e5 h\u00f6jdpunktseffekten. Du kan fixa den saknade Theme Customizer eller s\u00e5 kan du anv\u00e4nda ett kodavsnittsplugin f\u00f6r att l\u00e4gga till CSS-kod.<\/p>\n Hur man l\u00e4gger till CSS-snuttar med WPCode<\/strong><\/p>\n F\u00f6r att l\u00e4gga till CSS i WordPress rekommenderar vi att du anv\u00e4nder WPC-kod<\/a> eftersom det \u00e4r det enklaste s\u00e4ttet att l\u00e4gga till anpassad kod till WordPress.<\/p>\n F\u00f6rst m\u00e5ste du installera och aktivera gratis WPCode-plugin<\/a>. F\u00f6r mer instruktioner, se v\u00e5r guide om hur du installerar ett WordPress-plugin.<\/p>\n Efter aktivering, navigera till Kodavsnitt \u00bb L\u00e4gg till kodavsnitt<\/strong> fr\u00e5n din WordPress adminpanel. Klicka nu p\u00e5 knappen “L\u00e4gg till ny”.<\/p>\n Detta tar dig till sidan “L\u00e4gg till utdrag”.<\/p>\n H\u00e5ll muspekaren \u00f6ver alternativet “L\u00e4gg till din anpassade kod (nytt kodavsnitt)” och klicka helt enkelt p\u00e5 knappen “Anv\u00e4nd kodavsnitt” nedan.<\/p>\n Nu n\u00e4r du \u00e4r p\u00e5 sidan “Skapa anpassat utdrag” b\u00f6rjar du med att v\u00e4lja ett namn och “kodtyp” f\u00f6r ditt CSS-utdrag. <\/p>\n Du kan v\u00e4lja vilket namn du vill.<\/p>\n Klicka sedan helt enkelt p\u00e5 rullgardinsmenyn bredvid alternativet “Kodtyp” till h\u00f6ger och v\u00e4lj sedan alternativet “Universal Snippet”.<\/p>\n Efter det, kopiera och klistra in f\u00f6ljande CSS-kod i ‘Code Preview’.<\/p>\n Se till att inkludera stiltaggarna, som du ser p\u00e5 raderna 1 och 10 nedan.<\/p>\n Efter att ha klistrat in koden, g\u00e5 till avsnittet “Infoga” genom att rulla ned\u00e5t. <\/p>\n V\u00e4lj h\u00e4r helt enkelt “Auto Infoga” s\u00e5 att koden kan k\u00f6ras automatiskt \u00f6ver hela din webbplats.<\/p>\n G\u00e5 nu till toppen av sidan och v\u00e4xla fr\u00e5n “Inaktiv” till “Aktiv.”<\/p>\n Klicka sedan p\u00e5 knappen “Spara utdrag”.<\/p>\n Du har nu framg\u00e5ngsrikt markerat ett menyalternativ i WordPress med hj\u00e4lp av en fullst\u00e4ndig webbplatsredigerare.<\/p>\n S\u00e5 h\u00e4r kommer ditt menyalternativ att se ut efter att du har lagt till CSS-koden.<\/p>\n Hur man kommer \u00e5t temaanpassaren med ett blocktema<\/strong><\/p>\n Om du vill anv\u00e4nda Theme Customizer och anv\u00e4nda ett FSE-tema, kopiera och klistra bara in f\u00f6ljande URL i din webbl\u00e4sare. Se till att ers\u00e4tta ‘example.com’ med dom\u00e4nnamnet p\u00e5 din egen webbplats.<\/p>\n H\u00e4r beh\u00f6ver du helt enkelt klicka p\u00e5 fliken ‘Ytterligare CSS’.<\/p>\n Expandera nu f\u00e4ltet “Ytterligare CSS” och kopiera och klistra sedan in f\u00f6ljande kodavsnitt.<\/p>\n Efter det klickar du helt enkelt p\u00e5 “Publicera”-knappen h\u00f6gst upp. <\/p>\n Det \u00e4r allt som kr\u00e4vs f\u00f6r att markera ett menyalternativ.<\/p>\n Det ska se ut s\u00e5 h\u00e4r p\u00e5 din webbplats n\u00e4r det \u00e4r klart:<\/p>\n Om du anv\u00e4nder ett tema som inte \u00e4r aktiverat f\u00f6r l\u00e5sning, kommer du f\u00f6rmodligen att ha en temaanpassare aktiverad som standard. Att markera ett menyalternativ i en temaanpassare \u00e4r en ganska enkel process. <\/p>\n G\u00e5 f\u00f6rst till Utseende \u00bb Anpassa<\/strong> i din WordPress-instrumentpanel f\u00f6r att starta temaanpassaren. N\u00e4r temaanpassaren \u00f6ppnas klickar du helt enkelt p\u00e5 fliken “Menyer”.<\/p>\n N\u00e4r du \u00e4r i avsnittet “Menyer”, klicka bara p\u00e5 kugghjulsikonen uppe till h\u00f6ger f\u00f6r att visa de avancerade egenskaperna.<\/p>\n Markera nu helt enkelt rutan ‘CSS-klasser’.<\/p>\n Efter det, scrolla ner till avsnittet “Menyer”.<\/p>\n Om du har flera menyer p\u00e5 din webbplats klickar du helt enkelt p\u00e5 menyn vars objekt du vill markera.<\/p>\n Detta \u00f6ppnar en ny flik d\u00e4r du kan v\u00e4lja menyalternativet du vill markera. Det kan vara “Kom ig\u00e5ng”, som i v\u00e5rt exempel, eller det kan vara din kontaktformul\u00e4rsida eller l\u00e4nken till din webbutik.<\/p>\n Klicka bara p\u00e5 menyalternativet du v\u00e4ljer, vilket kommer att expandera det f\u00f6r att visa n\u00e5gra alternativ. Klicka p\u00e5 f\u00e4ltet “CSS-klasser”. <\/p>\n Allt du beh\u00f6ver g\u00f6ra \u00e4r att skriva “markerad meny” i f\u00e4ltet. Du kan l\u00e4gga till den h\u00e4r CSS-klassen till flera menyalternativ och de kommer alla att markeras.<\/p>\n G\u00e5 sedan helt enkelt till fliken “Ytterligare CSS” i temaanpassaren. <\/p>\n Nu \u00e4r det bara att kopiera och klistra in f\u00f6ljande CSS-kod.<\/p>\n Grattis! Du har markerat ett menyalternativ. <\/p>\n Notera:<\/strong> Ditt tema kanske inte har ett “Ytterligare CSS”-f\u00e4lt i temaanpassaren. Annars, kontrollera dina temainst\u00e4llningar f\u00f6r att ta reda p\u00e5 hur du l\u00e4gger till anpassad CSS. Om du inte hittar den kan du kontakta utvecklaren eller l\u00e4gg till det med WPCode<\/a>. <\/p>\n Nu n\u00e4r du har markerat menyalternativet kan du justera CSS-koden f\u00f6r att anpassa menyalternativet hur du vill. <\/p>\n Du kan till exempel \u00e4ndra bakgrundsf\u00e4rgen f\u00f6r ditt menyalternativ.<\/p>\n Hitta helt enkelt f\u00f6ljande kod i CSS-kodavsnittet du precis klistrade in.<\/p>\n N\u00e4r du har hittat den kan du helt enkelt ers\u00e4tta den rosa f\u00e4rgkodsnumret med hex-koden f\u00f6r valfri f\u00e4rg:<\/p>\n Ovan \u00e4r den hexadecimala koden f\u00f6r akvamarin.<\/p>\n Du kan kolla in v\u00e5r guide f\u00f6r att enkelt l\u00e4gga till anpassad CSS f\u00f6r andra id\u00e9er om hur du anpassar det markerade menyalternativet. <\/p>\n N\u00e4r du \u00e4r n\u00f6jd med dina alternativ klickar du helt enkelt p\u00e5 knappen “Publicera” i temaanpassaren eller “Spara utdrag” i WPCode f\u00f6r att spara dina \u00e4ndringar. <\/p>\n Vi hoppas att den h\u00e4r artikeln hj\u00e4lpte dig att l\u00e4ra dig hur du markerar en menyikon i WordPress. Du kanske ocks\u00e5 vill kolla in v\u00e5r nyb\u00f6rjarguide om hur du designar WordPress-navigeringsmenyer eller v\u00e5ra expertval av WordPress-plugins som du m\u00e5ste ha f\u00f6r att f\u00e5 din webbplats att v\u00e4xa.<\/p>\n <\/span>Varf\u00f6r ska jag markera ett menyalternativ?<\/span><\/h4>\n
\n\n<\/pre>\n
\nhttps:\/\/example.com\/wp-admin\/customize.php\n<\/pre>\n
\n\/* Highlighted menu *\/\n.highlighted-menu\n{\nbackground: #FFB6C1;\nborder-radius: 35px;\npadding: 0px 20px;\nline-height: 50px;\n}\n<\/pre>\n\n\/* Highlighted menu *\/\n.highlighted-menu\n{\nbackground: #FFB6C1;\nborder-radius: 35px;\npadding: 0px 20px;\nline-height: 50px;\n}\n<\/pre>\n