Jak dodać niestandardowy pasek boczny do WordPress (bez kodowania)
Opublikowany: 2022-02-14Szukasz łatwego sposobu na dodanie niestandardowego paska bocznego do swojej witryny WordPress?
Paski boczne to cenne miejsca, których możesz użyć, aby ułatwić czytelnikom poruszanie się po witrynie, subskrybowanie biuletynu, śledzenie profili w mediach społecznościowych i nie tylko. Ale jak stworzyć pasek boczny dostosowany do Twoich potrzeb w zakresie treści?
W tym artykule dowiesz się, jak dodać pasek boczny do WordPressa za pomocą 3 różnych metod.
Co to jest pasek boczny WordPressa?
Pasek boczny WordPress to kolumna pionowej przestrzeni, która znajduje się po lewej lub prawej stronie głównego obszaru zawartości. Jest to widżetowy obszar, który pozwala wyświetlać zawartość poza głównym obszarem zawartości.
Mimo że główny obszar treści zmieni się na każdej stronie, pasek boczny w dużej mierze pozostanie taki sam w całej witrynie (chyba że utworzysz wiele pasków bocznych).
Twój motyw WordPress domyślnie kontroluje wygląd paska bocznego. Więc jeśli użyjesz go od razu po wyjęciu z pudełka, twój motyw będzie kontrolował umieszczenie paska bocznego, liczbę pasków bocznych, których możesz użyć jednocześnie, oraz to, czy faktycznie masz pasek boczny.
Domyślny pasek boczny może również zawierać widżety, które nie odpowiadają Twoim potrzebom biznesowym. Jeśli domyślny pasek boczny nie spełnia Twoich wymagań, może być konieczne utworzenie nowego niestandardowego paska bocznego.
Do czego możesz użyć paska bocznego WordPress?
Możesz dodać prawie każdą zawartość do paska bocznego za pomocą widżetów WordPress. Oto kilka przykładów:
- Nawigacja — możesz użyć widżetów menu nawigacji, aby pomóc użytkownikom znaleźć odpowiednie strony lub menu do filtrowania postów na blogu według kategorii.
- Wyszukiwanie — dodanie pola wyszukiwania do paska bocznego to doskonały sposób, aby pomóc użytkownikom szybko znaleźć to, czego szukają.
- Subskrypcja e-mail — dodaj formularz zgody na e-mail do paska bocznego, aby zbierać adresy e-mail i powiększać swoją listę.
- Polecane treści — Twój pasek boczny to świetne miejsce do prezentowania pojedynczych postów, które są cenniejsze dla użytkowników niż inne.
- Media społecznościowe — możesz łatwo dodać przyciski obserwowania w mediach społecznościowych i widżet udostępniania w mediach społecznościowych, aby zwiększyć liczbę obserwujących i zwiększyć świadomość marki.
- Reklamy – Twój pasek boczny jest doskonałym miejscem do wyświetlania reklam, jeśli używasz ich do generowania przychodów.
- Wezwania do działania (CTA) — jeśli masz nowy kurs online, produkt lub ofertę, możesz dodać CTA do paska bocznego, aby zachęcić czytelników do zapoznania się z nim.
Jak dodać pasek boczny do WordPressa (bez kodu)
Do tej pory wiesz, czym jest pasek boczny i jak w prosty sposób można wyświetlać wartościowe treści odwiedzającym Twoją witrynę. Teraz spójrzmy, jak dodać pasek boczny do WordPressa.
Poniżej udostępniamy 3 różne metody: korzystanie z dostosowywania WordPress, ekranu widżetów WordPress i wtyczki do tworzenia stron internetowych. Co więcej, żadna z tych metod nie wymaga użycia kodu.
- Metoda 1. Tworzenie niestandardowych pasków bocznych za pomocą SeedProd
- Dodawanie wielu niestandardowych pasków bocznych do WordPressa za pomocą SeedProd
- Metoda 2. Korzystanie z narzędzia WordPress Customizer
- Metoda 3. Korzystanie z ekranu widżetów WordPress
Metoda 1. Tworzenie niestandardowych pasków bocznych za pomocą SeedProd
Czy chcesz utworzyć niestandardowy pasek boczny lub używać wielu pasków bocznych jednocześnie w swojej witrynie WordPress?
Do tego będziesz potrzebować wtyczki WordPress lub wiedzy o tworzeniu nowego paska bocznego od podstaw z kodem. Na szczęście możesz łatwo tworzyć niestandardowe paski boczne dla WordPress za pomocą jednej potężnej i lekkiej wtyczki: SeedProd.

