Szukasz sposobu na dodanie ikonek mediów społecznościowych do menu WordPress?
Logo witryn takich jak Facebook i Twitter są natychmiast rozpoznawane przez ludzi na całym świecie. Dodając te ikonki do twojego menu, możesz promować swoje profile w mediach społecznościowych w przyciągający wzrok sposób, który nie zajmuje dużo miejsca.
W tym artykule pokażemy, jak dodać ikonki mediów społecznościowych do menu nawigacyjnego WordPress.
Dlaczego warto dodawać ikonki mediów społecznościowych do menu w WordPress?
Dodając ikonki mediów społecznościowych do twojej witryny internetowej, możesz zachęcić ludzi do przejścia na twoje różne konta w mediach społecznościowych. Może to zwiększyć liczbę obserwujących i zaangażowanie na Facebooku, Twitterze, Instagramie i nie tylko.
Jedną z opcji jest dodanie ikonek mediów społecznościowych do twojego panelu bocznego WordPress lub podobnego obszaru gotowego na widżet. Jednak gdy ludzie chcą przejść na nową stronę, zazwyczaj najpierw patrzą na twoje menu nawigacyjne.
Dodając ikonki mediów społecznościowych do menu WordPress, możesz często uzyskać więcej kliknięć, zaangażowania i obserwujących na wszystkich twoich profilach w mediach społecznościowych.
Ikonki mediów społecznościowych mogą również przyciągnąć uwagę odwiedzającego bez dodawania dodatkowego tekstu do twojego menu. Pozwala to promować wiele różnych profili na niewielkiej przestrzeni.
Biorąc to pod uwagę, przyjrzyjmy się 2 przyjaznym dla początkujących sposobom dodawania ikonek mediów społecznościowych do menu WordPress.
Film instruktażowy
Jeśli wolisz instrukcje pisemne, czytaj dalej. Skorzystaj z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:
Metoda 1: Korzystanie z wtyczki Menu Image (zalecane)
Najprostszym sposobem na dodanie ikonek mediów społecznościowych do menu WordPress jest użycie Menu Image. Ta darmowa wtyczka umożliwia dodawanie ikonek obrazków do twojego menu nawigacyjnego, w tym ikonek społecznościowych.
Podczas tworzenia ikonek społecznościowych możesz użyć dowolnego obrazka, który przesłałeś do biblioteki multimediów WordPress.
Na przykład wiele czołowych firm zajmujących się mediami społecznościowymi udostępnia logo, które możesz wykorzystać na swojej witrynie internetowej, takie jak zestaw narzędzi marki Twitter. Możesz także pobrać ikonki z bibliotek online, takich jak witryna internetowa Font Awesome.
Menu Image integruje się również z wtyczką Font Awesome. Umożliwia to przeglądanie i importowanie wszystkich ikon Font Awesome bezpośrednio z kokpitu WordPress, w tym ikon dla wszystkich głównych sieci społecznościowych.
Zalecamy zainstalowanie wtyczki Font Awesome przed kontynuowaniem poradnika. Aby uzyskać szczegółowe instrukcje dotyczące konfigurowania Font Awesome, zapoznaj się z naszym przewodnikiem na temat łatwego dodawania krojów pisma ikon do twojego motywu WordPress.
Bez względu na to, w jaki sposób planujesz udostępnić ikonki mediów społecznościowych, będziesz musiał zainstalować i włączyć wtyczkę Menu Image. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu warto przyjrzeć się rozmiarom ikonek i zmienić je w razie potrzeby. Aby to zrobić, należy przejść do Menu Image ” Menu Image.
Podczas tworzenia twoich ikonek społecznościowych możesz użyć dowolnego z domyślnych rozmiarów obrazów WordPress, takich jak miniaturka, obrazek lub duży. Menu Imagely pozwala również wybrać jeden z trzech unikatowych rozmiarów, które są domyślnie ustawione na 24×24, 36×36 i 48×48 pikseli.
Rozmiary te powinny być odpowiednie dla większości witryn internetowych WordPress, ale można je zmienić, wpisując różne liczby w polach 1., 2. lub 3. obrazka menu.
Po zakończeniu kliknij „Zapisz zmiany”, aby zapisać twoje ustawienia.
Aby dodać ikonki do menu nawigacyjnego, przejdź do Wygląd ” Menu. Domyślnie WordPress wyświetli menu główne twojej witryny.
Jeśli chcesz dodać ikonki mediów społecznościowych do innego położenia menu, po prostu otwórz menu rozwijane „Wybierz menu do edycji”.
Następnie możesz wybrać menu z listy i kliknąć „Wybierz”.
Aby uzyskać instrukcje krok po kroku, jak utworzyć nowe menu, zapoznaj się z naszym przewodnikiem na temat dodawania menu nawigacyjnego w WordPress.
Aby rozpocząć, należy utworzyć nowy odnośnik do każdego profilu społecznościowego w twoim menu.
Gdy będziesz gotowy, kliknij, aby rozwinąć sekcję „Własne odnośniki”, a następnie wpisz adres strony mediów społecznościowych, której chcesz użyć. Możesz na przykład wpisz adres URL twojej grupy na Facebooku lub kanału YouTube.
Konieczne będzie również wpisanie rodzaju odnośnika. W późniejszym kroku będziesz mieć możliwość zmiany miejsca wyświetlania tego tytułu w menu lub nawet całkowitego ukrycia go.
Po zakończeniu kliknij „Dodaj do menu”.
Ta pozycja pojawi się teraz w prawej kolumnie.
Aby dodać ikonkę mediów społecznościowych, wystarczy najechać kursorem na utwórz nową pozycję menu.
Następnie kliknij przycisk „Menu Image”, gdy się pojawi.
Uwaga: Jeśli nie widzisz przycisku „Obrazek menu”, kliknij przycisk „Zapisz zmiany”. Teraz przycisk „Obrazek menu” powinien pojawiać się po najechaniu kursorem na dowolną pozycję w menu.
Teraz możesz zdecydować, czy użyć obrazka z twojej biblioteki multimediów WordPress, czy ikonki dostarczonej przez Font Awesome.
Aby użyć gotowej ikonki Font Awesome, kliknij przycisk radiowy obok opcji „Ikonka”.
Następnie wybierz „Fontawesome”.
Następnie możesz kliknąć „Marki”.
Zobaczysz teraz wszystkie markowe ikonki, w tym ikonki dla wszystkich głównych mediów społecznościowych, od Facebooka po LinkedIn. Gdy zobaczysz obrazek, którego chcesz użyć, po prostu go kliknij.
Inną opcją jest użycie twojej własnej ikonki z biblioteki multimediów WordPress poprzez wybranie przycisku radiowego „Obrazek”. Następnie kliknij odnośnik „Ustaw obrazek”.
Możesz teraz wybrać obrazek z biblioteki multimediów WordPress lub przesłać nowy plik z twojego komputera.
Niezależnie od tego, skąd pochodzi ikonka, Obrazek menu wyświetli podgląd po prawej stronie.
Możesz teraz zmienić, czy tytuł odnośnika pojawia się powyżej, poniżej, przed lub po ikonce mediów społecznościowych, korzystając z ustawień „Pozycja tytułu”.
Wiele ikonek mediów społecznościowych jest natychmiast rozpoznawalnych, więc tytuł odnośnika może być zbędny. Jeśli dodajesz wiele ikonek społecznościowych do menu nawigacyjnego, to tytuły mogą nawet sprawić, że twoje menu będzie wyglądać bardziej niechlujnie i skomplikowanie.
Mając to na uwadze, możesz chcieć ukryć tytuł, wybierając przycisk opcji „Ukryj”.
Podczas wprowadzania zmian podgląd na żywo będzie aktualizowany automatycznie, dzięki czemu można wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej.
Wreszcie, jeśli używasz twojego własnego obrazka, możesz zmienić rozmiar ikonek mediów społecznościowych za pomocą menu rozwijanego „Rozmiar obrazka”.
Większe ikonki przyciągają uwagę odwiedzających, ale mogą też rozpraszać. Mając to na uwadze, możesz wypróbować różne rozmiary, aby zobaczyć, co działa najlepiej na twoim blogu WordPress.
Gdy jesteś zadowolony z ustawienia ikonki mediów społecznościowych, po prostu kliknij „Zapisz zmiany”.
Wystarczy powtórzyć te kroki, aby dodać więcej ikonek do twojego menu WordPress.
Możesz nawet dodać ikonki do innych ważnych pozycji w menu nawigacyjnym. Na przykład, możesz dodać ikonki do twojego formularza kontaktowego lub strony kasy WooCommerce.
Gdy będziesz zadowolony z konfiguracji menu, po prostu kliknij „Zapisz menu”.
Teraz możesz przejść na twoją witrynę internetową, aby zobaczyć nowe ikonki mediów społecznościowych w działaniu.
Tak to wyglądało na naszej demonstracyjnej witrynie internetowej.
Metoda 2: Korzystanie z pełnego edytora witryny (tylko motywy blokowe)
WordPress ma wbudowany blok Social Icons, który pozwala utworzyć menu zawierające ikonki mediów społecznościowych, a następnie wyświetlić je w ładnym układzie.
Ten blok zawiera wbudowane ikony dla wszystkich głównych sieci społecznościowych, więc nie musisz instalować wtyczki, takiej jak Font Awesome, ani przesyłać ikon do twojej biblioteki multimediów.
Do bloku Social Icons można jednak dodawać tylko ikonki mediów społecznościowych i odnośniki, więc nie jest on tak elastyczny jak wtyczka Menu Image.
Jeśli korzystasz z motywu blokowego, możesz dodać blok ikonek społecznościowych do dowolnej części twojej witryny internetowej, takiej jak nagłówek lub stopka. W ten sposób możesz wyświetlić menu mediów społecznościowych na całej twojej witrynie internetowej.
Aby rozpocząć, przejdź do Wygląd ” Edytor w kokpicie WordPress.
W tym miejscu zobaczysz kilka menu umożliwiających dostosowanie wyglądu twojego motywu blokowego.
Aby dodać ikonki mediów społecznościowych do twojego menu, kliknij „Nawigacja”.
Następnym krokiem jest kliknięcie ikonki ołówka „Edytuj”.
Spowoduje to otwarcie pełnego edytora witryny WordPress.
Po wykonaniu tej czynności będziesz mógł edytować swoje menu nawigacyjne, które jest fragmentem szablonu nagłówka WordPress.
Aby rozpocząć, kliknij niebieską ikonkę „+” w lewym górnym rogu. W pasku wyszukiwania należy wpisać „Ikonki społecznościowe”.
Gdy pojawi się odpowiedni blok, przeciągnij go i upuść na szablon motywu.
Aby dodać pierwszą ikonę, wystarczy kliknąć ikonę „+” wewnątrz bloku.
W wyświetlonym oknie wpisz ikonkę, którą chcesz dodać, na przykład „Twitter” lub „Facebook”.
Gdy pojawi się odpowiednia ikonka, wystarczy kliknąć, aby dodać ją do twojego bloga WordPress.
Teraz kliknij nową ikonkę mediów społecznościowych.
Spowoduje to otwarcie małego paska, w którym możesz wpisać adres URL, do którego chcesz utworzyć odnośnik, np. twoją stronę na Facebooku.
Aby dodać więcej ikon społecznościowych do WordPressa, wystarczy kliknąć ikonkę „+” i powtórzyć ten sam proces opisany powyżej.
Po dodaniu wszystkich platform mediów społecznościowych możesz dostosować blok. Aby to zrobić, kliknij, aby wybrać blok ikonek społecznościowych, a następnie kliknij kartę „Blok”.
Można zmienić justowanie, wyrównanie i orientację ikonki za pomocą ustawień „Układ”.
Domyślnie wszystkie odnośniki do mediów społecznościowych otwierają się w tej samej karcie. Aby zatrzymać odwiedzających na twojej witrynie internetowej, możesz kliknąć, aby włączyć przełącznik „Otwórz odnośniki w nowej karcie”.
Domyślnie WordPress wyświetla tylko ikonki społecznościowe, bez żadnego tekstu.
Jeśli chcesz wyświetlać tekst obok każdej ikonki, kliknij, aby włączyć przełącznik „Pokaż etykiety”.
Następnie kliknij kartę „Style”.
Tutaj możesz zmienić styl przycisku, klikając „Domyślny”, „Tylko logo” lub „Kształt pigułki”.
Wreszcie, możesz zmienić odstęp między ikonkami społecznościowymi, korzystając z ustawień w sekcji „Odstępy między blokami”.
Gdy będziesz zadowolony z wyglądu menu, kliknij przycisk „Zapisz”.
Teraz, jeśli przejdziesz na twoją witrynę internetową, zobaczysz ikonki mediów społecznościowych na żywo.
Wskazówka bonusowa: Osadzanie kanałów społecznościowych na Twojej witrynie WordPress
Dodawanie ikonek mediów społecznościowych do menu WordPress to świetny sposób na zdobycie większej liczby obserwujących i zaangażowania na twoich różnych kontach. Istnieje jednak wiele innych sposobów promowania twojego Twittera, Facebooka i innych profili społecznościowych.
Najlepszym sposobem na zdobycie większej liczby obserwujących i zaangażowania jest osadzanie kanału społecznościowego na żywo na twojej witrynie internetowej. Pozwala to na wyświetlanie najnowszych wpisów z twoich witryn w mediach społecznościowych, wraz z przyciskami, których odwiedzający mogą użyć, aby zaangażować się we wpisy lub śledzić cię w mediach społecznościowych.
Najlepszym sposobem na dodanie kanałów mediów społecznościowych do twojej witryny internetowej jest użycie Smash Balloon. Jest to najlepsza wtyczka do mediów społeczności owych dla WordPressa, która pozwala osadzać kanały na żywo z Twittera, Instagramu, Facebooka i nie tylko.
Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem na temat dodawania kanałów mediów społecznościowych do WordPressa.
Mamy nadzieję, że ten artykuł pomógł ci nauczyć się dodawać ikonki mediów społecznościowych do menu WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tego, jak osadzać filmy z Facebooka w WordPressie lub zobaczyć nasze wybory ekspertów dotyczące najlepszych wtyczek Twittera dla WordPressa.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Mrteesurez says
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 says
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 says
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 says
Thanks for this article, it helped me a lot!
WPBeginner Support says
Glad our article was helpful!
Administrator
Farhad says
Is there a way to have blog posts submitted to social media sites automatically?
Thank you.
WPBeginner Support says
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/
Administrator
Jimmy Ekisa says
Brilliant article!!! You saved me time to create social menus and add them in the NewsPack Theme header, thank you so much.
Shyam says
How to show icons of social profiles in footer?
WPBeginner Support says
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/
Administrator
Kerry says
I’ve got the social media icons on my website. How do I link those icons to my social media profiles?
WPBeginner Support says
You would have the menu items be custom URLs
Administrator
Vicki says
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 says
You would want to check with your theme’s support to see if this is due to the design of the theme itself.
Administrator
Danielle says
I added the social media menu but it’s not showing on my site. What can I do?
WPBeginner Support says
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.
Administrator
Lisa Jackson says
Love this, but the icons are displayed in a column rather than next to each other. How can I fix this?
WPBeginner Support says
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.
Administrator
andi moss says
What? No icons? Find our own?
WPBeginner Support says
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.
Administrator
Bob Wright says
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 says
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/
Administrator
Ankit says
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 says
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.
Administrator
Jonathan says
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 says
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/
Administrator
Elder Designer says
amazing tutorial keep it up
WPBeginner Support says
Glad you found our guide helpful
Administrator
Stephanie Strand says
Thank you! Very clear instructions. Helped this newbie enormously.
WPBeginner Support says
Glad our guide was helpful
Administrator
Rupali Tripathi says
Thank you so very much for this video.
WPBeginner Support says
You’re welcome
Administrator
Debbie Serjeant says
Icons are appearing without color … wonder what I did wrong?
WPBeginner Support says
You may want to check with the support for your specific theme to ensure there isn’t theme-specific CSS changing your colors.
Administrator
Isaac says
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 says
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/
Administrator
Sam Simson says
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 says
You would want to check with the support for your specific theme to see if that would be overriding your customizations
Administrator
Tracy says
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 says
You may want to ensure the plugin was fully installed and activated for the select image to appear
Administrator
Lea says
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 says
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.
Administrator
Larry Hilton says
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 says
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
Administrator
Michele A says
Thank you for this wonderful tutorial!! It has helped me beyond words. Thank you!
WPBeginner Support says
Glad our guide could help
Administrator
Muneeb says
Icons are currently on the site but don’t work even link is added. whats the reason?
WPBeginner Support says
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.
Administrator
Mr. Debtsmith says
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 says
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.
Administrator
ARPIT says
Thank You Very Much for Essential Information that I was Seeking on the Internet.
Highly Appreciated.
WPBeginner Support says
Glad our article could be helpful to you.
Administrator
Dan says
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 says
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.
Administrator
David Cornish says
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 says
Hi David,
Please see our list of the best social media plugins for WordPress.
Administrator
Rob Lilley says
Is there a way to add a target attribute, so the social page opens in a new tab/window?
Editorial Staff says
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.
Administrator
Umarbhatti says
Hi,
This plugin looks awesome. Thanks!
Aman Singh says
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 says
Hi Aman,
You can just use your browser’s Inspect tool to copy the HTML code and CSS.
Administrator