Jak dodawać zakładki do postów i stron WordPress

Jak dodawać zakładki do postów i stron WordPress

Karty są dość powszechną funkcją wielu witryn internetowych, zwłaszcza sklepów e-commerce. Właściciele sklepów internetowych zwykle korzystają z kart w obszarze opisu produktu, gdzie dzielą recenzje, opis, specyfikacje techniczne itd. Na wiele kart.


przykład kart w akcji na stronie e-commerce

Mimo to karty znalazły zastosowanie w wielu innych typach witryn, nie tylko w witrynach handlu elektronicznego. Nawet oficjalna strona WordPress.org używa zakładek na stronach opisów wtyczek. Zobacz obraz poniżej, aby zobaczyć podświetlone zakładki na WP.org.

tabs na stronie opisu wtyczki wordpress.org

Wielu innych właścicieli witryn korzysta z kart w różnych typach witryn. Nie należy jednak mylić kart akordeony, które rozwijają się, aby ujawnić informacje. Poniżej proszę obserwować, jak korzystałem z akordeonów na mojej stronie internetowej.

akordeony na vistamedia.xyz

Ale pomijając akordeony, jesteśmy tutaj, aby porozmawiać zakładki, więc nie traćmy koncentracji; Musiałem tylko wyraźnie rozróżnić tabulatory i akordeony. Teraz mam nadzieję, że jesteśmy na tej samej stronie ��

Zasadniczo właściciele stron internetowych używają kart do dzielenia informacji, które w innym przypadku zajęłyby całą stronę lub post. Oznacza to, że zakładki znacznie ułatwiają trawienie informacji, bez konieczności zmuszania użytkowników do milionowego uderzenia w kółko przewijania.

Innymi słowy, zakładki poprawiają użyteczność Twojej witryny, szczególnie w świecie krótsze okresy uwagi. Jeśli więc chcesz zatrzymać użytkowników w witrynie na dłużej bez nudnego ich długimi stronami, powinieneś rozważyć użycie kart.

W dzisiejszym poście pokazujemy dokładnie, jak dodawać zakładki do postów i stron WordPress. Przed końcem tego posta będziesz mieć wszystkie instrukcje potrzebne do korzystania z kart na swoją korzyść. Mamy nadzieję, że spodoba ci się do samego końca i nie wychodź bez dzielenia się przemyśleniami w komentarzach. Na marginesie, zacznijmy.

Użyj programu budującego strony

Jeśli masz już program do tworzenia stron, masz szczęście – prawdopodobnie masz już pod ręką moduł kart. Większość głównych programów budujących strony oferuje karty jako część podstawowego zestawu elementów programu budującego strony. Oto krótkie spojrzenie na dwa z naszych ulubionych.

Elementor Darmowy program budujący strony

Elementor Karty kreatora stron

Informacje i pobieranie Zobacz wersję demonstracyjną

Popularny konstruktor stron Elementor zawiera tabulatory jako część darmowej wersji wtyczki. Wszystko, co musisz zrobić, to wstawić element tabulacji na swojej stronie, a następnie edytować tytuł, treść, styl itp. To wszystko!

WPBakery Premium Page Builder

Karty kreatora stron WPBakery

Używasz motywu premium, który zawiera program budujący strony WPBakery (taki jak nasz własny motyw Total)? Świetny! Karty są wbudowane i łatwe w użyciu.

Moduł karty WPBakery różni się nieco od poprzedniego przykładu, ponieważ karty są początkowo puste po ich dodaniu. Musisz wstawić dodatkowe elementy strony (obszar tekstowy, obrazy, ikony itp.) Na kartach, aby dodać treść. Ale daje to mnóstwo swobody w tworzeniu zakładek tak, jak chcesz (oprócz wbudowanych opcji stylizacji). Wcześniej pisaliśmy o tym narzędziu do tworzenia stron na blogu, więc jeśli chcesz uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem WPBakery (uwaga – ta wtyczka wcześniej nosiła nazwę Visual Composer, więc z góry przepraszam za jakiekolwiek zamieszanie).

Zainstaluj wtyczkę WordPress Tabs

Tabs Darmowa wtyczka WordPress

Jeśli nie używasz narzędzia do tworzenia stron, nie musisz używać go tylko do kart. Istnieje wiele świetnych alternatyw, takich jak bezpłatna wtyczka WordPress znana jako Tabs przez WP Shop Mart. Tabs to fajna wtyczka WordPress, która pomaga tworzyć nieograniczoną liczbę pięknych zakładek bez przerywania potu.

