Hur man lägger till bildikoner i WordPress-navigeringsmenyer

Under åren har vi hjälpt tusentals läsare att anpassa sina WordPress-webbplatser för att förbättra både användarupplevelsen och det visuella utseendet. Från vår praktiska erfarenhet av webbdesign har vi lärt oss att lägga till bildikoner i WordPress navigeringsmenyer drastiskt kan förbättra din webbplats användbarhet.

Det beror på att bildikoner kan ge intuitiva visuella ledtrådar till dina besökare, vilket gör det lättare för dem att navigera på din webbplats. På så sätt blir din webbplats gränssnitt mer interaktivt och engagerande, vilket hjälper till att minska avvisningsfrekvensen.

I den här artikeln visar vi hur du enkelt lägger till bildikoner i navigeringsmenyer i WordPress. 

Varför lägga till bildikoner med navigeringsmenyer i WordPress?

Vanligtvis är WordPress-navigeringsmenyer vanliga textlänkar. Dessa länkar fungerar bra för de flesta webbplatser, men de ser inte alltid intressanta eller engagerande ut. 

Genom att lägga till bildikoner i navigeringsmenyn kan du uppmuntra besökare att uppmärksamma menyn och utforska mer av din webbplats.

Om din meny har många olika alternativ, kan bildikoner göra det lättare för besökare att skanna innehållet och hitta vad de letar efter. Detta kan vara ett enkelt sätt att öka sidvisningar och minska avvisningsfrekvensen i WordPress. 

Du kan till och med använda en ikonbild för att markera det viktigaste menyalternativet, som länken till kassan i din online-marknadsplats. 

Genom att lyfta fram en uppmaning till handling i menyn kan du ofta få fler registreringar, försäljningar, medlemmar och andra konverteringar.

Med det sagt, låt oss se hur du kan lägga till bildikoner i din WordPress-navigeringsmeny. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Metod 1: Lägg till bildikoner i navigeringsmenyer med ett plugin (snabbt och enkelt)
• Metod 2: Lägg till ikoner i WordPress-menyer med kod (mer anpassningsbar)
• Bonus: Lägg till ikoner för sociala medier i WordPress-menyer

Metod 1: Lägg till bildikoner i navigeringsmenyer med ett plugin (snabbt och enkelt)

Det enklaste sättet att lägga till ikoner i dina WordPress-menyer är att använda Menu Image. Det här pluginet kommer med dashIcon-ikoner som du kan lägga till med bara några klick.

Om du har ställt in Font Awesome på din webbplats kan du enkelt lägga till dessa ikoner i din navigeringsmeny med hjälp av Menu Image. För mer information om hur du installerar Font Awesome, se vår guide om hur du enkelt lägger till ikonfonter i ditt WordPress-tema.

Ett annat alternativ är att använda bilder eller ikoner från WordPress mediebibliotek.

Det första du behöver göra är att installera och aktivera pluginet Menu Image. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering, klicka på Menybild i WordPress-instrumentpanelen. På den här skärmen kan du välja om du vill få säkerhets- och funktionsmeddelanden eller klicka på knappen ‘Hoppa över’.

Detta tar dig till en skärm där du kan konfigurera pluginets inställningar. Till att börja med ser du alla olika storlekar du kan använda för bildikonerna.

Om du planerar att använda ikoner från Font Awesome eller dashicons, kommer Menybild att ändra storlek på dem automatiskt. Men om du använder bilder från mediebiblioteket måste du välja storleken manuellt.

Plugin stöder standardstorlekarna för WordPress-bilder WordPress image sizes, som miniatyrbilder, bilder och stora. Det lägger också till tre unika storlekar som som standard är inställda på 24×24, 36×36 och 48×48 pixlar.

Dessa inställningar bör fungera bra för de flesta webbplatser, men du kan göra ikonerna större eller mindre genom att skriva in olika siffror för den 1:a, 2:a eller 3:e menybildstorleken.

När du lägger till ikoner i din meny ser du som standard ett fält för 'bild vid hovring'. Detta gör att du kan visa en annan ikon när besökaren för muspekaren över det menyalternativet.

Var bara medveten om att denna inställning endast är tillgänglig när du använder dina egna bilder. Du behöver inte oroa dig för funktionen 'bild vid hovring' om du planerar att använda dashIcons eller Font Awesome-ikoner.

Att visa en annan ikon kan hjälpa besökare att se var de befinner sig i navigeringsmenyn. Detta är särskilt användbart om din meny har många olika objekt. Du kan till exempel använda olika färger eller ikonstorlekar för att markera det aktuellt valda objektet.

Om du vill skapa olika hovringseffekter, se till att du markerar fältet 'Aktivera bilden vid hovring'.

När det är gjort, klicka på 'Spara ändringar' för att lagra dina inställningar.

För att lägga till ikoner i navigeringsmenyn, gå till sidan Utseende » Menyer. Som standard visar WordPress din webbplats primära meny.