SeedProd to najlepszy kreator witryn WordPress typu „przeciągnij i upuść”. Możesz go użyć do tworzenia niestandardowych motywów WordPress i układów stron bez kodu.
SeedProd używa indywidualnych szablonów do tworzenia wszystkich części Twojego motywu. Jednym z tych szablonów jest pasek boczny, który umożliwia dodanie niestandardowego paska bocznego do witryny za pomocą zaledwie kilku kliknięć.
Co więcej, za pomocą SeedProd możesz utworzyć dowolną liczbę pasków bocznych i wyświetlać je na określonych stronach i postach w witrynie.
Wykonaj poniższe kroki, aby dodać pasek boczny do WordPressa za pomocą SeedProd.
Krok 1. Zainstaluj Kreatora Stron SeedProd
Pierwszym krokiem jest zainstalowanie wtyczki SeedProd Website Builder.
Uwaga: Aby korzystać z funkcji Theme Builder, potrzebujesz licencji SeedProd Pro lub Elite.
Możesz postępować zgodnie z tym przewodnikiem dotyczącym instalowania wtyczki WordPress, jeśli potrzebujesz pomocy w tym kroku.
Po zainstalowaniu i aktywacji pliku .zip wtyczki przejdź do strony SeedProd ≫ Ustawienia i wprowadź dane klucza licencyjnego. Możesz znaleźć swój klucz licencyjny na stronie SeedProd w panelu swojego konta.

Krok 2. Utwórz własne szablony motywów WordPress
Aby utworzyć niestandardowy pasek boczny za pomocą SeedProd, musisz najpierw utworzyć różne części swojego motywu. Nie martw się; jest to bardzo łatwe do zrobienia i nie wymaga bezpośredniej edycji żadnych plików szablonów.
Najpierw przejdź do strony SeedProd » Theme Builder . Na tej stronie zobaczysz listę szablonów dla bieżącego motywu SeedProd.
Ponieważ jeszcze nie zaczęliśmy, mamy tylko globalny szablon CSS.
Na początek masz dwie opcje.
- Użyj jednego z gotowych motywów SeedProd jako punktu wyjścia
- Ręcznie twórz szablony motywów od podstaw
Sugerujemy zacząć od gotowego szablonu motywu. Pozwala SeedProd na automatyczne generowanie wszystkich plików szablonów, dając Ci przewagę w edytowaniu szablonów zgodnie z Twoimi wymaganiami.

Aby wybrać szablon motywu, kliknij przycisk Motywy i wybierz jeden z dostępnych motywów. Istnieją różne motywy dla różnych stron internetowych, więc wybierz ten, który najlepiej odpowiada Twoim potrzebom.

Po wybraniu motywu SeedProd automatycznie utworzy dla Ciebie wszystkie szablony motywów. W rezultacie możesz teraz edytować każdy szablon indywidualnie w wizualnym edytorze przeciągania i upuszczania.

Krok 3. Dostosuj swój pasek boczny WordPress
Aby dostosować swój pasek boczny za pomocą SeedProd, znajdź szablon paska bocznego i kliknij łącze Edytuj projekt .

Spowoduje to uruchomienie paska bocznego w kreatorze przeciągania i upuszczania SeedProd. Zobaczysz podgląd na żywo szablonu paska bocznego w prawej kolumnie, a panel edycji w lewej kolumnie.

Zmiana elementu na pasku bocznym jest tak prosta, jak wskazywanie i klikanie. Na przykład możesz kliknąć ikonę kosza na śmieci, aby usunąć bloki.

Możesz też kliknąć dowolny blok, aby zobaczyć jego ustawienia w lewym panelu.

Możesz dodać szeroką gamę treści do swojego paska bocznego, używając bloków tematycznych SeedProd. Po prostu przeciągnij blok z lewej strony i upuść go na swoim pasku bocznym.

