Jak dodać ikony mediów społecznościowych do menu WordPress (łatwy sposób)

Opublikowany: 2023-07-05

Szukasz sposobu na dodanie ikon mediów społecznościowych do menu WordPress?

Logo stron takich jak Facebook i Twitter są natychmiast rozpoznawane przez ludzi na całym świecie. Dodając te ikony do swoich 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ć ikony mediów społecznościowych do menu nawigacyjnych WordPress.

How to add social media icons to WordPress menus (easy way)

Dlaczego warto dodawać ikony mediów społecznościowych do menu?

Dodając ikony mediów społecznościowych do swojej witryny, możesz zachęcić ludzi do odwiedzania różnych profili w sieciach społecznościowych. To może zapewnić Ci więcej obserwujących i zaangażowanie na Facebooku, Twitterze, Instagramie i nie tylko.

Jedną z opcji jest dodanie ikon mediów społecznościowych do paska bocznego WordPress lub podobnego obszaru gotowego na widżety. Jednak gdy użytkownicy chcą odwiedzić nową stronę, zwykle najpierw patrzą na menu nawigacyjne.

Dodając ikony mediów społecznościowych do menu WordPress, często możesz uzyskać więcej kliknięć, zaangażowania i obserwujących we wszystkich profilach mediów społecznościowych.

Ikony mediów społecznościowych mogą również przyciągać uwagę odwiedzających bez dodawania dodatkowego tekstu do menu. Pozwala to na promowanie wielu różnych profili na niewielkiej przestrzeni.

To powiedziawszy, przyjrzyjmy się, jak łatwo dodawać ikony mediów społecznościowych do menu WordPress.

Film instruktażowy

Subskrybuj WPBeginner

Jeśli wolisz pisemne instrukcje, po prostu czytaj dalej. Po prostu skorzystaj z poniższych szybkich łączy, aby przejść bezpośrednio do metody, której chcesz użyć:

  • Metoda 1: Korzystanie z wtyczki obrazu menu (zalecane)
  • Metoda 2: Korzystanie z pełnego edytora witryny (tylko motywy blokowe)
  • Bonus: Jak promować swoje profile w mediach społecznościowych

Metoda 1: Korzystanie z wtyczki obrazu menu (zalecane)

Najłatwiejszym sposobem dodania ikon mediów społecznościowych do menu WordPress jest użycie obrazu menu. Ta bezpłatna wtyczka umożliwia dodawanie ikon graficznych do menu nawigacyjnych, w tym ikon społecznościowych.

Podczas tworzenia ikon społecznościowych możesz użyć dowolnego obrazu przesłanego do biblioteki multimediów WordPress.

Na przykład wiele czołowych firm zajmujących się mediami społecznościowymi zapewnia logo, których możesz używać w swojej witrynie, takie jak zestaw narzędzi marki Twitter. Możesz także pobrać ikony z bibliotek internetowych, takich jak witryna Font Awesome.

Obraz menu integruje się również z wtyczką Font Awesome. Dzięki temu możesz przeglądać i importować wszystkie ikony Font Awesome bezpośrednio z pulpitu nawigacyjnego WordPress, w tym ikony wszystkich głównych sieci społecznościowych. Z tego powodu zalecamy zainstalowanie wtyczki Font Awesome.

Aby uzyskać szczegółowe instrukcje dotyczące konfigurowania Font Awesome, zapoznaj się z naszym przewodnikiem dotyczącym łatwego dodawania czcionek ikon w motywie WordPress.

Bez względu na to, jak planujesz udostępnić ikony mediów społecznościowych, musisz zainstalować i aktywować wtyczkę Obraz menu. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress.

Po aktywacji możesz rzucić okiem na rozmiary ikon i zmienić je w razie potrzeby. Aby to zrobić, musisz przejść do Obraz menu » Obraz menu .

How to add social media icons to a WordPress menu