Zacznijmy od zainstalowania wtyczki Tabs WordPress. Ponieważ jest dostępny w oficjalnym repozytorium wtyczek WordPress, możesz zainstalować wtyczkę bezpośrednio z pulpitu administracyjnego WordPress.

Korzystamy z wersji bezpłatnej, ale dostępna jest wersja premium, jeśli chcesz później zaktualizować dodatkowe funkcje.

Instalowanie wtyczki WordPress Tabs

Zaloguj się do pulpitu administratora WordPress i przejdź do Wtyczki> Dodaj nowe i wpisz „tabs wpshopmart” w polu wyszukiwania słów kluczowych. Po znalezieniu odpowiedniej wtyczki naciśnij przycisk Zainstaluj teraz przycisk, jak pokazano poniżej.

instalowanie wtyczki wordpress tabs

Następnie kliknij Aktywuj przycisk. I to wszystko, Twoja wtyczka Tabs Responsive WordPress jest gotowa do użycia. Teraz utwórzmy kilka zakładek, aby odkryć, co ta wtyczka ma do zaoferowania.

Skonfiguruj wtyczkę Responsive WordPress

Aktywacja wtyczki doda nowy element do menu administratora WordPress. Aby utworzyć nowe karty, przejdź do Tabs Responsive> Dodaj nowe karty jak szczegółowo opisujemy poniżej.

dodawanie nowych kart za pomocą responsywnej wtyczki wordpress

Powoduje to przejście do Kreatora responsywnego z kartami, który zawiera wszystkie funkcje potrzebne do tworzenia pięknych kart jak boss. Zobacz zdjęcie poniżej, aby zobaczyć, czego się spodziewać.

tabs responsive wordpress plugin konstruktor kart

Całkiem zwój, prawda? Cóż, większość funkcji można znaleźć na prawym pasku bocznym. Pamiętaj również, że poszczególne karty mają swoje ustawienia. Możesz nawet używać edytorów WYSIWYG na kartach, co oznacza, że ​​masz dużą kontrolę nad swoimi kartami.

Teraz utwórzmy kilka przykładowych zakładek i wyświetlmy je na stronie lub w poście.

Dodaj tytuł

dodaj tytuł karty

Zacznij od nadania zakładkom opisowego tytułu (podobnie jak w przypadku menu nawigacyjnych), jak pokazano na powyższym obrazku. W ten sposób możesz łatwo zidentyfikować swoje karty w panelu administracyjnym WordPress później, na wypadek, gdybyś musiał coś edytować. Na potrzeby tego samouczka ochrzciłem swoje zakładki „Testuj zakładki główne”.

Wybierz Szablon projektu karty

wybierz szablon projektu zakładek

Jak widać na powyższym zrzucie ekranu, następnym krokiem jest wybranie szablonu projektu, którego chcesz użyć dla kart. Darmowa wersja wtyczki Tabs WordPress oferuje tylko jeden szablon projektu, ale zawsze możesz uaktualnić do wersji premium dla 19 więcej. Mówiąc o swobodzie projektowania.

Dodaj karty

Następnie dodaj tyle kart, ile chcesz, jak pokazano poniżej.

dodawanie nowych kart

Stworzyliśmy listę z numerami opisującymi, co możesz zrobić na Dodaj karty sekcja pokazana powyżej. Liczby odpowiadają każdemu obszarowi.

  1. Tytuł karty – Dodaj tytuł karty w tym polu, np. Opis, dane techniczne, szczegóły, itp.
  2. Opis zakładki – Dodaj opis karty tutaj. To pole umożliwia dodanie zawartości karty. Najlepsze jest to, że możesz użyć edytora WYSIWYG (pokazanego w punkcie 3 poniżej), aby dodać bogatą zawartość do kart, w tym obrazy, muzykę i filmy
  3. Użyj WYSIWYG – Jeśli chcesz użyć znajomego W.kapelusz-You-S.ee-jas-W.kapelusz-You-solAby utworzyć zawartość karty, kliknij ten przycisk, aby otworzyć okno podręczne
  4. Ikona zakładki – To pole pomaga wybrać ikonę do użycia na karcie. Wtyczka Tabs WordPress oferuje dostęp do mnóstwa ikon czcionek Awesome, aby podkręcić karty jak profesjonalista
  5. Wyświetl powyższą ikonę – Jeśli chcesz wyświetlić tytuł karty obok ikony, spodoba ci się ta funkcja. Ponadto umożliwia wyłączenie ikony bez dotykania tytułu karty
  6. Usunąć – Naciśnij ten przycisk, aby usunąć określoną kartę
  7. Dodaj nowe karty – Kliknij ten przycisk, aby dodać więcej kart
  8. Usuń wszystko – Masz dość wszystkich zakładek? Po prostu naciśnij Usuń wszystko przycisk, aby zresetować wszystko

