Så här addar du social media icons till WordPress-menyer (enkelt sätt)

Letar du efter ett sätt att add to social media icons till WordPress menyer?

Logotyperna för webbplatser som Facebook och Twitter känns omedelbart igen av människor över hela världen. Genom att lägga till dessa icons i dina menyer kan du främja dina profiler på sociala media på ett iögonfallande sätt som inte tar upp mycket utrymme.

I den här artikeln visar vi dig hur du add to social media icons till WordPress navigation menus.

Varför add to social media icons till menyer i WordPress?

Genom att lägga till ikoner för sociala medier på din website kan du uppmuntra människor att besöka dina olika konton på sociala medier. Detta kan ge dig fler följare och engagemang på Facebook, Twitter, Instagram och mer.

Ett alternativ är att add to social media icons till din WordPress sidebar eller ett liknande widget-ready area. Men när människor vill besöka en new page tittar de vanligtvis först på din navigation menu.

Genom att lägga till ikoner för sociala medier i dina WordPress-menyer kan du ofta få fler clicks, engagemang och följare i alla dina profiler på sociala medier.

Social media icons kan också fånga visitorens uppmärksamhet utan att lägga till extra text i dina menyer. This allows you to promote lots of different profiles in a small amount of space.

Med detta sagt, låt oss ta en titt på 2 nybörjarvänliga sätt att add to social media icons till WordPress menyer.

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

Metod 1: Använda tillägget Menu Image (rekommenderas)

Det enklaste sättet att add to social media icons till WordPress menyer är genom att använda Menu Image. Detta gratis plugin allow you to add image icons till your navigation menus, inklusive sociala ikoner.

När du skapar dina social icons kan du använda vilken image som helst som du har uploadat till mediabiblioteket i WordPress.

Till exempel tillhandahåller många av de högst upp företagen inom social media logotyper som du kan använda på din website, såsom Twitter brand toolkit. Du kan också downloada icons från onlinebibliotek som gillar Font Awesome website.

Menu Image integreras också med pluginet Font Awesome. Detta allow you att browsing och importera alla Font Awesome icons direkt från WordPress dashboard, inklusive icons för alla de stora sociala nätverken.

Vi rekommenderar att du installerar pluginet Font Awesome först innan du fortsätter med tutorialen. För detaljerade instruktioner om hur du konfigurerar Font Awesome, vänligen se vår guide om hur du enkelt lägger till icon fonts till ditt WordPress theme.

Oavsett hur du planerar att tillhandahålla icons för social media, måste du installera och aktivera Menu Image plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

När du har aktiverat kan du vilja ta en titt på storleken på icons och ändra dem om det behövs. För att göra detta måste du gå till Menu Image ” Menu Image.

När du skapar dina sociala icons kan du använda någon av WordPress standard bildstorlekar, till exempel thumbnail, image eller large. Menu Image låter dig också välja mellan tre unika storlekar som är inställda på 24×24, 36×36 och 48×48 pixlar som standard.

Dessa storlekar bör fungera bra för de flesta WordPress-webbplatser, men du kan ändra dem genom att skriva in olika siffror i fälten 1st, 2nd eller 3rd Menu Image.

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

För att add icons till en navigation menu, heada till Appearance ” Menus. Som standard visar WordPress den primära menyn på din site.

Om du vill add to social media icons till en annan menu location, så öppnar du bara dropdown ”Select a menu to edit”.

Du kan sedan välja en menu från listan och klicka på ”Select”.

För Step-by-Step-instruktioner om hur du skapar en ny meny, vänligen se vår guide om hur du lägger till en navigation menu i WordPress.

Till att börja med måste du add to varje social profil till din menu som en new link.

När du är klar klickar du på för att förstora sectionen ”Custom Links” och skriver sedan in adressen till den page på social media som du vill använda. Du kan till exempel enter URL:en till din Facebook-grupp eller YouTube-kanal.

You will also need to type in some ’Link Text’. I ett senare steg kommer du att ha möjlighet att ändra var den här rubriken visas i menyn eller till och med dölja den helt.

När du har gjort det klickar du på ”Add to Menu”.

Detta objekt kommer nu att visas i den högra colonnen.

För att add a social media icon, hoverar du bara över det nya menu-item.

Klicka sedan på knappen ”Menu Image” när den dyker upp.

Du kan nu välja om du vill använda en image från ditt mediabibliotek i WordPress eller en icon som tillhandahålls av Font Awesome.

Om du vill använda en färdig Font Awesome icon klickar du på alternativknappen bredvid ”Icon”.

Sedan väljer du ”Fontawesome”.

You can then click on ”Brands”.

Du kommer nu att se alla varumärkesikoner, inklusive ikoner för alla de stora sociala nätverken, från Facebook till LinkedIn. När du ser den image du vill använda är det bara att ge den ett click.

Ett annat alternativ är att använda din egen icon från mediabiblioteket i WordPress genom att välja alternativknappen ”Image”. Klicka sedan på länken ”Set Image”.

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

Oavsett varifrån du får ikonen kommer Menu Image att visa en preview till höger.

Du kan nu ändra om rubriken på länken ska visas ovan, under, före eller efter ikonen för sociala medier med hjälp av inställningarna för ”Rubrik position”.

