Jak dodawać zakładki do wpisów i stron WordPress?
Zakładki są dość powszechną funkcją na wielu stronach internetowych, zwłaszcza w e-sklepach. Właściciele sklepów internetowych zwykle używają ich do opisania produktu, w których publikują recenzje, opisy, specyfikacje i inne informacji. Przykładem może służyć strona produktowa na TemplateMonster marketplace (rys. 1). Na niej użytkownik może szybko przełączyć się pomiędzy informacjami o funkcjach i szczegółach, zapoznać z recenzjami, komentarzami itd.
Rysunek 1. Strona produktowa na TemplateMonster
Ale zakładki stosowane są nie tylko w sklepach internetowych. Można je zobaczyć na portalach informacyjnych, witrynach biznesowych i blogach. Jeśli wchodziłeś na stronę wordpress.org, pewnie też zauważyłeś takie zakładki na stronach wtyczek (rys. 2).
Rysunek 2. Strona wtyczki na repozytorium WordPress
Jeśli chcesz dodać zakładki na własną stronę, musisz napisać funkcję samodzielnie oraz skorzystać z gotowej wtyczki. Niestety WordPress nie posiada standardowych shortcodes oraz dodatkowych rozszerzeń do tworzenia zakładek. Ale nie warto się przejmować! Do użytku dostępne są darmowe narzędzia, które pomogą Ci realizować powyższy cel. W dzisiejszym wpisie pokażemy Ci kilka sposobów jak to zrobić za pomocą kreatorów stron oraz wtyczki z repozytorium WordPerss.
- Użycia kreatorów stron
Jeśli korzystasz z motywu posiadającego Elementor oraz WPBakery na pokładzie, możesz dodać zakładki na stronę bez potrzeby instalowania dodatkowej wtyczki. Potrzebne opcje dostępne są bezpośrednio w tych kreatorach.
W przypadku Elementora sprawa wygląda prościej. Widget „zakładki” jest dostępny w darmowej wersji kreatora, którą można pobrać na stronie wordpess.org. Potrzebna sekcja znajduje się w panelu elementów (rys. 3).
Rysunek 3. Widget „Zakładki” w Elementorze
Podstawowe opcje do tworzenia zakładek (rys. 4).
Rysunek 4. Opcje widgetu „Zakładki”
Aby skorzystać z zakładek w WPBakery, musisz posiadać płatną wersję tego kreatora. Więc ten przykład będzie ciekawy przede wszystkim dla użytkowników płatnych motywów zawierających WPBakery oraz miłośników wspomnianego kreatora.
Moduł zakładek w WPBakery różni się od rozwiązania w Elementarze (rys. 5). Przy dodaniu sekcji na stronę pola będą puste. Jednak podany kteator posiada więcej możliwości do personalizacji zakładek (oprócz wbudowanych parametrów stylu w Elementorze).
Rysunek 5. Widget „Zakładki” w WPBakery
- Użycie gotowych wtyczek
W repozytorium WordPess można znaleźć sporo wtyczek, które pozwalają tworzyć zakładki we wpisach i na stronach. Wystarczy wstawić zapytanie „Tabs WordPress” do wyszukiwarki, aby się o tym przekonać (rys. 6).
Rysunek 6. Poszukiwanie wtyczki w repozytorium WordPress
Dla przykładu pokażemy Ci jak dodawać zakładki do wpisów i stron za pomocą wtyczki Tabs. Ma dobre oceny użytkowników i ponad 20 tysięcy pobrań. Jeśli ta wtyczki Ci nie będzie pasowała, możesz skorzystać z innego rozwiązania 🙂
Po instalacji wtyczki Tabs w panelu administratora pojawi się sekcja Tabs Responsive (rys. 7).
Rysunek 7. Sekcja Tabs Responsive w panelu administratora
Za pomocą tej sekcji można tworzyć nowe zakładki i dalej używać ich w odpowiednich wpisach i na stronach. Pokażemy jak to wygląda na praktyce.
Przechodzimy do sekcji Add New Tabs (Dodać nową zakładkę). Przewijamy informacje reklamowe i oferty z gotowymi zakładkami. Nas będzie interesować rozdział Add Tabs czyli Dodaj zakładkę (rys. 8).
Rysunek 8. Dodanie zakładek
Sekcja kierowania zakładką zawiera (rys. 9) pole z tytułem (Tab Title), opisem (Tab Description), ikoną (Tab Icon) i włączeniem/wyłączeniem ikony obok tytułu (Display Above Icon).
Rysunek 9. Sekcja kierowania zakładką
Dodajemy przykładowe dane do tych pół, wybieramy potrzebną ikonę i przechodzimy do następnych ustawień zakładek. Po prawej stronie znajduje się sporo dodatkowych opcji, które pomogą spersonalizować zakładki: ustawić kolory tła i fontów, rozmiary ikon i tytułów, położenie tych elementów itd. (rys. 10).
Rysunek 10. Ustawienie zakładek
W naszym przypadku zostawimy te opcje bez zmian i przejdziemy do zapisywania zakładek stworzonych przez nas. Dlatego warto wstawić nazwę w pole Dodaj tytuł i kliknąć przycisk Opublikuj (rys. 11).
Rysunek 11. Zapisywanie projektu zakładek
Po wykonaniu tego kroku można przejść do sekcji Tabs Responsive – All tabs (Wszystkie zakładki), aby zobaczyć nasz projekt (rys. 12). Nas będzie interesował shortcode, który warto skopiować i dalej wstawić w potrzebny wpis lub stronę.
Rysunek 12. Zapisywanie projektu zakładek
No i na sam koniec, można przejść do potrzebnego wpisu lub strony i wstawić w zawartość potrzebny promokod. W naszym przypadku to dowolny artykuł (rys. 13).
Rysunek 13. Dodanie shortcode do wpisu
Po zapisywaniu zmian nasz wpis wygląda następnie:
Rysunek 14. Wygląd zakładek na stronie
Jak widać z powyższego rysunku, w artykule pojawiły się zakładki, więc wtyczka działa poprawnie.
Podsumowanie
W dzisiejszym wpisie pokazaliśmy Ci kilka sposobów na dodanie zakładek do wpisów i stron witryny. Jeśli korzystasz z Elementora oraz WPBakery – popularnych kreatorów wizualnych, – masz potrzebne widgety na pokładzie. Z ich pomocą możesz łatwo dodać zakładki do potrzebnego artykułu lub strony. W przeciwnym razie możesz skorzystać z gotowych wtyczek dla WordPress. Na stronie wordpress.org jest sporo takich rozwiązań. W tym wpisie pokazaliśmy Ci wtyczkę Tabs, która ma dobre oceny od użytkowników, jest darmowa i posiada potrzebne opcje do użycia.
P.S. Czy używasz zakładek na stronie? W jaki sposób je tworzysz? Prosimy podzielić się doświadczeniem.