Att lägga till ikoner för sociala medier i din WordPress-meny är ett smart sätt att marknadsföra dina profiler utan att överbelasta din webbplats. Dessa små, igenkännbara logotyper kan uppmuntra besökare att följa dig på olika plattformar, vilket potentiellt kan öka din online-närvaro och engagemang.
Vi har upptäckt att med WordPress beror hur du lägger till ikoner för sociala medier i din meny på om du använder ett klassiskt eller ett blocktema. Men vi har hittat effektiva sätt att göra detta för båda typerna av teman.
I den här artikeln visar vi hur du lägger till ikoner för sociala medier i WordPress-menyer, med metoder som fungerar för både klassiska och blockteman.
Varför lägga till ikoner för sociala medier i menyer i WordPress?
Genom att lägga till ikoner för sociala medier i dina WordPress-menyer kan du ofta få fler klick, engagemang och följare på alla dina sociala medieprofiler.
Ikoner för sociala medier kan också fånga besökarens uppmärksamhet utan att lägga till extra text i dina menyer. Detta gör att du kan marknadsföra många olika profiler på en liten yta.
Processen för att lägga till ikoner för sociala medier skiljer sig från att infoga bildikoner i din WordPress-meny. Det beror på att dessa bilder måste länkas till dina sociala profiler, och de kräver ofta speciell styling för att bibehålla sitt utseende på olika enheter och skärmstorlekar.
Dessutom vill du säkerställa att dessa ikoner är igenkännbara och har konsekvent storlek, vilket kan vara utmanande när du använder vanliga bildfiler.
Med det sagt, låt oss titta på 2 nybörjarvänliga sätt att lägga till ikoner för sociala medier i WordPress-menyer.
Videohandledning
Om du föredrar skriftliga instruktioner, fortsätt bara att läsa. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:
- Metod 1: Använda Menybild-pluginet (endast klassiska teman)
- Method 2: Using the Full Site Editor (Block Themes Only)
Metod 1: Använda Menybild-pluginet (endast klassiska teman)
Det enklaste sättet att lägga till ikoner för sociala medier i WordPress-menyer är att använda Menu Image.
När du skapar dina sociala ikoner kan du använda vilken bild som helst som du har laddat upp till WordPress mediebibliotek.
Till exempel tillhandahåller många av de största sociala mediebolagen logotyper som du kan använda på din webbplats, som Twitters varumärkesverktygslåda. Du kan också ladda ner ikoner från onlinebibliotek som Font Awesome-webbplatsen.
Menybild integreras också med Font Awesome-pluginet. Detta gör att du kan bläddra och importera alla Font Awesome-ikoner direkt från WordPress-instrumentpanelen, inklusive ikoner för alla stora sociala nätverk.
Vi rekommenderar att du installerar Font Awesome-plugin först innan du fortsätter med handledningen. För detaljerade instruktioner om hur du ställer in Font Awesome, se vår guide om hur du enkelt lägger till ikonfonter i ditt WordPress-tema.
Oavsett hur du planerar att tillhandahålla ikonerna för sociala medier, måste du 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.
Efter aktivering kan du vilja titta på ikonstorlekarna och ändra dem om det behövs. För att göra detta måste du gå till Menybild » Menybild.
När du skapar dina sociala ikoner kan du använda någon av standardstorlekarna för WordPress-bilder, som miniatyrbild, bild eller stor. Menybild låter dig också välja mellan tre unika storlekar som som standard är inställda på 24×24, 36×36 och 48×48 pixlar.
Dessa storlekar bör fungera bra för de flesta WordPress-webbplatser, men du kan ändra dem genom att skriva in olika siffror i det 1:a, 2:a eller 3:e fältet för Menybild.
När det är gjort, klicka på 'Spara ändringar' för att lagra dina inställningar.
För att lägga till ikoner i en navigeringsmeny, gå till Utseende » Menyer. Som standard visar WordPress din webbplats primära meny.
Om du vill lägga till ikoner för sociala medier till en annan menyplats, som en klibbig flytande meny, öppna då bara rullgardinsmenyn 'Välj en meny att redigera'.
Du kan sedan välja en meny från listan och klicka på 'Välj'.
För steg-för-steg-instruktioner om hur du skapar en ny meny, se vår guide om hur du lägger till en navigeringsmeny i WordPress.
Till att börja med måste du lägga till varje social profil i din meny som en ny länk.
När du är redo, klicka för att expandera sektionen 'Anpassade länkar' och skriv sedan in adressen till den sociala mediesida du vill använda. Du kan till exempel ange URL:en till din Facebook-grupp eller YouTube-kanal.
Du måste också skriva in lite 'Länktext'. I ett senare steg får du möjlighet att ändra var denna titel visas i menyn eller till och med dölja den helt.
När det är gjort, klicka på 'Lägg till i meny'.
Detta objekt kommer nu att visas i kolumnen till höger.
För att lägga till en ikon för sociala medier, hovra helt enkelt över det nya menyalternativet.
Klicka sedan på knappen 'Menu Image' när den visas.
Notera: Om du inte ser en knapp för ‘Menybild’, klicka sedan på ‘Spara ändringar’. Nu bör knappen ‘Menybild’ visas när du för muspekaren över ett objekt i menyn.
Du kan nu välja om du vill använda en bild från ditt WordPress-mediabibliotek eller en ikon från Font Awesome.
För att använda en färdig Font Awesome-ikon, klicka på radio-knappen bredvid 'Ikon'.
Välj sedan 'Fontawesome'.
Du kan sedan klicka på 'Varumärken'.
Du kommer nu att se alla varumärkesikoner, inklusive ikoner för alla stora sociala nätverk, från Facebook till LinkedIn. När du ser bilden du vill använda, klickar du bara på den.
Ett annat alternativ är att använda din egen ikon från WordPress mediebibliotek genom att välja radio-knappen 'Bild'. Klicka sedan 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.
Oavsett var du får ikonen ifrån, kommer Menu Image att visa en förhandsgranskning till höger.
Du kan nu ändra om länktiteln visas ovanför, under, före eller efter ikonen för sociala medier med hjälp av inställningarna för 'Titelposition'.
Många ikoner för sociala medier är omedelbart igenkännbara, så länktiteln kan vara onödig. Om du lägger till många sociala ikoner i en navigeringsmeny kan titlar till och med få din meny att se mer rörig och komplicerad ut.
Med det sagt, kanske du vill dölja titeln genom att välja radioknappen 'Dölj'.
När du gör ändringar uppdateras förhandsgranskningen automatiskt, så du kan prova olika inställningar för att se vad som ser bäst ut.
Slutligen, om du använder din egen bild, kan du ändra storlek på ikonerna för sociala medier med rullgardinsmenyn 'Bildstorlek'.
Större ikoner kommer att fånga besökarens uppmärksamhet, men de kan också vara distraherande. Med detta i åtanke kan du 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 medier är inställd, klicka helt enkelt på 'Spara ändringar'.
Upprepa helt enkelt dessa steg för att lägga till fler ikoner i din WordPress-meny.
Du kan till och med lägga till ikoner till andra viktiga objekt i navigeringsmenyn och markera dessa menyobjekt för att dra dina användares uppmärksamhet.
När du är nöjd med hur menyn är inställd, klicka bara på 'Spara meny'.
Nu kan du besöka din webbplats för att se de nya ikonerna för sociala medier i aktion.
Så här såg det ut på vår demonstrationswebbplats.
Metod 2: Använda Full Site Editor (endast blockteman)
WordPress har ett inbyggt block för sociala ikoner som låter dig skapa en meny som innehåller ikoner för sociala medier och sedan visa dem i en snygg layout.
Detta block levereras med inbyggda ikoner för alla stora sociala nätverk, så du behöver inte installera ett plugin som Font Awesome eller ladda upp ikoner till ditt mediebibliotek.
Du kan dock bara lägga till ikoner och länkar för sociala medier till blocket 'Sociala ikoner', så det är inte lika flexibelt som pluginet Menybild.
Om du använder ett blocktema, kan du lägga till ett block för sociala ikoner var som helst på din webbplats, till exempel i sidhuvudet eller sidfoten. På så sätt kan du visa en meny med sociala medier över hela din webbplats.
För att komma igång, gå till Utseende » Redigerare i WordPress-instrumentpanelen.
Här ser du menyer för att anpassa din blocktemas design.
För att lägga till ikoner för sociala medier i din meny, klicka på 'Navigation'.
Nästa steg är att klicka på pennikonen för att 'Redigera'.
Detta öppnar WordPress Full Site Editor.
Med det gjort kan du nu redigera och styla din navigeringsmeny, som är en del av din WordPress-sidhuvudsmall.
För att börja, klicka på den blå '+' ikonen i det övre vänstra hörnet. I sökfältet måste du skriva in 'Sociala ikoner'.
När rätt block visas, dra och släpp det på temamallen.
För att lägga till den första ikonen, klicka bara på ikonen '+' inuti blocket.
I popup-fönstret som visas, skriv in ikonen du vill lägga till, som 'Twitter' eller 'Facebook'.
När rätt ikon visas, klicka helt enkelt för att lägga till den i din WordPress-blogg.
Klicka nu på den nya ikonen för sociala medier.
Detta öppnar en liten stapel där du kan skriva in URL:en du vill länka till, som din Facebook-sida.
För att lägga till fler sociala ikoner i WordPress, klicka bara på ikonen '+' och upprepa samma process som beskrivs ovan.
Efter att ha lagt till alla sociala medieplattformar kanske du vill anpassa blocket. För att göra detta, klicka för att välja blocket med sociala ikoner och klicka sedan på fliken 'Block'.
Du kan ändra ikonens motivering, justering och orientering med hjälp av inställningarna för 'Layout'.
Som standard öppnas alla länkar till sociala medier i samma flik. För att behålla besökare på din webbplats kanske du vill klicka för att aktivera växlingsknappen 'Öppna länkar i ny flik'.
Som standard visar WordPress bara ikonerna för sociala medier, utan någon text.
Om du vill visa text bredvid varje ikon, klicka för att aktivera växlingsknappen 'Visa etiketter'.
Klicka sedan på fliken 'Stilar'.
Här kan du ändra knappstilen genom att klicka på 'Standard', 'Endast logotyper' eller 'Pill Shape'.
Slutligen kan du ändra utrymmet mellan ikonerna för sociala medier med hjälp av inställningarna under 'Blockavstånd'.
När du är nöjd med hur menyn ser ut, klicka på knappen 'Spara'.
Nu, om du besöker din webbplats, kommer du att se ikonerna för sociala medier live.
Bonustips: Bädda in sociala flöden på din WordPress-webbplats
Att lägga till ikoner för sociala medier i WordPress-menyer är ett utmärkt sätt att få fler följare och engagemang på dina olika konton. Det finns dock många fler sätt att marknadsföra din Twitter, Facebook och andra sociala profiler.
Det bästa sättet att få fler följare och engagemang är att bädda in ett live socialt flöde på din webbplats. Detta gör att du kan visa de senaste inläggen från dina sociala medier, tillsammans med knappar som besökare kan använda för att interagera med dina inlägg eller följa dig på sociala medier.
Det bästa sättet att lägga till flöden från sociala medier på din webbplats är att använda Smash Balloon. Det är bästa plugin för sociala medieflöden för WordPress och låter dig bädda in liveflöden från Twitter, Instagram, Facebook och mer.
För mer information, se vår WordPress-handledning om hur du lägger till dina sociala medieflöden i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till ikoner för sociala medier i WordPress-menyer. Du kanske också vill se vår artikel om hur man skapar en rullgardinsmeny i WordPress och vår ultimata guide om att lägga till en sökfält i din navigeringsmeny.
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.
Mrteesurez
Faktum är att användare tycker att det är lättare när de ser sociala ikoner för att enkelt dela inlägg som de anser vara fördelaktiga för sina vänner. Dessutom kan man också använda sassy social share-plugin, det är också funktionsrikt, tack.
Jiří Vaněk
Menu Image-pluginnet är fantastiskt. Jag skrev faktiskt en artikel om det när jag hade exakt samma problem. Att skapa en huvudmapp 'Kontakt' i menyn och lägga till en undermeny med länkar till sociala nätverk tillsammans med ikoner – det fungerar som magi. Tidigare använde jag Font Awesome, och det var ganska opraktiskt. Detta är en mycket mer elegant lösning.
Mrteesurez
Bra jobbat, Jirí. Tack för din rekommendation och för att du delar med dig av vad som fungerar för dig. Jag har inte övat på att skapa en huvudmapp 'Kontakt' i menyn med undermenyer som länkar till sociala nätverk. Jag ska försöka implementera dessa. Tack.
Jiří Vaněk
Hej Mrteesurez,
Ja, det här pluginet är verkligen användbart. Det hjälpte mig i princip att förbättra den grafiska designen av menyn. Du borde definitivt prova det. Var bara försiktig, för det sätt jag ställde in menyn på och beskrev i min tidigare artikel visade sig inte vara den bästa lösningen enligt Google. Jag hade ett huvudobjekt "Kontakt" med en undermeny, men i mitt fall var själva "Kontakt"-objektet inte klickbart. Det innehöll bara en # istället för en länk. Jag rekommenderar, om du vill använda samma metod som jag, att göra alla objekt klickbara och leda till en sida. På så sätt kan du undvika samma misstag som jag gjorde och kritiken från Page Speed Insight att "Kontakt"-objektet inte är en länk som leder någonstans.
Mrteesurez
Tack för din oro! Jag uppskattar att du delar med dig av din erfarenhet av pluginet och Google-rekommendationen. Jag kommer definitivt att följa ditt råd att göra alla menyalternativ klickbara för att undvika problem. Din insikt är verkligen hjälpsam, och jag kommer att ha den i åtanke när jag konfigurerar mina menyer.
Ralph
Eftersom jag älskar dina artikelhandledningar den här gången tittade jag bara på videon och den var jättebra! Kort, utan fluff och rakt på sak. Ni borde inkludera fler videohandledningar. Ni är jättebra på det och nu har jag nya ikoner i min meny (inte bara för mina sociala medier). Tack så mycket!
Jonas
Tack för den här artikeln, den hjälpte mig mycket!
WPBeginner Support
Glad att vår artikel var till hjälp!
Admin
Farhad
Finns det ett sätt att blogginlägg skickas till sociala medier automatiskt?
Tack.
WPBeginner Support
Det finns några olika alternativ för det, du vill börja med att titta på vår artikel nedan:
https://014.leahstevensyj.workers.dev/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
Admin
Jimmy Ekisa
Strålande artikel!!! Du räddade mig tid att skapa sociala menyer och lägga till dem i NewsPack Themes header, tack så mycket.
Shyam
Hur visar man ikoner för sociala profiler i sidfoten?
WPBeginner Support
Om din webbplats har ett widgetområde för din sidfot kan du använda ett av plugin-programmen från vår lista nedan:
https://014.leahstevensyj.workers.dev/plugins/best-social-media-plugins-for-wordpress/
Admin
Kerry
Jag har lagt till sociala medieikoner på min webbplats. Hur länkar jag dessa ikoner till mina sociala medieprofiler?
WPBeginner Support
Du skulle vilja att menyalternativen är anpassade URL:er
Admin
Vicki
Tack för detta, jag har lyckats lägga till Goodreads-logotypen i min Sociala meny och valt platsen för den Sociala menyn också. Men när jag tittar på sidan visas förstoringsglaset bredvid den nya Goodreads-logotypen, snarare än bara logotypen ensam – varför är det så och hur blir jag av med det?
WPBeginner Support
Du bör kontrollera med ditt temas support för att se om detta beror på själva temat.
Admin
Danielle
Jag lade till menyn för sociala medier men den visas inte på min webbplats. Vad kan jag göra?
WPBeginner Support
Vi skulle först rekommendera att du kontaktar pluginets support så att de kan titta på det och säkerställa att det inte är ett problem med pluginet.
Admin
Lisa Jackson
Älskar detta, men ikonerna visas i en kolumn snarare än bredvid varandra. Hur kan jag fixa detta?
WPBeginner Support
Det skulle bero på ditt specifika tema, du skulle först vilja kontrollera med ditt temas support för att säkerställa att det inte är ett problem med hur deras meny är stylad som kan orsaka det.
Admin
andi moss
Vad? Inga ikoner? Ska vi hitta egna?
WPBeginner Support
Vi har ingen specifik uppsättning vi skulle rekommendera just nu, men det finns många olika alternativ tillgängliga beroende på vilken stil du letar efter.
Admin
Bob Wright
Att ställa in en social länk på min webbplats matchar inte bilderna i den här artikeln (kanske vår moderorganisations anpassningar blockerar det).
WPBeginner Support
Du vill säkerställa att du är administratör och att webbplatsen körs på WordPress.org för de mest troliga anledningarna. Du kan se vår jämförelse i vår guide nedan:
https://014.leahstevensyj.workers.dev/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Ankit
Hej,
Återigen, en bra och hjälpsam handledning. Jag stöter dock på ett problem. För det sista steget, när jag försöker välja alternativet för menyplats, ser jag bara alternativet för primärmenyn där. Hur får jag även alternativet för social meny?
WPBeginner Support
Ditt specifika tema kanske inte har en plats för en social meny. Om du kontaktar ditt temas support kan de klargöra och hjälpa till.
Admin
Jonathan
Jag försöker förstå hur jag lägger till konton för sociala medier på min WordPress-blogg. All hjälp uppskattas. Om jag har hoppat över ett tidigare steg i installationen av webbplatsen, ber jag om ursäkt i förväg för en dum kommentar!
WPBeginner Support
Inga problem, det beror på vad du letar efter. Som en utgångspunkt rekommenderar vi att du tittar på våra rekommenderade plugins nedan:
https://014.leahstevensyj.workers.dev/plugins/best-social-media-plugins-for-wordpress/
Admin
Elder Designer
fantastisk handledning fortsätt så
WPBeginner Support
Glad you found our guide helpful
Admin
Stephanie Strand
Tack! Mycket tydliga instruktioner. Hjälpte denna nybörjare enormt.
WPBeginner Support
Glad our guide was helpful
Admin
Rupali Tripathi
Tack så mycket för den här videon.
WPBeginner Support
You’re welcome
Admin
Debbie Serjeant
Ikoner visas utan färg... undrar vad jag gjorde fel?
WPBeginner Support
Du kanske vill kontrollera med supporten för ditt specifika tema för att säkerställa att det inte finns CSS som är specifik för temat som ändrar dina färger.
Admin
Isaac
Hej, finns det ett sätt att sprida ut ikonerna längre ifrån varandra? Mina verkar vara för nära varandra... Tack
WPBeginner Support
Det skulle normalt kräva att man ändrar CSS, som en startpunkt kanske du vill titta på vår artikel här:
https://014.leahstevensyj.workers.dev/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Sam Simson
Jag försökte dölja titeln från att visas i menyn. Det verkar som att den funktionen inte fungerade. Titeln är fortfarande synlig.
WPBeginner Support
Du bör kontrollera med supporten för ditt specifika tema för att se om det skulle åsidosätta dina anpassningar.
Admin
Tracy
Hej! Jag försökte använda den här metoden men jag fick inte "välj bild"-delen. Jag kan bara ange URL:en och navigeringsetiketten... några idéer?
WPBeginner Support
Du kanske vill säkerställa att pluginet installerades och aktiverades fullständigt för att den valda bilden ska visas
Admin
Lea
Tack! Verkar vara en bättre fungerande lösning än med font awesome! Är det dock tillåtet att bara använda en t.ex. facebook-ikonbild från Google-bilder då för bilden jag laddar upp?
WPBeginner Support
Du vill vara säker på att kontrollera bildrättigheterna om du tar en bild från Google, men om du får använda den kan du ladda upp den till din webbplats.
Admin
Larry Hilton
Jag följde instruktionerna för att lägga till sociala bilder i mitt sidfotsområde och Google & Yelp-bilderna är inte synliga. Jag gjorde dem på samma sätt som de som visas. Detta verkar inte vara relaterat till webbläsaren. Några förslag?
WPBeginner Support
Börja med att kontakta pluginets support för att säkerställa att det inte finns några kända problem med dessa ikoner eller hur menyn läggs till.
Admin
Michele A
Tack för den här underbara handledningen!! Den har hjälpt mig mer än ord kan beskriva. Tack!
WPBeginner Support
Glad our guide could help
Admin
Muneeb
Ikonerna finns för närvarande på webbplatsen men fungerar inte ens om länken är tillagd. Vad är anledningen?
WPBeginner Support
Om URL:erna är korrekt strukturerade då vill du låta pluginets support veta om ditt fel för att titta på om felet ligger hos pluginet självt.
Admin
Mr. Debtsmith
Hej grabbar,
Installerat tillägget. Lagt till 3 sociala konton och klickat i rutan för platsen 'Huvudnavigering'. Widgeten ersatte den befintliga huvudmenyn istället för att läggas till den, och istället för att ikonerna visas, visas titlarna för de sociala kontona istället. Jag ser fram emot fördelarna med detta tillägg. Hoppas ni kan hjälpa till.
Tack!
WPBeginner Support
Du bör meddela pluginets support: https://wordpress.org/support/plugin/menu-image och de bör kunna se om det är ett fel med själva pluginet.
Admin
ARPIT
Tack så mycket för viktig information som jag sökte på internet.
Värdesätts högt.
WPBeginner Support
Glad att vår artikel kunde vara till hjälp för dig.
Admin
Dan
Mitt nuvarande tema har ikoner för sociala medier i den övre huvudrubriken i skrivbordsversionen, men när den växlas till mobilversionen försvinner ikonerna för sociala medier. Hur kan jag få dem att stanna kvar och eventuellt mina länkar i rubriken också?
WPBeginner Support
Hej Dan,
Det verkar som att ditt tema döljer dem i mobilversionen. Vänligen kontakta din temautvecklare så kan de hjälpa dig med detta.
Admin
David Cornish
Tack för rådet, jag använder Simple Social Icons nu och jag gillar dem väldigt mycket. Några råd om vilket plugin man ska använda för att visa en "dela på Twitter" eller "dela på Facebook"-knapp ovanför och/eller under ett inlägg, liknande det du har under titeln på den här artikeln?
WPBeginner Support
Hej David,
Se vår lista över de bästa sociala medie-pluginsen för WordPress.
Admin
Rob Lilley
Finns det ett sätt att lägga till ett målattribut, så att den sociala sidan öppnas i en ny flik/fönster?
Redaktionell personal
Ja, du kan enkelt öppna länkarna i ett nytt fönster. Om du inte ser alternativet i dina anpassade länkar som standard, måste du klicka på fliken "Skärmalternativ" längst upp till höger på skärmen och se till att alternativet "Länkmål" är markerat.
Admin
Umarbhatti
Hej,
Det här pluginet ser fantastiskt ut. Tack!
Aman Singh
Hej,
Kan jag få anpassad kod för widgeten så att den ser ut ungefär som på WPbeginner?
Jag gillar widgetutseendet för sociala medieikoner på WPBeginner, så kan jag få koden.
Tack.
WPBeginner Support
Hej Aman,
Du kan bara använda din webbläsares Inspektera-verktyg för att kopiera HTML-koden och CSS.
Admin