Jak dodać niestandardowy pasek boczny do WordPress (bez kodowania)

Opublikowany: 2022-02-14

Szukasz ł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.

Spis treści
  1. Metoda 1. Tworzenie niestandardowych pasków bocznych za pomocą SeedProd
  2. Dodawanie wielu niestandardowych pasków bocznych do WordPressa za pomocą SeedProd
  3. Metoda 2. Korzystanie z narzędzia WordPress Customizer
  4. 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 WordPress website builder

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.

Zacznij korzystać z SeedProd już dziś

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.

enter your license key

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.

  1. Użyj jednego z gotowych motywów SeedProd jako punktu wyjścia
  2. 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.

add a theme template

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.

choose a seedprod theme template

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.

Seedprod theme templates

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 .

edit SeedProd sidebar template

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.

SeedProd drag-and-drop sidebar editor

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.

You can delete content by clicking the trashcan icon

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

Custom block settings seedprod

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.

drag and drop content to your WordPress sidebar

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.

customize sidebar background color

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”.

Enable seedprod theme

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.

how to add a sidebar to 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 .

add new theme template

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

New global part theme template

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.

Edit the single page template

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

Add a 2 column section to your single page

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

Add a new template part block

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

Choose your custom WordPress sidebar

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.

Custom sidebar for WordPress pages

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 .

Click the customize button

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.

click the sidebar heading in the theme customizer

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.
customizer sidebar layout settings

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.

WordPress customizer widgets

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ć.

choose a sidebar in the theme customizer

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.

Click the plus icon to add widgets to your sidebar

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.

Example of your new WordPress sidebar

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.

Open the WordPress widgets screen to customize your sidebar

W naszym przypadku motyw zawiera 4 konfigurowalne obszary paska bocznego:

  1. Główny pasek boczny
  2. nagłówek
  3. Sekcja 1 paska stopki
  4. 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.

Add blocks and widgets to your WordPress sidebar

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

View your WordPress sidebar live on your website

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.

Zacznij korzystać z SeedProd już dziś

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.