Podczas tworzenia ikon społecznościowych możesz użyć dowolnego domyślnego rozmiaru obrazu WordPress, takiego jak miniatura, obraz lub duży. Obraz menu pozwala również wybrać jeden z trzech unikalnych rozmiarów, które są domyślnie ustawione na 24 × 24, 36 × 36 i 48 × 48 pikseli.

Te rozmiary powinny działać dobrze w przypadku większości witryn WordPress, ale możesz je zmienić, wpisując różne liczby w 1., 2. lub 3. polu obrazu menu.

Resizing social media icons in WordPress

Po wykonaniu tej czynności kliknij „Zapisz zmiany”, aby zapisać ustawienia.

Aby dodać ikony do menu nawigacyjnego, przejdź do Wygląd »Menu . Domyślnie WordPress pokaże główne menu Twojej witryny.

Selecting a WordPress menu to edit

Jeśli chcesz dodać ikony mediów społecznościowych do innego menu, po prostu otwórz menu rozwijane „Wybierz menu do edycji”.

Następnie możesz wybrać menu z listy i kliknąć „Wybierz”.

Editing a WordPress navigation menu

Aby uzyskać instrukcje krok po kroku dotyczące tworzenia nowego menu, zapoznaj się z naszym przewodnikiem dotyczącym dodawania menu nawigacyjnego w WordPress.

Aby rozpocząć, musisz dodać każdy profil społecznościowy do swojego menu jako nowy link.

Kiedy będziesz gotowy, kliknij, aby rozwinąć sekcję „Niestandardowe linki”, a następnie wpisz adres strony mediów społecznościowych, z której chcesz korzystać. Możesz na przykład wprowadzić adres URL swojej grupy na Facebooku lub kanału YouTube.

Będziesz także musiał wpisać „Tekst łącza”. Na późniejszym etapie będziesz mieć możliwość zmiany miejsca, w którym ten tytuł pojawia się w menu, a nawet całkowitego ukrycia go.

Adding link text to a website navigation menu

Po wykonaniu tej czynności kliknij „Dodaj do menu”.

Ten element pojawi się teraz w prawej kolumnie.

Adding social links to a WordPress website

Aby dodać ikonę mediów społecznościowych, po prostu najedź kursorem na nowy element menu.

Następnie kliknij przycisk „Obraz menu”, gdy się pojawi.

Adding icons and images to a WordPress menu

Uwaga: jeśli nie widzisz przycisku „Obraz menu”, kliknij „Zapisz zmiany”. Teraz przycisk „Obraz menu” powinien pojawić się po najechaniu kursorem na dowolny element menu.

Możesz teraz zdecydować, czy chcesz użyć obrazu z biblioteki multimediów WordPress, czy ikony dostarczonej przez Font Awesome.

Aby użyć gotowej ikony Font Awesome, kliknij przycisk radiowy obok opcji „Ikona”.

Adding Twitter, Facebook, and other social icons to WordPress

Następnie wybierz „Fontawesome”.

Następnie możesz kliknąć „Marki”.

Adding branded icons to a WordPress navigation menu

Zobaczysz teraz wszystkie markowe ikony, w tym ikony wszystkich głównych sieci społecznościowych. Gdy zobaczysz obraz, którego chcesz użyć, po prostu go kliknij.

Inną opcją jest użycie własnej ikony z biblioteki multimediów WordPress, wybierając przycisk radiowy „Obraz”. Następnie kliknij link „Ustaw obraz”.

Adding any file or image to a WordPress navigation menu

Możesz teraz wybrać obraz z biblioteki multimediów WordPress lub przesłać nowy plik ze swojego komputera.

Bez względu na to, skąd masz ikonę, obraz menu pokaże podgląd po prawej stronie.

Previewing icons in a website or blog navigation menu

Możesz teraz zmienić, czy tytuł linku pojawia się nad, pod, przed lub po ikonie mediów społecznościowych, korzystając z ustawień „Pozycja tytułu”.