Niektóre z bloków, z których możesz wybierać, to:
- Tagi szablonów – bloki, które pozwalają dodawać dynamiczną zawartość z WordPress, taką jak posty na blogu, komentarze, polecane obrazy itp. To świetny sposób na utworzenie dynamicznego paska bocznego.
- Bloki standardowe — są to popularne elementy projektowania stron internetowych, z których korzysta większość witryn internetowych, takie jak obrazy, przyciski, tekst i filmy.
- Zaawansowane bloki – Zaawansowane funkcje generowania leadów, takie jak formularze kontaktowe, profile społecznościowe, przyciski udostępniania, formularze optin, Mapy Google i inne.
- WooCommerce – Jeśli prowadzisz sklep internetowy, możesz używać bloków WooCommerce do wyświetlania popularnych produktów, koszyków i innych funkcji sklepu na pasku bocznym.
Oprócz dodawania treści do paska bocznego, SeedProd pozwala także dostosowywać kolory, czcionki, odstępy, obramowania i wiele więcej.
Na przykład, jeśli klikniesz ikonę ustawień sekcji, zobaczysz opcje zmiany koloru tła, przesłania obrazu tła i zmiany szerokości. Na karcie Zaawansowane jest więcej ustawień, które pozwalają kontrolować granice, odstępy i nie tylko.

Gdy będziesz zadowolony z nowego paska bocznego, kliknij zielony przycisk Zapisz w prawym górnym rogu ekranu.
Teraz powtórz ten proces dla innych szablonów w swoim motywie, w tym:
- Pojedyncza strona
- Pojedynczy post
- Indeks bloga/Archiwum
- Strona główna
- nagłówek
- Stopka
W rezultacie możesz stworzyć niestandardowy motyw WordPress, który będzie pasował do wszystkich Twoich potrzeb biznesowych.

Krok 4. Opublikuj swój niestandardowy pasek boczny w WordPress
Gdy jesteś zadowolony z niestandardowego paska bocznego WordPress, ostatnim krokiem jest aktywacja go w witrynie WordPress.
W SeedProd możesz zastosować swój niestandardowy pasek boczny WordPress za pomocą prostego przełącznika.
Po prostu przejdź do strony SeedProd » Theme Builder i przełącz przełącznik obok opcji „Włącz motyw SeedProd” na „Tak”.

SeedProd zastąpi Twój istniejący projekt nowym motywem WordPress i paskiem bocznym.
Teraz możesz odwiedzić swoją witrynę, aby zobaczyć w akcji niestandardowy pasek boczny WordPress.

Dodawanie wielu niestandardowych pasków bocznych do WordPressa za pomocą SeedProd
Teraz, gdy masz niestandardowy pasek boczny, możesz edytować projekt w dowolnym momencie. Ale co, jeśli chcesz mieć więcej niż jeden pasek boczny i chcesz go wyświetlać w różnych sekcjach swojej witryny?
Na przykład możesz utworzyć pasek boczny dla stron innych niż pasek boczny bloga. Możesz to zrobić za pomocą części szablonu globalnego SeedProd.
Oto część 13 naszego samouczka dotyczącego tworzenia motywów, która pokazuje, jak działają części globalne:
Alternatywnie możesz postępować zgodnie z pisemnymi instrukcjami poniżej.
Najpierw przejdź do strony SeedProd » Theme Builder i kliknij przycisk Dodaj nowy szablon motywu .

Następnie wybierz opcję Część globalna i kliknij Zapisz .

Teraz możesz zbudować niestandardowy pasek boczny, tak jak w poprzednim kroku.
Po utworzeniu nowego paska bocznego otwórz szablon pojedynczej strony w edytorze przeciągania i upuszczania SeedProd.

Aby zrobić miejsce na pasek boczny, musisz zastąpić istniejący układ sekcją dwukolumnową.

Następnie przeciągnij blok Część szablonu do drugiej kolumny nowej sekcji.

Stamtąd możesz wybrać nowy pasek boczny, który utworzyłeś z menu rozwijanego.

Kliknij Zapisz , aby zapisać zmiany, a po przejściu na stronę automatycznie wyświetli się nowy niestandardowy pasek boczny, a w postach na blogu zostanie wyświetlony pierwszy pasek boczny.

Metoda 2. Korzystanie z narzędzia WordPress Customizer
Wbudowany konfigurator WordPress ułatwia dodawanie niestandardowego paska bocznego do witryny WordPress. Konfigurator używa domyślnych ustawień motywu WordPress do kontrolowania układu, treści i rozmieszczenia paska bocznego.
Aby skorzystać z tej metody, potrzebujesz motywu WordPress, który zawiera obszary widżetów paska bocznego. Jeśli nie masz jeszcze motywu, oto najpopularniejsze motywy WordPress dla małych firm.
W tym przewodniku używamy motywu Astra WordPress.
Krok 1: Dodaj układ paska bocznego WordPress
Po zainstalowaniu motywu przejdź do Wygląd ≫ Motywy i kliknij niebieski przycisk Dostosuj .

