Wszystko, co możesz zrobić, aby usprawnić swoją witrynę, jest dobrą rzeczą. W końcu im mniej pracy Użytkownicy witryny muszą zrobić, aby uzyskać informacje, których chcą, tym lepiej. Może to jednak stanowić wyzwanie, jeśli Twoja witryna ze swojej natury musi zawierać wiele informacji. Efekt końcowy takich witryn zazwyczaj obejmuje te z bardzo długimi stronami, których prawie nikt nie przewija przez całą drogę i te z mnóstwem stron, które podobnie prawie nikt nie kliknie.

Jaka jest więc alternatywa dla super długiej strony lub zbyt wielu stron? Dlaczego, tabs oczywiście! I nie martw się – nie musisz być geniuszem kodowania, aby uzyskać karty na swojej stronie. Istnieje wiele wtyczek, które umożliwiają tę funkcję. Zebrałem kilka najlepszych, aby pomóc Ci szybko i łatwo dodać zawartość z kartami do witryny WordPress.

Zakładki Post UI

Post UI Tabs

Zakładki Post UI ułatwiają dodawanie zakładek jQuery w treści, niezależnie od tego, czy są to posty, strony lub inne typy postów. Wszystko, co musisz zrobić, to wstawić skróty do edytora, a włączysz karty.

Wtyczka zawiera 24 różne motywy interfejsu użytkownika, aby ułatwić dopasowanie istniejącego motywu. Lub, jeśli masz kotlety, Utwórz niestandardowy arkusz stylów, aby jeszcze bardziej poprawić wygląd.

Po zainstalowaniu wtyczki wystarczy kliknąć odpowiedni przycisk TinyMCE w edytorze postów, aby wstawić odpowiedni shortcode. Zgodnie z oficjalną listą WordPress directory dla zakładek Post UI, możesz również wstawiać zakładki za pomocą następujących krótkich kodów bezpośrednio:

[tab name=”Nazwa Twojej karty 1″]zawartość twojej karty [/tab] [tab name=”Twoja nazwa karty 2″]zawartość twojej karty [/tab] [tab name=”Twoja nazwa karty 3″]zawartość twojej karty [/tab] [end_tabset]

Zapraszam do wstawiania HTML w tych zakładkach. Powinien być obsługiwany bez problemu, a zobaczysz swoją zawartość wyświetlaną tak, jak w dowolnym innym miejscu tylko w Twojej witrynie, jak mogłeś się domyślić, jest ona zawarta w karcie.

Łatwe Responsywne Karty

Easy Responsive Tabs

Kolejną wtyczką, którą zdecydowanie powinieneś sprawdzić, jeśli chcesz dodać karty do swojej witryny, są łatwe responsywne karty. Nie tylko jest kompatybilny z bootstrap 3.0, ale także dodaje przyciski TinyMCE do edytora wizualnego, dzięki czemu bardzo łatwo jest wstawiać responsywne karty za pomocą kliknięcia przycisku.

Po kliknięciu tego przycisku otworzy się panel ustawień, który pozwala wybrać kolor dla kilku różnych aspektów kart, w tym nagłówków, aktywnych kart, najechania kursorem, tła i innych. Możesz także ustawić Zakładki na górze lub na dole. Ta wtyczka jest prawdziwym ulubionym ze względu na to, jak łatwo jest skonfigurować i zacząć działać od razu.

Tabby Responsywne Karty

Tabby Responsive Tabs

Jeśli responsywność jest jednym z głównych problemów, Tabby responsywne karty jest dobrym rozwiązaniem dla ciebie. Po prostu ta wtyczka umożliwia wstawianie responsywnych kart w postach i stronach za pomocą skrótów. Obsługuje więcej niż jeden zestaw kart na prostej stronie lub poście i używa jQuery do tworzenia kart i efektu akordeonu na mniejszych ekranach. Możesz również uzyskać dostęp do kart za pomocą klawiatury.

Aby wstawić karty, wystarczy wstawić dwa skróty: [tabby] i [tabbyending]. W szczególności, można użyć [tabby title= „tabname”], aby ustawić nazwę karty. Następnie zapisujesz zawartość, która powinna być zawarta w tej karcie, w tym dowolny kod HTML, który chcesz. Możesz wstawić więcej kart, jeśli chcesz. Następnie, aby zakończyć ten zestaw kart, użyj krótkiego kodu [tabbyending], aby zamknąć grupę kart.

Teraz, jeśli chcesz wprowadzić zmiany stylu w tych kartach, musisz zagłębić się nieco bardziej w kod. Zgodnie ze stroną katalogu wtyczki WordPress, musisz skopiować arkusz stylów wtyczki do motywu podrzędnego i wprowadzić modyfikacje stylu karty lub stylu akordeonu, jak uważasz.