Om du vill redigera en annan meny, öppna helt enkelt rullgardinsmenyn 'Välj en meny att redigera' och välj en meny från listan. Klicka sedan på 'Välj'.

Håll nu muspekaren över det första menyobjektet där du vill lägga till en ikon. När 'Menybild' visas, klicka på den.

Du kan nu bestämma om du vill använda din egen bild eller välja en färdig ikon, till exempel en Font Awesome-ikon.

För att använda en färdig ikon, klicka på radioknappen bredvid 'Ikoner'.

Du kan sedan klicka för att välja valfri dashicon eller Font Awesome-ikon.

Om du vill använda din egen bild, välj då radioknappen bredvid ‘Bild’ och klicka på länken ‘Ange bild’.

Du kan nu antingen välja en bild från WordPress mediebibliotek eller ladda upp en ny fil från din dator.

Om du har markerat ‘Aktivera bilden vid hovring’ i pluginets inställningar, måste du också klicka på ‘Ange bild vid hovring.’

Välj nu en bild att visa när användaren för muspekaren över detta menyalternativ.

Ibland kanske du vill ignorera den här inställningen och visa samma ikon oavsett vad. För att göra detta, klicka på ‘Ställ in bild vid hovring’ och välj sedan exakt samma ikon.

Om du inte väljer en bild kommer ikonen att försvinna helt när besökaren hovrar över den.

Öppna sedan rullgardinsmenyn Bildstorlek och välj en storlek från listan.

Att använda samma storlek för alla ikoner tenderar att göra att menyn ser mer organiserad ut. Ibland är det dock en bra idé att använda en större ikon för det viktigaste objektet.

Till exempel, om du har skapat en nätbutik med ett plugin som WooCommerce, kan du använda en större ikon för ‘Kassa’ så att den sticker ut.

När du är nöjd med ikonen är det dags att titta på menyalternativets etikett. Som standard visar pluginet titeln efter ikonen.

För att ändra detta, välj någon av radioknapparna i avsnittet 'Titelposition'.

Ett annat alternativ är att ta bort navigeringsetiketten helt och skapa en meny endast med ikoner. Om din meny har många objekt kan detta göra att den ser mindre rörig ut.

Du bör dock bara dölja etiketterna om det är uppenbart vad varje ikon betyder. Om det är oklart kommer besökare att ha svårt att navigera på din WordPress-blogg eller webbplats.

För att fortsätta och dölja etiketten, välj radioknappen bredvid 'Ingen'.

När du är nöjd med hur menyalternativet är inställt, klicka på ‘Spara ändringar.’

För att lägga till en ikon till andra menyalternativ, följ helt enkelt samma process som beskrivs ovan.

När du är klar, glöm inte att klicka på knappen 'Spara meny'. Nu, om du besöker din WordPress-webbplats, kommer du att se den uppdaterade navigeringsmenyn live.

Metod 2: Lägg till ikoner i WordPress-menyer med kod (mer anpassningsbar)

Du kan också lägga till bildikoner i dina navigeringsmenyer med hjälp av CSS.

På så sätt kan du exakt styra var ikonerna visas i dina menyer. Du kan också använda vilken bild som helst som ikon, så det är ett utmärkt sätt att lägga till din egen varumärkesprofil.

Innan du börjar, ladda upp alla bildfiler du vill använda som dina ikoner. Det kan vara lagerbilder, royaltyfria bilder du hittat online, eller anpassad grafik skapad med en app som Canva.

Efter att ha lagt till varje bild i WordPress mediebibliotek, se till att kopiera dess URL och klistra in den i en textredigerare som Anteckningar. Du kommer att behöva alla dessa länkar i nästa steg.

För att hitta en bilds URL, välj den helt enkelt i WordPress mediebibliotek och titta sedan på fältet ‘Fil-URL’.

För mer detaljerade instruktioner, se vår guide om hur man får URL:en för bilder du laddar upp i WordPress.

Därefter behöver du besöka sidan Utseende » Menyer från WordPress-instrumentpanelen.

Öppna sedan rullgardinsmenyn ‘Välj en meny att redigera’ och välj den meny där du vill lägga till bildikonerna.

Klicka sedan på ‘Välj’.

Aktivera sedan anpassade CSS-klasser genom att klicka på 'Skärmalternativ'.

I panelen som visas, markera rutan bredvid 'CSS-klasser'.

Med det gjort kan du lägga till anpassade CSS-klasser till valfritt objekt i navigeringsmenyn. Detta är hur du kommer att länka varje menyalternativ till en bild i WordPress mediebibliotek.

Du kan kalla dessa klasser vad du vill, men det är en bra idé att använda något som hjälper dig att identifiera menyalternativet.

För att komma igång, klicka helt enkelt på det första objektet du vill lägga till en bildikon till. I fältet 'CSS-klasser (valfritt)' skriver du in klassnamnet du vill använda.

Du kommer att använda dessa anpassade CSS-klasser i nästa steg, så anteckna dem i ditt Anteckningar eller liknande program.

