Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać ikonki mediów społecznościowych na panelu bocznym Twojego WordPressa?

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Zastanawiasz się, jak dodać ikonki mediów społecznościowych do twojego panelu bocznego WordPress?

Dodanie ikonek społecznościowych do witryny internetowej to łatwy sposób na poinformowanie odbiorców o twojej obecności w mediach społecznościowych. W ten sposób mogą oni łatwo przejść na twoje profile społecznościowe i śledzić cię online.

W tym artykule pokażemy, jak dodać ikonki mediów społecznościowych do twojego panelu bocznego WordPress.

How to Add Social Media Icons in Your WordPress Sidebar

Dlaczego warto dodać ikonki mediów społecznościowych do twojego panelu bocznego WordPress?

Panel boczny WordPress to obszar na twojej witrynie internetowej, który nie jest częścią głównej treści. Jest to miejsce, w którym możesz wyświetlać dodatkowe informacje, które mogą zainteresować czytelników, takie jak twoje najnowsze wpisy na blogu i odnośniki do profili społecznościowych.

Dodanie odnośników społecznościowych do panelu bocznego WordPress jest dobrym pomysłem, ponieważ informuje użytkowników o twoich kontach w mediach społecznościowych. W rezultacie mogą je sprawdzić, śledzić cię i pomóc ci rozwinąć obserwację w mediach społecznościowych.

Co więcej, wyświetlanie twoich kont w mediach społecznościowych może budować poczucie wiarygodności i służyć jako dowód społeczny. Gdy odwiedzający widzą, że jesteś włączony do mediów społecznościowych, pokazuje to, że twoja witryna e-handlu lub biznesowa jest godna zaufania.

Wiele popularnych blogów WordPress wyświetla ikonki mediów społecznościowych w swoich panelach bocznych, takich jak WPBeginner:

WPBeginner's social media icons on the sidebar

Uwaga: Ikonki mediów społecznościowych różnią się od przycisków udostępniania społecznościowego na wpisach WordPress. Jeśli chcesz dodać przyciski udostępniania, zapoznaj się z naszym przewodnikiem dla początkujących na temat dodawania ikonek udostępniania społecznościowego w WordPress.

Mając to na uwadze, przyjrzyjmy się, jak dodać ikonki mediów społecznościowych do panelu bocznego twojej witryny internetowej WordPress.

Metoda, której należy użyć, zależy od używanego motywu WordPress i edytora. Jeśli chcesz przejść do określonej sekcji, możesz skorzystać z tych szybkich odnośników:

Metoda 1: Dodawanie ikonek społecznościowych za pomocą pełnego edytora witryny (motywy blokowe)

Jeśli jesteś użytkownikiem motywu blokowego, możesz dodać przyciski mediów społecznościowych do panelu bocznego WordPress za pomocą bloku Social Icons.

Należy pamiętać, że proces ten różni się w zależności od używanego motywu. Niektóre motywy bloków mogą zawierać domyślnie panel boczny, do którego można następnie dodać blok ikonek społecznościowych. Niektóre mogą mieć również wzorzec nagłówka, który działa jak pasek boczny, a niektóre mogą w ogóle nie mieć paska bocznego.

W tym przykładzie użyjemy domyślnego motywu blokowego WordPress i pokażemy, jak utworzyć panel boczny dla wszystkich twoich stron lub wpisów, w którym możesz dodać blok ikonek społecznościowych.

Najpierw przejdź do Wygląd ” Edytor w twoim panelu administracyjnym WordPress.

Selecting the Full-Site Editor from the WordPress admin panel

Następnie należy wybrać opcję „Szablony”.

Spowoduje to przejście do strony, na której można edytować szablon twoich stron i wpisów.

Choosing the Templates menu on WordPress Editor

Tutaj możesz wybrać jeden z szablonów stron. Może to być „Strony” lub „Pojedyncze wpisy”, w zależności od tego, gdzie ma znajdować się panel boczny.

