TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak tworzyć responsywne tabele w WordPressie?

114

Nowy edytor Gutenberg ma piękny blok tabel do wstawiania tabel w witrynie WordPress. Tabela będzie wyglądać pięknie na Twojej stronie, masz również opcje, aby podać alternatywne kolory (paski) dla wierszy i zmienić ustawienia, aby zmniejszyć kolumny, aby dopasować się do trybu. Największym problemem jest jednak to, że tabele nie reagują na urządzenia mobilne. Szerokość urządzenia mobilnego może zmieścić maksymalnie trzy lub cztery kolumny w zależności od zawartości tabeli. Gdy masz więcej kolumn, przeglądarka skróci wyświetlanie do szerokości kontenera. Doprowadzi to do sytuacji, w której użytkownicy nie będą mogli zobaczyć ukrytej zawartości Twoich tabel. Dlatego blok tabeli Gutenberg jest bezużyteczny, gdy chcesz mieć responsywne tabele w swojej witrynie.

Istnieje wiele darmowych i płatnych wtyczek do tworzenia responsywnych tabel na stronie WordPress. Naszą ulubioną wtyczką jest TablePress i wyjaśnimy, jak tworzyć responsywne tabele w WordPressie za pomocą wtyczki TablePress.

Dlaczego TablePress?

  • TablesPress to jedna z najpopularniejszych wtyczek do tworzenia tabel w WordPressie.
  • Deweloper oferuje przyjazny dla użytkownika interfejs i stale utrzymuje tabelę.
  • Możesz znaleźć dobrą dokumentację dotyczącą korzystania z wtyczki.
  • Co najważniejsze, wtyczka jest darmowa. Możesz nawet pobrać rozszerzenia za darmo, chociaż programista prosi o darowiznę. Jest to w dużym kontraście z wieloma chciwymi programistami, którzy wprowadzają darmowe funkcje do wersji płatnej, gdy wtyczka staje się popularna.

Instalowanie TablePress i dodatków

Możesz zainstalować i aktywować wtyczkę TablePress z pulpitu administratora WordPress, podobnie jak każda inna wtyczka. Jednak domyślne tabele TablePress nie reagują podobnie do tabel Gutenberga. Aby tworzyć responsywne tabele, musisz zainstalować rozszerzenie.

  • Przejdź do strony rozszerzenia responsywnego TablePress.
  • Pobierz plik zip rozszerzenia Responsive Tables
  • Jak wspomniano, programista prosi o 9 USD jako darowiznę za to rozszerzenie. Zdecydowanie zalecamy przekazanie 9 USD, jeśli planujesz używać wtyczki jako głównego zasobu w swojej witrynie.
  • Wróć do panelu administracyjnego WordPress i przejdź do sekcji „Wtyczki > Dodaj nowy".
  • Kliknij przycisk „Prześlij wtyczkę”. Kliknij przycisk „Wybierz plik” i wybierz pobrany wcześniej plik „tablepress-responsive-tables.zip”.
  • Na koniec kliknij przycisk „Zainstaluj teraz”, aby rozpocząć instalację rozszerzenia w swojej witrynie.
  • Aktywuj rozszerzenie po udanej instalacji.

Jak tworzyć responsywne tabele w WordPressie?

Pamiętaj, aby najpierw zainstalować i aktywować wtyczkę TablesPress, zanim spróbujesz zainstalować rozszerzenie responsywne tabele.

Tworzenie tabeli

TablePress oferuje różne sposoby tworzenia tabeli; możesz odnieść się do funkcji wtyczki w naszym wcześniejszym artykule na temat tworzenia tabeli za pomocą TablePress. Poniżej znajduje się podsumowanie kroków tworzenia tabeli w TablePress:

  • Przejdź do menu „Narzędzia > TablePress > Dodaj nowy” i rozpocznij tworzenie tabeli oraz dostosuj opcje.
  • Alternatywnie przejdź do zakładki „Import” i zaimportuj tabelę z zewnętrznego źródła danych. Na przykład możesz po prostu przesłać dane arkusza Excel, aby utworzyć tabelę.

Jak tworzyć responsywne tabele w WordPressie?

Po utworzeniu tabeli zapisz zmiany i zanotuj shortcode identyfikatora tabeli .

Wstawianie skróconego kodu tabeli

Klasyczny interfejs edytora miał ikonę TablePress, która pomaga wybrać tabelę w edytorze postów. Jednak nie masz bloku TablePress w edytorze Gutenberg. Dlatego musisz ręcznie osadzić shortcode tabeli w swoim poście lub na stronie za pomocą bloku shortcode.

Tabele TablePress będą miały krótki kod identyfikatora tabeli w formacie id tabeli = xxx / w nawiasach kwadratowych. Dodaj blok shortcode i wstaw krótki kod identyfikatora tabeli, jak wcześniej zanotowałeś.

Sprawianie, by tabele były responsywne