Följ helt enkelt samma process för att lägga till en separat klass till alla dina menyalternativ. Klicka sedan på ‘Spara meny’ för att spara dina inställningar.

Nu är du redo att lägga till bildikoner i dina WordPress-navigeringsmenyer med CSS.

Ofta kommer WordPress-handledningar att säga åt dig att lägga till kodavsnitt i dina WordPress-temafiler. Att göra det kan dock orsaka vanliga WordPress-fel och är inte särskilt nybörjarvänligt.

Därför rekommenderar vi WPCode.

Det är det bästa pluginet för WordPress-kodavsnitt som används av över 1 miljon webbplatser och låter dig lägga till anpassad kod utan att redigera din temas functions.php-fil.

Det första du behöver göra är att installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Kodavsnitt » Lägg till kodavsnitt.

Detta tar dig till sidan 'Lägg till kodavsnitt', där du kan se WPCode's bibliotek med färdiga kodavsnitt. Dessa inkluderar kodavsnitt som låter dig förbättra din WordPress-säkerhet genom att inaktivera XML-RPC, ladda upp filtyper som WordPress inte stöder som standard, och mer.

Håll muspekaren över ‘Lägg till din anpassade kod’ och klicka sedan på ‘Använd kodavsnitt’ när det visas.

Till att börja med, skriv in en titel för det anpassade kodavsnittet. Detta kan vara vad som helst som hjälper dig att identifiera avsnittet i WordPress-instrumentpanelen.

När det är gjort, öppna rullgardinsmenyn 'Kodtyp' och välj 'CSS-utdrag'.

I kodredigeraren måste du lägga till lite kod för varje ikon du vill visa.

För att hjälpa dig har vi skapat ett exempelutdrag nedan. Du kan fortsätta och ändra '.carticon' till den anpassade CSS-klassen du skapade i föregående steg. Du kommer också att behöva ersätta URL:en med en länk till bilden i ditt WordPress mediebibliotek:

.carticon {
background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Du kommer att behöva justera utdraget ovan för varje enskild menyalternativ du skapade ovan.

När du är nöjd med din kod, scrolla till sektionen ‘Infogning’. WPCode kan lägga till kod på olika platser, som efter varje inlägg, endast frontend, eller endast admin.

För att använda den anpassade CSS-koden över hela din WordPress-blogg eller webbplats, klicka på ‘Automatisk infogning’ om den inte redan är vald.

Öppna sedan menyn ‘Plats’ och välj ‘Hela webbplatsens sidhuvud.’

Därefter är du redo att skrolla till toppen av skärmen och klicka på växlingsknappen 'Inaktiv' så att den ändras till 'Aktiv'.

Klicka slutligen på ‘Spara utdrag’ för att göra den anpassade CSS:en aktiv.

Nu, om du besöker din webbplats, kommer du att se alla bildikoner i din navigeringsmeny.

Beroende på ditt WordPress-tema kan du behöva justera CSS:en så att bildikonerna visas på exakt rätt plats. Om så är fallet, gå till Kodavsnitt » Kodavsnitt i WordPress-instrumentpanelen.

Håll sedan muspekaren över kodavsnittet och klicka på länken 'Redigera' när den visas.

Detta öppnar kodredigeraren, som är redo för dig att göra några ändringar.

Bonus: Lägg till ikoner för sociala medier i WordPress-menyer

Förutom menyikoner kan du också lägga till ikoner för sociala medier i din WordPress-navigeringsmeny. Att göra detta hjälper till att marknadsföra dina profiler på sociala medier på ett visuellt tilltalande sätt utan att ta upp för mycket plats på din webbplats.

För att göra detta kan du använda pluginet Menu Image. Efter aktivering, besök helt enkelt sidan Utseende » Menyer från WordPress-instrumentpanelen och expandera fliken ‘Anpassade länkar’ i den vänstra kolumnen.

Lägg sedan till URL:en för ditt ID på sociala medier och skriv namnet på plattformen. Klicka sedan på knappen 'Lägg till i meny'.

När profilen för sociala medier har lagts till som ett menyalternativ kommer den att visas på höger sida av skärmen.

Här måste du expandera fliken för objekten igen och klicka på knappen ‘Menu Image’.

Detta öppnar en ny ruta på skärmen där du kan klicka på länken 'Ange bild' för att ladda upp en ikon för sociala medier från ditt mediabibliotek.

Om du vill lägga till en förgjord ikon kan du välja alternativet 'Ikon' och lägga till din ikon för sociala medier från FontAwesome.

Klicka slutligen på knappen 'Spara ändringar' för att lagra dina inställningar.

Du har nu framgångsrikt lagt till en ikon för sociala medier i din navigeringsmeny. För mer information, se vår handledning om hur du lägger till ikoner för sociala medier i WordPress-menyer.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till bildikoner i din WordPress-navigeringsmeny. Du kan också gå igenom vår guide om hur du lägger till villkorlig logik i menyer i WordPress och hur du skapar en klibbig flytande navigeringsmeny i WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.