Jeśli chcesz, aby panel boczny wyświetlał się zarówno na twoich statycznych stronach, jak i we wpisach, możesz później edytować oba z nich. Możesz również dostosować szablon strony głównej, jeśli chcesz, aby panel boczny również się tam pojawiał.

W tym przypadku wybierzemy „Strony”.

Selecting Pages on the WordPress Editor Templates page

Następnie kliknij przycisk ołówka w lewym panelu obok przycisku z trzema kropkami.

Spowoduje to otwarcie edytora WordPress.

Clicking the pencil edit button on Pages inside the WordPress editor

Jak widać, domyślny motyw nie ma jeszcze panelu bocznego w szablonie Strony, więc musimy go dla niego utworzyć.

Aby to zrobić, możesz najechać kursorem na miejsce, w którym chcesz dodać panel boczny i kliknąć przycisk dodawania bloku „+”, gdy się pojawi. Następnie znajdź i wybierz „Kolumny”.

Selecting the Columns block on WordPress editor

Do wyboru będzie kilka wariantów.

W tym przykładzie użyjemy opcji „66 / 33”, aby naśladować standardowy wygląd prawego panelu bocznego.

Choosing one of the variations of the Columns block in WordPress editor

Po zakończeniu przeciągnij i upuść blok Treść wpisu na lewo od bloku Kolumny.

Twój szablon strony powinien wyglądać jak na obrazku poniżej, z pustą prawą kolumną.

Moving the Post Content block to the left side of the Columns block

Teraz kliknij prawą kolumnę i wybierz przycisk dodawania bloku „+”.

Następnie wyszukaj blok Ikonki społecznościowe.

Searching for the Social Icons block to add to the Columns block

Teraz możesz zacząć dodawać twoje platformy mediów społecznościowych do bloku. Wystarczy ponownie kliknąć przycisk „+” i dodawać twoje przyciski mediów społecznościowych jeden po drugim.

Skorzystaj z funkcji wyszukiwania, aby przejrzeć wszystkie opcje sieci społecznościowych.

Adding a social profile to the Social Icons block

Po dodaniu wszystkich przycisków możesz rozpocząć dodawanie własnych odnośników do twoich profili społecznościowych.

Wszystko, co musisz zrobić, to kliknąć ikonkę społecznościową i wpisz adres URL swojego profilu.

Entering an Instagram account link to the Social Icons block

Na tym etapie można dostosować wygląd ikonek do własnych potrzeb.

Jeśli rozmiar przycisków nie jest wystarczająco duży lub mały, można użyć opcji „Rozmiar” na pasku narzędzi bloku.

Customizing the buttons' sizes using the Social Icons block toolbar

W ustawieniach bloku po lewej stronie można dostosować justowanie ikonek, orientację, ustawienia odnośników i etykiety.

Zalecamy, aby odnośniki otwierały się w nowej karcie, dzięki czemu użytkownicy nie będą musieli opuszczać twojej witryny internetowej, aby przejść na profile społecznościowe.

Social Icons Block Settings

Jeśli przełączysz się na kartę Style bloków, możesz zmienić style i kolory ikonek, aby dopasować je do twojego projektu witryny internetowej WordPress.

W zależności od twoich preferencji, wszystkie ikonki mogą mieć różne kolory lub ten sam, jak poniżej.

Configuring the Social Icons color and styles in the Block Styles tab

Przewijając tę samą kartę w dół, znajdziesz ustawienia wymiarów, aby dostosować margines bloku i odstępy.

Ustawienia te mogą być pomocne, jeśli chcesz dostosować odstępy między blokiem ikonek społecznościowych a innymi blokami na panelu bocznym.

Configuring the Dimensions settings of the Social Icons block

Dobrym pomysłem jest również dodanie tekstu wezwania do działania na górze bloku ikonek społecznościowych, aby podkreślić, gdzie znajdują się przyciski i zachęcić użytkowników do zostania obserwującymi lub subskrybentami.

Aby to zrobić, dodaj blok akapitu za pomocą przycisku „+”. Upewnij się, że znajduje się on nad ikonkami społecznościowymi.

Adding a Paragraph block on top of the Social Icons block

Niektóre przykłady działań typu „call-to-action” to „Follow Us”, „Join Over X Readers” lub „Get the Latest Updates”.

Jeśli jeszcze tego nie zrobiłeś, możesz również dodać więcej elementów do panelu bocznego, takich jak twoje wpisy i ostatnie komentarze.

Teraz wystarczy kliknąć przycisk „Zapisz” w prawym górnym rogu strony.

Clicking the Save button on the WordPress editor

I to wszystko!

Gdy wejdziesz na swoją witrynę internetową WordPress, powinieneś zobaczyć panel boczny z kilkoma odnośnikami społecznościowymi.

Example of what the Social Icons block looks like on the front end

Jeśli chcesz utworzyć unikatowe panele boczne dla różnych stron lub wpisów, z których wszystkie zawierają blok ikonek społecznościowych, zalecamy utworzenie wzorca WordPress lub bloku wielokrotnego użycia dla twojego panelu bocznego.

Aby dowiedzieć się więcej, możesz zapoznać się z naszymi przewodnikami dla początkujących na temat korzystania z bloków WordPress i dodawania bloków wielokrotnego użycia.

Metoda 2: Dodawanie ikonek mediów społecznościowych za pomocą widżetów WordPress (motywy klasyczne)

Ta kolejna metoda jest przeznaczona dla osób korzystających z klasycznego motywu WordPress z panelami bocznymi obsługującymi widżety.

Aby dodać przyciski mediów społecznościowych do twojego panelu bocznego, po prostu przejdź do Wygląd ” Widżety z kokpitu WordPress.

Następnie przejdź do obszaru widżetów WordPress, w którym chcesz dodać widżet ikonek społecznościowych. W naszym przykładzie wybierzemy „Panel boczny”, ale nazwa może być inna w zależności od używanego motywu.

Navigating to the Appearance Widgets menu and selecting Sidebar on WordPress admin panel

Teraz kliknij przycisk dodawania bloku „+” w lewym górnym rogu, obok opcji „Widżety”.

Tutaj można wyszukać blok Ikonki społecznościowe.

Choosing the Social Icons block in the WordPress Widgets settings

Następnie należy kliknąć ten widżet panelu bocznego lub przeciągnąć go i upuścić w dowolnym miejscu w obszarze edycji.

Ogólnie rzecz biorąc, najlepiej jest dodać ikonki sieci społecznościowych blisko górnej części obszaru widżetu. W ten sposób przyciągną one uwagę odwiedzających twoją stronę od razu po wejściu na nią.

Następnie, podobnie jak w poprzedniej metodzie, można kliknąć przycisk „+”, aby utworzyć nowe przyciski mediów społecznościowych jeden po drugim na widżecie.

W poniższym przykładzie umieściliśmy blok ikonek społecznościowych poniżej bloku wyszukiwania. Dodajemy również ikonkę WhatsApp.

Placing the Social Icons widget below the Search widget and adding the WhatsApp icon

W tym momencie możesz zacząć dodawać twoje odnośniki społecznościowe.

W przypadku WhatsApp możesz wpisać rodzaj „wa.me/” i wpisać obok niego twój numer WhatsApp. Nie ma potrzeby używania symbolu +, ale upewnij się, że dodałeś swój krajowy numer kierunkowy, jak na tym zrzucie ekranu.

Adding a WhatsApp number in the Social Icons block

W prawym panelu masz również dostęp do opcji Ustawienia bloku i Style.

Aby otworzyć te opcje, można kliknąć ikonkę „Ustawienia” w prawym górnym rogu.

Selecting the Settings icon on the Widgets page