Wiele ikon mediów społecznościowych jest natychmiast rozpoznawalnych, więc tytuł linku może być zbędny. Jeśli dodasz wiele ikon społecznościowych do menu nawigacyjnego, tytuły mogą nawet sprawić, że menu będzie wyglądało na bardziej chaotyczne i skomplikowane.

Mając to na uwadze, możesz chcieć ukryć tytuł, wybierając przycisk radiowy „Ukryj”.

Hiding the menu link title text

W miarę wprowadzania zmian podgląd na żywo będzie aktualizowany automatycznie, więc możesz wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej.

Wreszcie, jeśli używasz własnego obrazu, możesz zmienić rozmiar ikon mediów społecznościowych za pomocą menu rozwijanego „Rozmiar obrazu”.

Resizing social icons on a WordPress navigation menu

Większe ikony przyciągną 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 ze sposobu skonfigurowania ikony mediów społecznościowych, po prostu kliknij „Zapisz zmiany”.

Publishing social icons on a WordPress website

Po prostu powtórz te kroki, aby dodać więcej ikon do menu WordPress.

Możesz nawet dodawać ikony do innych ważnych elementów w menu nawigacyjnym. Na przykład możesz dodać ikony do formularza kontaktowego lub strony kasy WooCommerce.

Gdy jesteś zadowolony ze sposobu skonfigurowania menu, po prostu kliknij „Zapisz menu”.

Publishing a menu with social icons

Teraz możesz odwiedzić swoją witrynę internetową, aby zobaczyć nowe ikony mediów społecznościowych w akcji.

Tak to wyglądało na naszej stronie demonstracyjnej.

Adding social icons to a WordPress menu

Metoda 2: Korzystanie z pełnego edytora witryny (tylko motywy blokowe)

WordPress ma wbudowany blok Ikony społecznościowe, który pozwala stworzyć menu zawierające ikony mediów społecznościowych, a następnie wyświetlić je w ładnym układzie.

An example of a social media navigation menu

Ten blok ma 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 swojej biblioteki multimediów. Możesz jednak dodawać tylko ikony mediów społecznościowych i linki do bloku Ikony społecznościowe, więc nie jest on tak elastyczny jak wtyczka Obraz menu.

Jeśli używasz motywu blokowego, możesz dodać blok Ikony społecznościowe do dowolnej części swojej witryny, takiej jak nagłówek lub stopka. W ten sposób możesz wyświetlić menu mediów społecznościowych w całej witrynie.

Aby rozpocząć, przejdź do Wygląd »Edytor na pulpicie nawigacyjnym WordPress.

Accessing the full site editor

Domyślnie pełny edytor witryny pokazuje szablon główny Twojego motywu, ale możesz dodać ikony społecznościowe do dowolnego szablonu lub części szablonu. Możesz nawet dodawać ikony mediów społecznościowych do części swojej witryny, których nie możesz edytować za pomocą standardowego edytora treści WordPress.

Możesz na przykład dodać menu mediów społecznościowych do szablonu strony 404 w swojej witrynie.

Aby zobaczyć wszystkie dostępne opcje, musisz wybrać „Szablony” lub „Części szablonu”.

Adding social icons to a block-based template

Możesz teraz kliknąć szablon lub część szablonu, którą chcesz edytować.

Jako przykład dodamy ikony mediów społecznościowych do nagłówka WordPress, ale kroki będą takie same bez względu na wybrany szablon.

Adding Twitter, Facebook, Instagram and other social icons to a block-enabled template

Po dokonaniu wyboru WordPress wyświetli podgląd szablonu lub części szablonu.

Aby kontynuować, kliknij małą ikonę ołówka.

Editing a block-based header template

Po wykonaniu tej czynności kliknij niebieską ikonę „+” w lewym górnym rogu.

W pasku wyszukiwania musisz wpisać „Ikony społecznościowe”.

Adding the Social Icons block to WordPress