Många social media icons är omedelbar igenkännliga, så länkens titel kan vara onödig. Om du lägger till många sociala icons i en navigation menu, kan titlar till och med få din menu att se mer rörig och komplicerad ut.

Med detta sagt kanske du vill dölja rubriken genom att välja alternativknappen ”Hide”.

När du gör ändringar uppdateras live preview automatiskt, så att du kan prova olika settings för att se vad som ser bäst ut.

Slutligen, om du använder din egen image, kan du resize ikonerna för social media med hjälp av ”Image Size” dropdown.

Större icons kommer att fånga besökarens uppmärksamhet, men de kan också vara distraherande. Med detta i åtanke kanske du vill prova olika storlekar för att se vad som fungerar bäst på din WordPress blogg.

När du är nöjd med hur ikonen för sociala media är inställd klickar du bara på ”Save Changes”.

Upprepa bara dessa steg för att add to fler icons till din WordPress menu.

Du kan även add icons till andra viktiga objekt i navigation menu. Till exempel kan du add icons till ditt kontaktformulär eller WooCommerce checkout page.

När du är nöjd med hur menyn är upplagd klickar du bara på ”Save Menu”.

Nu kan you besöka din website för att se de new social media icons in action.

Så här såg det ut på vår demo website.

Metod 2: Använda hela Site Editor (endast Block Themes)

WordPress har ett built-in Social Icons block som allow you att skapa en menu som innehåller social media icons och sedan displaya dem i en snygg layout.

Detta block kommer med built-in icons för alla de stora sociala nätverken, så du behöver inte installera ett plugin som Font Awesome eller ladda upp icons till ditt mediabibliotek.

Du kan dock bara add to social media icons och links till Social Icons blocket, så det är inte lika flexibelt som Menu Image plugin.

Om du använder ett block theme kan du add to ett Social Icons-block till vilken del som helst av din website, t.ex. header eller footer. På så sätt kan du visa en menu för social media på hela din website.

För att komma igång, heada över till Appearance ” Editor i WordPress dashpanelen.

Härifrån kommer du att se några menyer för att customize ditt block temas design.

Om du vill add to social media icons till din menu, click ’Navigation’.

Nästa steg är att clicka på pennans icon ’Edit’.

Detta öppnar WordPress Full Site Editor.

När du har gjort det kan du nu editera din navigation menu, som är en del av din WordPress header template.

Börja med att klicka på den blå ikonen ”+” högst upp till vänster. I sökfältet måste du skriva in ”Social Icons”.

När det rätta blocket appear, drag and drop det på templates.

För att add to den första iconen klickar du bara på ”+”-ikonen inuti blocket.

I popupen som visas skriver du in den icon som du vill add to, till exempel ”Twitter” eller ”Facebook”.

När rätt icon visas klickar du bara för att add to din WordPress blogg.

Klicka nu på den nya ikonen för social media.

Detta öppnar ett litet fält där du kan skriva in den URL som du vill länka till, gillar din Facebook page.

För att add to fler sociala icons i WordPress klickar du bara på ”+”-iconen och upprepar samma process som ovan.

När du har lagt till alla plattformar för sociala medier kanske du vill customize blocket. För att göra detta klickar du på för att selecta Social Icons block och klickar sedan på tabben ”Block”.

Du kan ändra iconens motivering, justering och orientering med hjälp av inställningarna för ”Layout”.

Som standard öppnas alla links till social media i samma tabs. Om du vill behålla besökarna på din website kan du klicka för att aktivera toggeln ”Öppna links i new tab”.

Som standard visar WordPress endast de sociala icons utan någon text.

Om du vill visa text bredvid varje icon, clickar du för att aktivera ”Show labels” toggle.

Klicka sedan på tabben ”Styles”.

Här kan du ändra stilen på knappen genom att clicka på ”Standard”, ”Endast loggor” eller ”Pill Shape”.

Slutligen kan du ändra avståndet mellan de sociala iconerna med hjälp av inställningarna under ”Block Spacing”.

När du är nöjd med hur menyn ser ut klickar du på knappen ”Save”.

Nu, om du besöker din website, kommer du att se icons för social media live.

Bonus tips: Embed Social Feeds på din site i WordPress

Att lägga till icons för sociala media till WordPress-menyer är ett bra sätt att få fler följare och engagemang på dina olika accounts. Det finns dock många fler sätt att främja dina Twitter-, Facebook- och andra sociala profiler.

Det bästa sättet att få fler följare och engagemang är att embeda ett live socialt feed på din website. Detta allow you to show the latest posts from your social media sites, along with buttons that visitors can use to engage with your posts or follow you on social media.

Det bästa sättet att add to social media feeds till din website är genom att använda Smash Balloon. Det är det bästa pluginet för sociala medier för WordPress och låter dig embedda live feeds från Twitter, Instagram, Facebook, och mer.

För mer information, vänligen se vår WordPress tutorial om hur man lägger till sociala media feeds till WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar icons för social media till WordPress menyer. Du kanske också vill se vår guide om hur man embedar ett Facebook videoklipp i WordPress eller se våra expertval för de bästa Twitter-tilläggen för 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.