TablePress oferuje trzy różne sposoby tworzenia responsywnych tabel.

  • Zwój
  • Trzepnięcie
  • Zawalić się

Ponieważ używamy wtyczki TablePress, omówmy każdą opcję z przykładową tabelą.

Responsywna tabela przewijania

Jest to najlepsza opcja, aby Twoja tabela była responsywna, gdy tabela ma wiele kolumn. Po prostu doda poziomy pasek przewijania, aby użytkownicy mogli przesuwać i wyświetlać zawartość poza ekranem. Oto przykład, jak będzie wyglądać responsywna tabela przewijania.

Responsywna Zwiń tabelę

Druga opcja to responsywna tabela zwijania. Jak sama nazwa wskazuje, doda ikonę + w wierszach, aby użytkownicy mogli dotknąć / kliknąć, aby wyświetlić więcej szczegółów. Rozszerzenie wtyczki przeniesie ukrytą zawartość tabeli pod ikoną pokaż / ukryj. Jest to bardzo przydatne, aby pokazać kilka ważnych kolumn i ukryć pozostałe dane pod przyciskiem +.

Responsywny stół obrotowy

Ostatnią opcją jest odwrócenie, podobne do transpozycji w programie Microsoft Excel. Spowoduje to przekształcenie wiersza w kolumny i kolumny w wiersze. Możesz użyć flip table, jeśli pasuje do zawartości twojego stołu. Poniżej znajduje się przykład responsywnej tabeli flip stworzonej za pomocą wtyczki TablePress.

Nazwa Temat 1 Temat 2 Temat 3 Temat 4 Temat 5 Temat 6 Temat 7 Temat 8 Temat 9 Temat 10 Temat 11 Temat 12 Temat 13
Jan 50 60 70 45 68 98 78 54 21 23 43 76 87
Paweł 89 65 45 12 32 56 78 89 czternaście 56 98 56 45
Dawid 98 84 65 89 12 45 98 65 32 12 45 43 75
Ralf 65 56 23 45 78 54 65 21 35 64 90 78 34
Krauss 15 56 48 98 65 45 78 23 56 45 87 56 98
Piotr 45 89 98 51 65 65 67 43 23 76 45 34 87
Bing 67 54 89 76 90 56 76 80 98 56 98 76 54

Powiązane: Recenzja wtyczki responsywnego flipbooka WordPress.

Włączanie funkcji Flip Responsable Tables na określonych urządzeniach

Zwykle możesz użyć responsywnej tabeli skierowanej do użytkowników mobilnych. W takim przypadku wystarczy zmienić shortcode tabeli tak, aby zawierał tryb responsywny. Aby przetestować tabele, musisz wyświetlić tabele w telefonie komórkowym lub skorzystać z opcji przełączania urządzeń w sekcji narzędzi programistycznych w przeglądarkach Chrome / Firefox / Edge. Jeśli używasz Safari na Macu, włącz menu programistyczne, aby przejść do trybu responsywnego.

Jeśli jednak masz większe tabele z wieloma kolumnami, możesz potrzebować tabeli responsywnej nawet na komputerze stacjonarnym lub tablecie. Rozszerzenie wtyczki ułatwia to zadanie, dodając punkt przerwania dla responsywnej tabeli. Tryby przewijania i zwijania będą działać na wszystkich urządzeniach bez dodawania punktu przerwania. W trybie odwracania zmień krótki kod, jak poniżej, aby tabela reagowała na różne urządzenia. (upewnij się, że kody skrócone znajdują się w nawiasach kwadratowych [ ]).

  • table id=123 responisve= odwróć responsive_breakpoint=komputer /
  • table id=123 responisve=odwróć responsive_breakpoint=tablet /
  • table id=123 responisve= odwróć responsive_breakpoint=mobile /
  • table id=123 responisve= odwróć responsive_breakpoint=wszystkie /

Oto dokładne wymiary punktów przerwania:

  • Desktop – urządzenia o szerokości mniejszej niż 1200px
  • Tablet – urządzenia o szerokości mniejszej niż 980px
  • Telefon – urządzenia o szerokości mniejszej niż 768px
  • Wszystkie – dodaj responsywność na wszystkich urządzeniach, niezależnie od rozmiaru urządzenia.

Uwaga dotycząca szybkości strony

Jak widać, łatwo jest wstawiać różne typy responsywnych tabel na wszystkich urządzeniach. Problem, który zauważyliśmy z rozszerzeniem, polega na tym, że doda dodatkowy plik CSS dla trybu flip. Większość wtyczek buforujących wyklucza ten arkusz stylów bez łączenia z innymi plikami CSS, tworząc w ten sposób ostrzeżenie w Google PageSpeed ​​Insights. Ponadto wtyczka załaduje również style i skrypty na wszystkich stronach Twojej witryny, niezależnie od tego, czy strona ma tabelę, czy nie. Jeśli masz tylko kilka tabel, nie zalecamy używania wtyczki TablePress do poprawy szybkości strony.

Źródło nagrywania: www.webnots.com

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów