Så här lägger du till Imagely-ikoner i navigationsmenyer i WordPress

Under årens lopp har vi hjälpt tusentals läsare att anpassa sina webbplatser i WordPress för att förbättra både användarupplevelsen och det visuella intrycket. Från vår praktiska erfarenhet av webbdesign har vi lärt oss att lägga till bildikoner till WordPress navigationsmenyer 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 gränssnittet på din webbplats mer interaktivt och engagerande, vilket bidrar till att minska avvisningsfrekvensen.

I den här artikeln visar vi hur du enkelt kan add to image icons till navigation menus i WordPress.

Varför lägga till image icons med navigationsmenyer i WordPress?

Vanligtvis är WordPress navigations menyer länkar i plain text. Dessa länkar fungerar bra för de flesta webbplatser, men de ser inte alltid intressanta eller engagerande ut.

Genom att lägga till image-ikoner i navigationsmenyn kan du uppmuntra visitorerna att uppmärksamma menyn och utforska mer av din site.

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

Du kan till och med använda en image icon för att markera det viktigaste menu itemet, till exempel Checkout-länken på your online marketplace.

Genom att lyfta fram en call-to-action i menyn kan du ofta få fler registreringar, försäljningar, medlemmar och andra konverteringar.

Med detta sagt, låt oss se hur du kan add image icons till din navigation menu i WordPress. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

Metod 1: Add Image Icons till navigationsmenyer med hjälp av ett plugin (snabbt och enkelt)

Det enklaste sättet att add to icons till dina menyer i WordPress är att använda Menu Image. Detta plugin kommer med dashIcon icons som du kan add to med bara några clicks.

Om du har installerat Font Awesome på din website kan du enkelt lägga till dessa icons i din navigation menu med Menu Image. För mer information om hur du installerar Font Awesome, se vår guide om hur du enkelt lägger till icons i ditt WordPress-tema.

Ett annat alternativ är att använda images eller icons från mediabiblioteket i WordPress.

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

Efter aktivering klickar du på Menu Image i WordPress dashboard. På den här vyn kan du välja om du vill få aviseringar om säkerhet och utvalda funktioner eller klicka på knappen ”Hoppa över”.

Detta tar dig till en vy där du kan konfigurera plugins settings. Till att börja med ser du alla de olika storlekar du kan använda för image icons.

Om du har planer på att använda icons från Font Awesome eller dashicons, kommer Menu Image att resize dem automatiskt. Om du däremot använder images från mediabiblioteket måste du välja storlek manuellt.

Pluginet stöder standard WordPress image-storlekar, såsom thumbnails, images och large. Det addar också till tre unika storlekar som är inställda på 24×24, 36×36 och 48×48 pixlar som standard.

Dessa Settings bör fungera bra för de flesta websites, men you kan göra icons större eller mindre genom att skriva in olika siffror för 1st, 2nd, or 3rd Menu Image size.

När du lägger till icons i din menu kommer du som standard att se ett fält för ”image on hovering”. Detta allow you att visa en annan icon när besökaren hover över det menu-item.

Tänk bara på att den här inställningen bara är available när du använder dina egna images. Du behöver inte oroa dig för funktionen ”image on hover” om du planerar att använda dashIcons eller Font Awesome-ikoner.

Genom att visa en annan icon kan du hjälpa visitorerna att se var de befinner sig i navigation menu. Detta är viss användbart om din menu har många olika objekt. Du kan till exempel använda olika färger eller olika storlekar på icons för att markera det objekt som är valt.

Om du vill skapa olika hover-effekter, se då till att du kontrollerar ”Enable the image on hover field”.

När du har gjort det klickar du på ”Save Changes” för att lagra dina inställningar.

För att add icons till navigation menyn, head över till appearance ” Menus page. Som standard visar WordPress den primära menyn på din site.

Om du vill editera en annan meny öppnar du bara dropdown ”Select a menu to edit” och väljer en meny i listan. Därefter klickar du på ”Select”.