Widżety w kartach

Czasami twoje potrzeby w poszczególnych zakładkach są nieco bardziej złożone. W takich przypadkach są widżety w wtyczce Tabs. Pozwala umieścić dowolne widżety w zakładkach, aby zaoszczędzić miejsce i stworzyć bardziej zorganizowane środowisko w witrynie. Ma wiele zastosowań.

Na przykład możesz użyć kart do wyświetlania widżetów ostatnich postów i ostatnich komentarzy. Możesz dodać kategorie, aby dopełnić wyświetlanie kart dalej. Możesz też utworzyć grupę zakładek dedykowanych wbudowanym widżetom mediów społecznościowych, takim jak Facebook Like Box, Twitter feed, Google+, Pinterest pinboard i tak dalej.

Jedną z rzeczy, które naprawdę lubię w widżetach na kartach, jest to, że nie zawiera własnych stylów, co pozwala na stylizowanie według Twojego motywu. Karty wtapiają się w Twoją witrynę i wyglądają, jakby do niej należały.

Tytuły kart można przewijać, co jest miłą alternatywą dla tradycyjnego podejścia stosowego. Istnieją również opcje animacji dla przejść między widżetami i możesz ustawić, ile sekund będzie czekać między przechodzeniem z jednej karty do następnej.

Podobnie jak w przypadku wszystkich innych wtyczek tab wymienionych tutaj, jest łatwy do wstawienia dzięki krótkiemu kodowi [wit].

WP UI-tabulatory, akordeony, suwaki

WP UI

Ostatnia wtyczka, o której będę mówił, to WP UI – Tabs, akordeony, suwaki. Ta wtyczka nie tylko ułatwia osadzanie kart w postach i stronach, ale także pozwala na prostą integrację innych stylów formatowania, takich jak akordeony, suwaki i okna dialogowe. Wtyczka jest zasilana przez jQuery i możesz użyć więcej niż jednego motywu jQuery UI na każdej stronie, jeśli chcesz.

Zawiera łatwą w użyciu stronę opcji, która ułatwia konfigurację i użytkowanie. Dodaje również dedykowane menu i okna dialogowe dla prostszej nawigacji. Podobnie jak wszystkie powyższe wtyczki, ta opiera się przede wszystkim na shortcodes do szybkiej implementacji. Shortcode [wp tabs] można łatwo ulepszyć za pomocą argumentu style, który można modyfikować na około 24 różne sposoby, takie jak” wpui-blue”, aby nadać kartom bardziej spójny wygląd z Twoim motywem.

Prawdziwą atrakcją tej wtyczki dla mnie jest jednak możliwość wyświetlania postów i kanałów w kartach lub akordeonach. Shortcode jest [wptabposts] i pozwala na wyświetlanie postów w serii kart. Lub, jeśli chcesz wyświetlić kanał na stronie lub poście, po prostu użyj skrótu [wpuifeeds]. Zgodnie z listą katalogu WordPress dla WP UI, możesz użyć [wpspoiler post=”3028″], aby wyświetlić tylko jeden post w tym wyspecjalizowanym formacie.

Symple Shortcodes

Symple Shortcodes Minimal Tabs

Oczywiście, jeśli potrzebujesz tylko podstawowych kart, pamiętaj, aby wziąć pod uwagę wtyczkę Symple Shortcodes WordPress ręcznie wykonaną tutaj w WPExplorer. Wtyczka zawiera piękne Minimalne zakładki, których możesz użyć na dowolnej stronie swojej witryny, a także wiele innych wspaniałych funkcji organizowania treści. Dodaj kolumny, przełączniki, akordeony i wiele innych akcentów (przyciski, ikony społecznościowe itp.).


Chociaż na początku może to wydawać się skomplikowane, proces dodawania kart do witryny jest w rzeczywistości dość prosty. Powyższe wtyczki sprawiają, że jest to bardzo proste, a efekt końcowy jest zarówno atrakcyjny, jak i funkcjonalny. Moim zdaniem warto je sprawdzić. Odwiedzający Twoją witrynę uzyskują dostęp do tylu informacji, ile potrzebujesz, aby mieć dostęp bez zaśmiecania ogólnego projektu. Jest to szybkie rozwiązanie dla witryn z dużą ilością zasobów i treści.

Czy korzystasz z zakładek na swojej stronie? A co z którąkolwiek z tych wtyczek, konkretnie? Jeśli tak, czy pracowali dla Ciebie? Czy znalazłeś inny sposób na włączenie zakładek do swojej witryny? Chciałbym usłyszeć Twoje doświadczenia z tym sprytnym sztuczką organizacyjną w komentarzach!

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd „nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…