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 göra din webbplats rörig. Dessa små, igenkännliga logotyper kan uppmuntra besökare att följa dig på olika plattformar, vilket potentiellt kan öka din närvaro och ditt engagemang online.
Vi har upptäckt att hur du lägger till ikoner för sociala medier i din meny i WordPress beror på om du använder ett klassiskt tema 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 dig hur du lägger till ikoner för sociala medier i WordPress-menyer, med metoder som fungerar för både klassiska teman och blockteman.
Varför add to social media icons till menyer i WordPress?
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.
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 behålla sitt utseende på olika enheter och skärmstorlekar.
Dessutom måste du se till att ikonerna är igenkännliga och har samma storlek, vilket kan vara en utmaning när du använder vanliga bildfiler.
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
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 menybildpluginet (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 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 lägga till ikoner för sociala medier på en annan plats i menyn, t.ex. i en flytande meny, öppnar du bara rullgardinsmenyn ”Välj en meny att redigera”.
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.
Du måste också skriva in lite ”länktext”. I ett senare steg har du möjlighet att ändra var den här titeln 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.
Note : Om du inte ser en knapp för ”Menu Image”, klicka då på ”Save Changes”. Nu ska knappen ”Menu Image” visas när du hoverar över något objekt i menyn.
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 lägga till ikoner för andra viktiga objekt i navigeringsmenyn och lyfta fram dessa menyobjekt för att fånga användarnas uppmärksamhet.
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 redigera och utforma din navigeringsmeny, som är en del av din WordPress-headermall.
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 lägger till ikoner för sociala medier i WordPress-menyer. Du kanske också vill läsa vår artikel om hur du skapar en rullgardinsmeny i WordPress och vår ultimata guide om hur du lägger till ett sökfält i din navigeringsmeny.
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.
Mrteesurez
Infact users find it easier when they see social icon to easily share the post they see beneficial to their friends. In addition, one can also use sassy social share plugin, it also featured rich, thanks.
Jiří Vaněk
The Menu Image plugin is fantastic. I actually wrote an article about it when I was dealing with the exact same issue. Creating a main ’Contact’ folder in the menu and adding a submenu with links to social networks along with icons—it works like magic. Previously, I used Font Awesome, and it was quite impractical. This is a much more elegant solution.
Ralph
As I love your article tutorials this time I only watched video and it was great! Short, no fluff and straight to the point. You guys should include more video tutorials. You are great at it and now I have new icons in my menu (not only for my socials). Thanks a lot!
Jonas
Thanks for this article, it helped me a lot!
WPBeginner Support
Glad our article was helpful!
Administratör
Farhad
Is there a way to have blog posts submitted to social media sites automatically?
Thank you.
WPBeginner Support
There are a few different options for that, you would want to start by taking a look at our article below:
https://www.wpbeginner.com/beginners-guide/how-to-automatically-post-to-facebook-from-wordpress/
Administratör
Jimmy Ekisa
Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.
Shyam
How to show icons of social profiles in footer?
WPBeginner Support
If your site has a widget area for your footer you could use one of the plugins from our list below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Administratör
Kerry
I’ve got the social media icons on my website. How do I link those icons to my social media profiles?
WPBeginner Support
You would have the menu items be custom URLs
Administratör
Vicki
Thanks for this, I’ve managed to add the Goodreads logo to my Social Menu and chose the Social Menu location too. However when I view the page it shows the magnifying glass next to the new Goodreads logo, rather than just the logo on it’s own – why is this and how do I get rid of it?
WPBeginner Support
You would want to check with your theme’s support to see if this is due to the design of the theme itself.
Administratör
Danielle
I added the social media menu but it’s not showing on my site. What can I do?
WPBeginner Support
We would first recommend reaching out to the plugin’s support for them to take a look and ensure this isn’t a hiccup with the plugin.
Administratör
Lisa Jackson
Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?
WPBeginner Support
It would depend on your specific theme, you would first want to check with your theme’s support to ensure it is not an issue with how their menu is styled that could be causing that.
Administratör
andi moss
What? No icons? Find our own?
WPBeginner Support
We do not have a specific set we would recommend at the moment but there are many different options available depending on the style you’re looking for.
Administratör
Bob Wright
Setting up a social link on my site does not match the images in this article (perhaps our parent organization’s customization blocks that).
WPBeginner Support
You would want to ensure you are an admin user and the site is on WordPress.org for the most likely reasons. You can see our comparison in our guide below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administratör
Ankit
Hi,
Once again, a great and helpful tutorial. I’m just facing one issue, though. For the last step, when I try to select the menu location option, I can only see the primary menu option there. How do I get the social menu option as well?
WPBeginner Support
Your specific theme may not have a social specific menu location. If you reach out to your theme’s support they can clarify and assist.
Administratör
Jonathan
I’m trying to get my head round how to add social media accounts to my WordPress blogsite. Any assistance appreciated. If I’ve skipped an earlier step in setting up the site, my apologies in advance for a stupid comment!
WPBeginner Support
No worries, it depends on what you’re looking for. For a starting point, we would recommend taking a look at our recommended plugins below:
https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
Administratör
Elder Designer
amazing tutorial keep it up
WPBeginner Support
Glad you found our guide helpful
Administratör
Stephanie Strand
Thank you! Very clear instructions. Helped this newbie enormously.
WPBeginner Support
Glad our guide was helpful
Administratör
Rupali Tripathi
Thank you so very much for this video.
WPBeginner Support
You’re welcome
Administratör
Debbie Serjeant
Icons are appearing without color … wonder what I did wrong?
WPBeginner Support
You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.
Administratör
Isaac
Hello, is there a way to space the icons farther apart from one another? Mine seem to be too close to each other…. Thank you
WPBeginner Support
That would normally require changing CSS, for a starting point you may want to take a look at our article here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administratör
Sam Simson
I tried to hide the title from being shown on the menu. Seems like that function didn’t work. the title is still visible.
WPBeginner Support
You would want to check with the support for your specific theme to see if that would be overriding your customizations
Administratör
Tracy
Hi! I tried using this method but I didn’t get the ”select image” part. I only get to introduce the URL and Navigation Label… any ideas?
WPBeginner Support
You may want to ensure the plugin was fully installed and activated for the select image to appear
Administratör
Lea
Thank you! Seems to be a better working solution than with font awesome! Is it allowed though to just use a e.g. facebook icon picture from google pictures then for the image I upload?
WPBeginner Support
You would want to be sure to check the image usage rights if you take an image off of Google but if you are allowed to use it you could upload it to your site.
Administratör
Larry Hilton
I followed the directions for adding social images to my footer area and the Google & Yelp images aren’t visible. I did them the same way as those displayed. This does not appear to be browser related. Any suggestions
WPBeginner Support
Start by reaching out to the plugin’s support to ensure there aren’t any known issues with those icons or how the menu is being added
Administratör
Michele A
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
WPBeginner Support
Glad our guide could help
Administratör
Muneeb
Icons are currently on the site but don’t work even link is added. whats the reason?
WPBeginner Support
If the urls are structured properly then you would want to let the plugin’s support know about your error to take a look if the error is with the plugin itself.
Administratör
Mr. Debtsmith
Hi guys,
Installed the plug in. Added 3 social accounts and clicked ”Main Nav” location box. The widget replaced the existing main menu instead of being added to it, and instead of the icons showing, the social account titles show instead. I’m looking forward to the benefits of this plug in. Hope you guys can help.
Thanks!
WPBeginner Support
You would want to let the plugin’s support know: https://wordpress.org/support/plugin/menu-image and they should be able to see if this is an error with the plugin itself.
Administratör
ARPIT
Thank You Very Much for Essential Information that I was Seeking on the Internet.
Highly Appreciated.
WPBeginner Support
Glad our article could be helpful to you.
Administratör
Dan
My current theme has social media icons on the main top header in the desktop version, but when switched to mobile version the social icons are gone. how can I get them to stay and possibly my header links also?
WPBeginner Support
Hi Dan,
It seems like your theme hides them on the mobile version. Please contact your theme author and they will be able to help you with this.
Administratör
David Cornish
Thanks for the advice, I use Simple Social Icons now and I like them very much. Any advice on what plugin to use to display a “share on twitter” or “share on facebook” button above and/or below a post, similar to what you have under the title of this article?
WPBeginner Support
Hi David,
Please see our list of the best social media plugins for WordPress.
Administratör
Rob Lilley
Is there a way to add a target attribute, so the social page opens in a new tab/window?
Editorial Staff
Yes, you can easily open the links in a new window. If you’re not seeing the option in your Custom Links by default, then you will have to click on the ”Screen Options” tab on the top right of the screen and make sure that ”Link Target” option is checked.
Administratör
Umarbhatti
Hi,
This plugin looks awesome. Thanks!
Aman Singh
Hello,
Can I get the custom code for the widget to look similar to what it is on WPbeginner?
I like the widget look for social media icons on WPBeginner so can I get the code.
Thank you.
WPBeginner Support
Hi Aman,
You can just use your browser’s Inspect tool to copy the HTML code and CSS.
Administratör