Nu hoverar du över det första menu-item där du vill add to en icon. När ”Menu Image” visas, gör du ett click.

You kan nu bestämma om du vill använda din egen image eller välja en färdig icon, till exempel en Font Awesome icon.

Om du vill använda en färdig ikon klickar du på alternativknappen bredvid ”Icons”.

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

Om du vill använda din egen image väljer du alternativknappen bredvid ”Image” och clickar på länken ”Set Image”.

Du kan nu antingen välja en image från mediabiblioteket i WordPress eller uppladare en new file från din dator.

Om du kontrollerade ”Enable the image on hover field” i pluginets settings, måste du också klicka på ”Set image on hover”.

Välj nu en image som ska visas när användaren hoverar över detta menu-item.

Ibland kanske du vill ignorera den här inställningen och visa samma icon oavsett vad som händer. För att göra detta klickar du på ”Set image on hover” och väljer sedan exakt samma icon.

Om du inte väljer en image kommer iconen att försvinna helt när besökaren hoverar över den.

Därefter öppnar du dropdown för Image Size och väljer en storlek från listan.

Om du använder samma storlek på alla icons ser menyn mer organiserad ut. Ibland är det dock en bra idé att använda en större icon för det viktigaste objektet.

Om du till exempel har skapat en butik med ett tillägg som WooCommerce kan du använda en större ikon för ”Checkout” så att den sticker ut.

När du är nöjd med ikonen är det dags att titta på etiketten för menu-item. Som standard visar pluginet titeln efter ikonen.

För att ändra detta väljer du någon av radioknapparna i section ”Rubrik position”.

Ett annat alternativ är att helt remove navigation label och skapa en meny med endast icons. Om din menu 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 otydligt kommer besökarna att ha svårt att navigera i din WordPress blogg eller webbplats.

Om du vill dölja etiketten väljer du alternativknappen bredvid ”None”.

När du är nöjd med hur menu-item är inställt klickar du på ”Save Changes”.

Om du vill add to en icon till andra menu items följer du samma process som beskrivs ovan.

När du är slutförd, glöm inte att clicka på knappen ”Save Menu”. Om du nu besöker din WordPress website kommer du att se den uppdaterade navigation menu live.

Metod 2: Add Icons till WordPress-menyer med hjälp av kod (mer anpassningsbar)

Du kan också add to image icons till dina navigation menus med hjälp av CSS.

På så sätt kan you control exakt var icons ska appear i your menus. Du kan också använda vilken image som helst som en icon, så det är ett bra sätt att add to your eget varumärke.

Innan du börjar, gå vidare och upload alla image-filer du vill använda som dina icons. Det kan vara stockfoton, royaltyfria images som du hittat på nätet eller customize-grafik som du skapat med en app som Canva.

När du har lagt till varje image i WordPress mediabibliotek, se till att du kopierar dess URL och klistrar in den i en textredigerare som Notepad. Du kommer att behöva all dessa links i nästa steg.

För att hitta URL:en till en image väljer du den i mediabiblioteket i WordPress och tittar sedan på fältet ”File URL”.

För mer detaljerade instruktioner, vänligen se vår guide om hur du får URL:en till bilder som du uploadar i WordPress.

Efter det måste du besöka sidan Appearance ” Menus från WordPress dashboard.

Öppna sedan dropdown ”Select a menu to edit” och välj den meny där du vill add to image icons.

Därefter går du vidare och klickar på ”Select”.

Därefter måste du aktivera custom CSS-klasser genom att clicka på ’Screen Options’.

I panelen som visas kontrollerar du boxen bredvid ”CSS Classes”.

När detta är gjort kan du add to custom CSS-klasser till alla objekt i navigationsmenyn. Så här kommer du att länka varje menu item till en image i WordPress mediabibliotek.

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

För att komma igång klickar du bara på det första objektet som du vill lägga till en image icon till. I fältet ”CSS Classes (optional)” skriver du in det klassnamn du vill använda.