Gdy pojawi się prawy blok, przeciągnij go i upuść na szablon motywu.

Aby dodać pierwszą ikonę, po prostu kliknij ikonę „+” wewnątrz bloku.

Adding social icons to a WordPress template

W wyskakującym okienku wpisz ikonę, którą chcesz dodać, na przykład „Twitter” lub „Facebook”.

Gdy pojawi się odpowiednia ikona, po prostu kliknij, aby dodać ją do swojego bloga WordPress.

Adding a Twitter icon to a WordPress navigation menu

Teraz kliknij nową ikonę mediów społecznościowych.

Spowoduje to otwarcie małego paska, w którym możesz wpisać adres URL, do którego chcesz prowadzić link, na przykład swoją stronę na Facebooku.

Adding URLs to a social media menu

Aby dodać więcej ikon społecznościowych do WordPress, po prostu kliknij ikonę „+” i powtórz ten sam proces opisany powyżej.

Po dodaniu wszystkich ikon mediów społecznościowych możesz chcieć dostosować blok. Aby to zrobić, kliknij, aby wybrać blok Ikony społecznościowe, a następnie kliknij kartę „Blokuj”.

Customizing a social block in WordPress

Możesz zmienić wyrównanie, wyrównanie i orientację ikony za pomocą ustawień „Układ”.

Domyślnie wszystkie linki do mediów społecznościowych będą otwierane na tej samej karcie. Aby zatrzymać użytkowników w witrynie, możesz włączyć przełącznik „Otwieraj linki w nowej karcie”.

Opening website links in a new browser tab

Domyślnie WordPress pokazuje tylko ikony społecznościowe, bez żadnego tekstu.

Jeśli chcesz wyświetlać tekst obok każdej ikony, kliknij, aby włączyć przełącznik „Pokaż etykiety”.

Adding labels to a social menu

Następnie kliknij kartę „Style”.

Tutaj możesz zmienić styl przycisku, klikając „Domyślny”, „Tylko logo” lub „Kształt pigułki”.

Adding button styles to a navigation menu

Na koniec możesz zmienić odstęp między ikonami społecznościowymi, korzystając z ustawień w sekcji „Odstępy między blokami”.

Gdy jesteś zadowolony z wyglądu menu, kliknij przycisk „Zapisz”.

Publishing a social icons block in WordPress

Teraz, jeśli odwiedzisz swoją witrynę, zobaczysz ikony mediów społecznościowych na żywo.

Bonus: Jak promować swoje profile w mediach społecznościowych

Dodanie ikon mediów społecznościowych do menu WordPress to świetny sposób na zdobycie większej liczby obserwujących i zaangażowania na różnych kontach. Istnieje jednak o wiele więcej sposobów promowania swojego Twittera, Facebooka i innych profili społecznościowych.

Najlepszym sposobem na zdobycie większej liczby obserwujących i zaangażowania jest osadzenie kanału społecznościowego na żywo w swojej witrynie. Dzięki temu możesz wyświetlać najnowsze posty z wielu kont, wraz z przyciskami, za pomocą których odwiedzający mogą wchodzić w interakcje z Twoimi postami lub śledzić Cię w mediach społecznościowych.

Najlepszym sposobem na dodanie kanałów mediów społecznościowych do swojej witryny jest użycie Smash Balloon. Jest to najlepsza wtyczka do kanałów społecznościowych dla WordPress i umożliwia osadzanie kanałów na żywo z Twittera, Instagrama, Facebooka i innych.

The Smash Balloon social media WordPress plugin

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania kanałów mediów społecznościowych do WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać ikony mediów społecznościowych do menu WordPress. Możesz także zapoznać się z naszym przewodnikiem na temat osadzania wideo z Facebooka w WordPress lub zapoznać się z wybranymi przez naszych ekspertów najlepszymi wtyczkami Twittera dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby uzyskać samouczki wideo WordPress. Można nas również znaleźć na Twitterze i Facebooku.