Dodatkowo, możesz dodać blok akapitu na górze widżetu mediów społecznościowych dla twojego tekstu wezwania do działania.

Zalecamy, aby bloki Akapit i Ikonki społecznościowe stanowiły grupę, aby nie wyglądały na oddzielone na panelu bocznym.

Aby to zrobić, wystarczy zaznaczyć razem Akapit i ikonki społecznościowe. Następnie kliknij ikonkę „Przekształć” na pasku narzędzi bloku i wybierz „Grupuj”.

Grouping the Social Icons and Paragraph blocks

Po zakończeniu kliknij przycisk „Aktualizuj”, aby wprowadzić zmiany na wszystkich twoich panelach bocznych.

Oto jak powinien wyglądać efekt końcowy:

An example of what the Social Icons widget looks like on the website

Metoda 3: Dodawanie własnych ikonek mediów społecznościowych za pomocą SeedProd (motywy własne)

Jeśli korzystasz z SeedProd, będziesz mieć większą kontrolę nad wyglądem twoich przycisków mediów społecznościowych na panelu bocznym. Na przykład, jeśli korzystasz z platformy mediów społecznościowych, dla której WordPress nie ma ikonki, możesz samodzielnie utworzyć dla niej przycisk.

Dodatkowo można dostosować odstępy między ikonkami specjalnie dla urządzeń mobilnych.

Jeśli jesteś nowym użytkownikiem SeedProd i chcesz z niego korzystać, musisz najpierw zainstalować i włączyć wtyczkę. Będziesz potrzebował wersji Pro, aby uzyskać dostęp do funkcji profili społecznościowych.

Aby uzyskać więcej informacji na temat instalowania wtyczek, zapoznaj się z naszym przewodnikiem na temat instalowania wtyczek WordPress.

Następnie możesz postępować zgodnie z tym poradnikiem, aby skonfigurować twój motyw za pomocą SeedProd.

Teraz, aby dodać ikonki społecznościowe do panelu bocznego, należy przejść do SeedProd ” Theme Builder. Następnie najedź kursorem na szablon „Panel boczny” i kliknij „Edytuj projekt”.

Clicking Edit Design on the Sidebar template inside SeedProd

Znajdujesz się teraz wewnątrz kreatora stron SeedProd. Blok profili społecznościowych powinien zostać domyślnie dodany do szablonu motywu.

Jeśli jednak tak się nie stało, możesz użyć paska wyszukiwania w lewym panelu i wpisać „Profile społecznościowe”. Następnie wystarczy przeciągnąć i upuścić blok w odpowiednie miejsce.

Selecting the Social Profiles block on SeedProd

Nie zapomnij dodać bloku tekstowego na górze przycisków i napisać tekst wezwania do działania.

W ten sposób kierujesz uwagę odwiedzających na przyciski mediów społecznościowych na panelu bocznym.

Creating a Follow Us text on top of the Social Profiles block on SeedProd

Aby dostosować wygląd ikonek profili w mediach społecznościowych, wystarczy kliknąć element „Profile społecznościowe”. Tutaj zobaczysz różne karty, aby dostosować przyciski do własnych potrzeb.

Na karcie „Treść” można dodać więcej ikonek i zmienić ich styl, rozmiar i wyrównanie.

Configuring the Content tab of the Social Profiles block in SeedProd

Oprócz standardowych opcji, takich jak Instagram i Facebook, SeedProd ma również przyciski dla Slack, Telegram, Github i innych.

Aby utworzyć nową ikonkę mediów społecznościowych, której SeedProd nie posiada domyślnie, należy kliknąć przycisk „+ Add New Share”.

Następnie wybierz „Dostosuj” z rozwijanego menu.

Creating a Custom social media button on SeedProd

Aby edytować przycisk, kliknij symbol ustawień koła zębatego obok przycisku strzałki.

Gdy już to zrobisz, po prostu wybierz „Wybierz ikonkę”.

Clicking the Choose Icon for the custom social media button on SeedProd