Kilka bonusowych wskazówek, które pomogą ci. Po pierwsze, możesz przeciągać i upuszczać karty, aby zmieniać ich kolejność i układać je według własnego uznania.

Po drugie – nie zapomnij trafić Zapisz Projekt przycisk raz lub dwa podczas tworzenia kart, aby upewnić się, że nie stracisz żadnych zmian w przypadku przypadkowego opuszczenia narzędzia do tworzenia kart.

Wreszcie – jeśli potrzebujesz wsparcia, jest duży niebieski Uzyskać wsparcie przycisk tuż pod Dodaj karty sekcja (i na większości stron wtyczki), która prowadzi do oficjalnego forum pomocy Tabs na WordPress.org. Nie wahaj się nacisnąć przycisku wsparcia, jeśli potrzebujesz pomocy w dowolnym momencie.

Krótki kod kart

krótki kod kart

Następnie znajdziesz krótki kod Tabs, którego używasz do dodawania i wyświetlania kart na dowolnej stronie lub postu. Na przykład nasz krótki kod to [TABS_R id = 443]. Aby wyświetlić zakładki na stronie, po prostu skopiowałem i wkleiłem powyższy skrót do tej konkretnej strony.

Widget Zakładki

obsługa widgetów kart

Czy chcesz dodać swoje karty do obszaru widżetów na swojej stronie? Jeśli to brzmi tak, pokochasz obsługę widżetów, która jest dostarczana z wtyczką Tabs WordPress.

Uderzenie w Kliknij tutaj link na powyższym obrazku prowadzi do ekranu widżetów WordPress, w którym możesz swobodnie dodawać swoje zakładki wszędzie tam, gdzie masz obszar widżetów w swoim motywie.

widget kart

niestandardowe CSS

Chociaż wtyczka Tabs WordPress zawiera wiele opcji dostosowywania kart (wystarczy spojrzeć na prawy pasek boczny; jest pełna opcji stylizacji!), Możesz dodać własne niestandardowe style CSS, jak pokazano poniżej.

tabs wordpress plugin niestandardowy css

Ponadto możesz ustawić własne ustawienia jako ustawienia domyślne dla wszystkich nowych kart, po prostu klikając Zaktualizuj ustawienia domyślne przycisk, jak pokazano na obrazku powyżej.

Prawy pasek boczny

tabs opcje stylizacji wtyczek wordpress

Prawy pasek boczny, który podkreślamy na powyższym obrazku, naprawdę pasuje do twojego dnia. Jest wyposażony we wszystkie opcje potrzebne do stylizowania kart zgodnie z treścią serca. Godne uwagi opcje obejmują:

  • Kolor tła karty
  • Kolor czcionki tab
  • Rodzina czcionek i styl
  • Wyświetl opcje dla tytułu karty i ikony
  • Wyrównanie położenia ikony tabulatora, tj. Przed lub po tytule tabulatora
  • Obramowania tabulatorów
  • Wiele animacji opisu karty
  • I wiele więcej

Dodaj swoje zakładki do strony lub postu WordPress

Po dodaniu zawartości karty i opcji stylu przewiń w górę i kliknij Publikować przycisk, jak pokazano poniżej.

W tym momencie Twoje karty są gotowe. Musisz tylko dodać zakładki do strony lub postu WordPress. Po prostu skopiuj skrót karty, który widzieliśmy wcześniej. Naszym jest [TABS_R id = 443].

Uruchom edytor postów (nawet jeśli używasz Gutenberg) i wklej krótki kod do posta / strony. Następnie naciśnij Publikować przycisk, jak pokazano poniżej.

Po około 5 minutach konfigurowania; Używam motywu Twenty Seventeen i dużo Lorem Ipsum, wymyśliłem następujący wynik.

Pamiętaj, że nie dostosowałem kolorów ani nic. Powiedz mi co myślisz; nie było takie łatwe?


Dodawanie zakładek do stron i postów WordPress należy do czwartej klasy. Nie spodziewam się, że napotkasz jakiekolwiek problemy, szczególnie jeśli używasz wtyczki takiej jak Tabs od WP Shop Mart.

Jak dodajesz zakładki do stron i postów WordPress? Jakie są twoje ulubione zakładki Wtyczka WordPress? Podziel się swoimi przemyśleniami w komentarzach. Miłego tworzenia!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map