Du kommer att använda dessa custom CSS-klasser i nästa steg, så gör en anteckning om dem i din Notepad eller liknande app.

Följ bara samma process för att add to en separat klass till alla dina menu items. Efter det klickar du på ”Save Menu” för att spara dina Settings.

Nu är du redo att add image icons till din WordPress navigation menyer med CSS.

Ofta kommer WordPress poradnikar att berätta för dig att lägga till fragment kodu till dina WordPress tema filer. Att göra det kan dock orsaka vanliga WordPress-fel och är inte särskilt nybörjarvänligt.

Det är därför vi rekommenderar WPCode.

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

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

Efter aktivering, head över till Code Snippets ” Add Snippet.

Detta kommer att ta dig till ”Add Snippet” page, där du kan se WPCodes bibliotek med färdiga snippets. Dessa inkluderar snippets som allow you att förbättra din WordPress-säkerhet genom att inaktivera XML-RPC, uploada filtyper som WordPress inte stöder som standard, och mer.

Bara hovera musen över ”Add Your Custom Code” och klicka sedan på ”Use snippet” när det dyker upp.

Till att börja med skriver du in en titel för det anpassade code snippet. Det kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.

När du har gjort det öppnar du dropdown ’Code Type’ och väljer ’CSS Snippet’.

I code editor måste du add to lite kod för varje icon du vill visa.

För att hjälpa dig har vi skapat ett exempel på ett snippet under. Du kan gå vidare och ändra ’.carticon’ till den custom CSS-klass som du skapade i föregående steg. Du måste också ersätta URL:en med en länk till imagen i ditt mediabibliotek i WordPress:

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

Du måste justera snippet ovan för varje enskilt menu item som du skapade ovan.

När du är nöjd med din kod rullar du till ”Insertion” section. WPCode kan add to kod på olika locations, till exempel efter varje post, endast front-end eller endast admin.

Om du vill använda den anpassade CSS-koden på hela din blogg eller website i WordPress klickar du på ”Auto Insert” om det inte redan är valt.

Öppna sedan dropdown-menyn ”Location” och välj ”Site Wide Header”.

Efter det är du redo att rulla högst upp på vyn och klicka på ”Inaktiverad” toggle så att den ändras till ”Aktiv”.

Slutligen klickar du på ”Save Snippet” för att göra custom CSS live.

Nu, om du besöker din website, ser du all image icons i din navigation menu.

Beroende på din WordPress tema kan du behöva modyfikacja CSS så att den visar bildikonerna på exakt rätt plats. Om så är fallet, gå till Kodfragment ” Kodfragment i adminpanelen i WordPress.

Sedan hoverar du bara över snippet och klickar på länken ”Edit” när den visas.

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

Bonus: Add Social Media Icons till WordPress-menyer

Förutom menyikoner kan du också add to social media ic ons till din navigation menu i WordPress. På så sätt kan du främja dina profiler på sociala medier på ett visuellt tilltalande sätt utan att ta upp för mycket utrymme på din site.

För att göra detta kan du använda Menu Image plugin. Efter aktivering, besök bara sidan Appearance ” Menus från WordPress dashboard och förstora fliken ’Custom Links’ i den vänstra kolumnen.

Sedan add to URL:en för ditt ID:n för social media och skriv namnet på plattformen. Klicka sedan på knappen ”Add to Menu”.

När profilen för social media har lagts till som ett menu item, kommer den att visas på höger sida av vyn.

Här måste du förstora tabben ”items” igen och clicka på knappen ”Menu-item”.

Detta öppnar en new prompt på vyn där du kan clicka på länken ”Set Image” för att uploada en social media icon från ditt mediabibliotek.

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

Slutligen klickar du på knappen ”Save Changes” för att lagra dina inställningar.

Du har nu utan problem add to en social media icon till din navigation menu. För mer information, se vår tutorial om hur du lägger till social media icons i WordPress menyer.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.