Teraz zostaniesz przekierowany do Biblioteki ikon, gdzie znajdują się setki ikon marek do wyboru, dzięki uprzejmości ikon Font Awesome.

W tym przykładzie użyjemy Airbnb. Istnieją jednak również inne platformy, takie jak LinkedIn czy Tumblr.

Choosing the Airbnb icon on SeedProd

Po wybraniu ikonki można dostosować kolor i dodać odnośnik do strony mediów społecznościowych.

Tutaj zdecydowaliśmy się pozostać przy kolorze marki Airbnb. Wstawiając odnośnik do konta społecznościowego, upewnij się, że zawiera on również „https://”.

Configuring the Airbnb icon design on Social Profiles block inside SeedProd

Następnie znajduje się karta „Szablony”.

Po przejściu na tę kartę można dostosować wygląd ikonki. Możesz uczynić ją bardziej kwadratową, okrągłą i/lub monochromatyczną, w zależności od twoich preferencji.

Editing the Templates setting for the Social Profiles block in SeedProd

Wreszcie, karta „Zaawansowane” oferuje więcej sposobów na dostosowanie twoich przycisków mediów społecznościowych.

Sekcja Style to miejsce, w którym można zmienić styl ikonek, ich kolor, rozmiar, odstępy między nimi i efekt cienia.

The Styles tab in the Social Profiles block settings in SeedProd

W sekcji Spacing można edytować margines i dopełnienie bloku. Wspaniałą cechą SeedProd jest to, że pozwala na zmianę marginesu i dopełnienia dla urządzeń stacjonarnych i mobilnych.

Aby edytować margines i dopełnienie, wystarczy wybrać jedną z ikonek urządzenia i wstawić twoje wymiary marginesu i dopełnienia w następujący sposób:

Configuring the Social Profiles block spacing in SeedProd

Przewijając w dół, znajdziesz opcje Widoczność urządzenia i Efekty animacji.

W pierwszym ustawieniu możesz zdecydować się na ukrycie bloku na komputerze lub telefonie komórkowym. Może to być konieczne, jeśli zdecydowałeś się użyć bloku profili społecznościowych w innej części twojej witryny internetowej i nie chcesz duplikować ikonek profili społecznościowych.

Dzięki efektom animacji można wybrać styl animacji dla bloku, gdy ikonki są wczytywane na stronie. Efekt ten nie jest konieczny, jeśli nie chcesz zbytnio odwracać uwagi odwiedzającego od głównej treści.

SeedProd's Device Visibility and Animation Effect settings for the Social Profiles block

Po skonfigurowaniu bloku profili społecznościowych zgodnie z twoimi upodobaniami, po prostu kliknij przycisk „Zapisz” w prawym górnym rogu.

Możesz też kliknąć przycisk „Podgląd”, aby najpierw zobaczyć, jak wygląda panel boczny.

Clicking the Save button on SeedProd

I to wszystko! Pomyślnie dodałeś blok profili społecznościowych za pomocą SeedProd.

Oto jak może wyglądać efekt końcowy:

Example of what the social media icons in the sidebar look like if made with SeedProd

Wskazówka bonusowa: Osadzanie twoich profili w mediach społecznościowych na witrynie WordPress

Dodanie ikonek mediów społecznościowych do twojego panelu bocznego to świetny pierwszy krok do zwiększenia liczby obserwujących i pokazania dowodu społecznego. Warto również osadzać swoje kanały mediów społecznościowych bezpośrednio na witrynie WordPress.

Dzięki temu odwiedzający mogą zobaczyć twoje najnowsze treści i nawiązać z tobą kontakt bezpośrednio w witrynie internetowej, potencjalnie zwiększając świadomość marki i zaangażowanie.

Najprostszym sposobem na osadzanie kanałów mediów społecznościowych w WordPress jest użycie Smash Balloon. Ta wtyczka do mediów społecznościowych pozwala połączyć twoją witrynę internetową z różnymi platformami społecznościowymi i osadzać z nich kanały.

A co najlepsze? Smash Balloon ułatwia dostosowanie tych kanałów do własnych upodobań. W ten sposób twoje kanały mediów społecznościowych wyglądają świetnie z resztą projektu witryny internetowej.

Więcej informacji można znaleźć w tych poradnikach:

Mamy nadzieję, że ten przewodnik krok po kroku pomógł ci dowiedzieć się, jak dodać ikonki mediów społecznościowych do twojego panelu bocznego WordPress. Zachęcamy również do zapoznania się z naszym artykułem na temat dodawania ikonek mediów społecznościowych do twojego menu WordPress oraz z naszą listą niezbędnych wtyczek WordPress dla witryn biznesowych.

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

36 komentarzyZostaw odpowiedź

  1. 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!

  2. THANKGOD JONATHAN says

    Can I also use this WordPress Editor with Free themes? As they come with limited customizations for free users.

  3. Moinuddin Waheed says

    I have used social sharing plugin for adding social media link to my blog posts and pages.
    At times it becomes necessity to have one. This leads to increased traffic to our blog posts and lets the user to share with different platforms.
    This is something that every blog or businesses would need to have.
    Seedprod has very easy and smooth way to have social plugins to our blogs and sidebar widgets.
    Thanks wpbeginner for this guide.

  4. Jiří Vaněk says

    This was one of the first things I dealt with on the side panel: the availability of social media. I had links to social networks set up this way for quite a while. However, I found it graphically more appealing to use a floating bar on the other side. So, on the right, I had the classic right menu, and on the left side, which was unnecessarily empty (on the blog), I ended up using a plugin. There, I have floating bars with links to social networks, email, and a popup comment.

  5. Ahmed Omar says

    it looks a long process that needs attention
    Although I have my social media pages, but I did not add any icons on my site before.
    I will give it a try today as it worth the work, and with your detailed step by step explanation, it would be easy

  6. Ralph says

    I always like to read your tutorial guys. Straight to the point and multiple options. Having ability to customize icons is very nice and I will definitely use it to make my site looks better and more professional.

  7. Karen Footloose says

    This worked like a charm. Until–don’t laugh–I realized I had beautiful FOLLOW buttons while I was looking for SHARING buttons. How do I get those just as simple and customizable to go in a widget in the sidebar. I’ve looked, but haven’t found simple ones.

  8. Mathukutty P.V. says

    What is difference between jetpack social media icon and wp social media profile? jetpack have youtube provision wherea wp social media profile do not have youtube.

  9. Patrick Tuthill says

    Added a few social widgets to my current theme and it’s both do not render correctly? I am using the theme „Nisarg” which is a basic free blog theme, adn I have heard these plugins adapt differently to various themes. It’s frustrating when these widgets are for ease of use but they haven’t saved me any time. Any feedback from anyone would help. I do plan to upgrade to Genesis framework, not sure if that matters.

  10. Lora says

    The icons are not appearing in the boxes when I installed this plugin. I just see tiny letters and numbers inside the squares. Help?

  11. Maggie says

    Thank you for the article.
    I am a new blogger and I have been using your website since the beginning.
    I have to admit, if there’s any problem I come across or I need some help, I could find the answer here.
    Good job!

  12. Lindsay says

    Thank you for this advice, but how do you get it to show the Facebook, LInkedIn, Twitter icons??? All I have is grey…….

    Thank you!!

  13. jerralyn says

    Nice post, thank you for sharing this useful tutorial on how to add social media on WordPress side bar. Can I use DigDig plug-in instead of Simple Social Icons plugin?

  14. Shahnawaz says

    Dear Syed Balkhi, Sir I would like to thanks you very much and you are my best and favorite personality in WordPress world. Dear sir I will pray for you that always you will write for us. I am using your this plugin and I am daily visit you site and got updates and I will try these updates on my blog. Thanks

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.