Spowoduje to przejście do strony dostosowywania WordPressa, na której możesz edytować układ i projekt motywu. Ustawienia widoczne na tej stronie będą się różnić dla różnych motywów, ale pokażemy Ci, jak dodać pasek boczny za pomocą motywu Astra, dzięki czemu masz pomysł, co robić.
Spójrz na lewy panel w module dostosowania i znajdź nagłówek „Pasek boczny”. Kliknij ten nagłówek, aby otworzyć opcje dostosowywania paska bocznego.

Na następnym ekranie możesz wybrać jedną z następujących opcji paska bocznego:
- Układ domyślny — brak paska bocznego, prawego paska bocznego lub lewego paska bocznego.
- Strony — gdzie wyświetlić pasek boczny na pojedynczych stronach.
- Posty — gdzie wyświetlać pasek boczny w pojedynczych postach.
- Archiwa — wygląd paska bocznego na stronach archiwum, takich jak strona bloga.

Możesz także wybrać szerokość paska bocznego na tej samej stronie. Gdy jesteś zadowolony z układu paska bocznego, kliknij przycisk Opublikuj .
Krok 2. Dodaj widżety do paska bocznego za pomocą narzędzia Customizer
Po wybraniu układu paska bocznego możesz zacząć dodawać do niego widżety. Aby to zrobić, znajdź nagłówek „Widżety” w menu WordPress Customizer i kliknij, aby otworzyć ustawienia.

Na następnym ekranie znajduje się lista pasków bocznych aktualnie dostępnych dla tej konkretnej strony, więc kliknij pasek boczny, który chcesz dostosować.

Teraz zobaczysz kreatora paska bocznego, gotowego do wyświetlania wybranych widżetów. Kliknij ikonę plusa (+), aby wyszukać blok lub widżet, który chcesz wyświetlić na pasku bocznym.

Kliknięcie bloku automatycznie doda go do paska bocznego.
Dodawaj widżety do paska bocznego, aż będzie wyglądać tak, jak chcesz. Następnie kliknij przycisk Opublikuj , aby zapisać zmiany.
Teraz, gdy odwiedzasz swoją stronę, zobaczysz swój niestandardowy pasek boczny WordPress.

Metoda 3. Korzystanie z ekranu widżetów WordPress
Poniższa metoda wykorzystuje ekran widżetów WordPress, aby dodać pasek boczny do WordPress. Jest podobny do poprzedniej metody, ale pozwala tylko dodawać widżety do paska bocznego, zamiast zmieniać położenie paska bocznego.
Przejdź do Wygląd ≫ Widgety z pulpitu WordPress, aby użyć tej metody. Na tym ekranie możesz zobaczyć wszystkie paski boczne, które aktualnie obsługuje Twój motyw.

W naszym przypadku motyw zawiera 4 konfigurowalne obszary paska bocznego:
- Główny pasek boczny
- nagłówek
- Sekcja 1 paska stopki
- Stopka Baar Sekcja 2
Dodawanie widżetów do paska bocznego jest podobne do poprzedniego kroku. Po prostu kliknij ikonę plusa i wyszukaj widżety, które chcesz dodać do paska bocznego.

Po zakończeniu tworzenia paska bocznego kliknij przycisk Aktualizuj . Teraz możesz odwiedzić swoją witrynę i zobaczyć nowy pasek boczny.

Na razie to wszystko!
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać pasek boczny do WordPressa.
Najłatwiejszym sposobem uzyskania pełnej kontroli nad paskiem bocznym jest SeedProd. Oferuje wizualny kreator typu „przeciągnij i upuść”, nie musisz bezpośrednio edytować żadnego kodu ani plików motywów, a pasek boczny możesz dostosować bezpośrednio z pulpitu WordPress.
Możesz również polubić ten post o najlepszych przykładach lead magnet, aby powiększyć swoją listę.
Dziękuje za przeczytanie. Śledź nas na YouTube, Twitterze i Facebooku, aby uzyskać więcej przydatnych treści, które pomogą rozwinąć Twój biznes.