Jak tworzyć responsywne tabele w WordPress
Opublikowany: 2023-02-12Tabele to element projektu witryny internetowej, który może pomóc w eleganckim wyświetlaniu dużych ilości informacji w uporządkowany sposób. Działają całkiem dobrze na tradycyjnych wyświetlaczach komputerowych, ale często mogą powodować niepożądane wrażenia na urządzeniach mobilnych.
Na szczęście istnieje kilka praktycznych rozwiązań do tworzenia bardziej responsywnych tabel. Korzystanie z tych responsywnych praktyk projektowych może poprawić wrażenia użytkownika (UX) Twojej witryny. Oznacza to, że odwiedzający będą mogli łatwiej przeglądać i uzyskiwać dostęp do danych w Twoich tabelach, bez względu na rodzaj używanego urządzenia.
W tym artykule przyjrzymy się, co to znaczy sprawić, by tabela była responsywna. Następnie omówimy dwa sposoby tworzenia responsywnych tabel w WordPress. Zanurzmy się!
Czym są responsywne tabele?
Zwykle celem tabeli jest wyświetlenie wielu danych w sensowny sposób. Jednak podczas próby przeglądania stołów na urządzeniu mobilnym wszystko może pójść nie tak. Dzieje się tak, ponieważ wiersze tabeli są często o wiele kolumn szersze, niż może obsłużyć ekran.
Tworząc responsywną tabelę, zasadniczo tworzysz zestaw reguł dla oryginalnej tabeli danych. Reguły te mogą określać punkty przerwania na podstawie rozmiaru ekranu. Oznacza to, że jeśli użytkownik uzyska dostęp do tabeli na urządzeniu, które jest mniejsze niż ustawiony punkt przerwania, układ tabeli zareaguje poprzez ponowne sformatowanie w celu dopasowania do rozmiaru ekranu.
Responsywne tabele zazwyczaj można ponownie sformatować, dodając pasek przewijania lub układając informacje w stos. Nie chcesz po prostu zmniejszać i upychać informacji w komórkach, gdy zmienia się rozmiar ekranu, ponieważ może to spowodować, że tabela będzie nieczytelna. Na szczęście responsywny projekt nie jest zbyt trudny do osiągnięcia.
Jak zrobić responsywny stół (bez wtyczki)
Zasadniczo istnieją dwa podejścia do responsywności tabeli w WordPress. Najpierw przyjrzymy się, jak wykonać zadanie bez wtyczki.
Będzie to wymagało pewnej wiedzy na temat kodowania, w szczególności zrozumienia kaskadowych arkuszy stylów (CSS). Zalecamy również pracę w środowisku przejściowym lub programistycznym, a nie w działającej witrynie internetowej, dopóki nie zaprojektujesz tabeli, która działa niezawodnie.
Krok 1: Sformatuj tabelę pod kątem responsywnego CSS
W tym przykładzie powiemy, aby dane z naszej przykładowej tabeli zostały ponownie sformatowane w określonym punkcie przerwania. W niektórych przypadkach możesz po prostu dodać pasek przewijania do tabeli, ale faktycznie zgrupujemy dane tabeli, aby były wyświetlane w bardziej czytelnym formacie, który eliminuje potrzebę przewijania w poziomie.
To świetne podejście, ponieważ przewijanie w poziomie może często oznaczać, że przeglądasz dane kolumny wyrwane z kontekstu:
Aby ta tabela działała lepiej, musisz najpierw upewnić się, że tabela jest prawidłowo sformatowana. Jeśli tworzysz tabelę za pomocą Edytora bloków, możesz to zrobić normalnie, a następnie dodać atrybuty <thead> i <tbody>, aby upewnić się, że Twój CSS będzie działał poprawnie:
Po dodaniu tabeli możesz użyć edytora HTML, aby dostosować jej formatowanie. Twój atrybut <thead></thead> musi obejmować wszystkie nagłówki kolumn. W podobny sposób wszystkie kolejne dane tabeli opakujesz w atrybut <tbody></tbody>.
Po dodaniu tagu CSS w następnym kroku arkusze stylów będą w stanie zrozumieć, co ma być wyświetlane jako nagłówki dla każdej kolumny w tabeli i jaka jest treść lub zawartość komórki.
Krok 2: Dodaj niestandardowy tag do swojego CSS
Następnie użyjemy fragmentu niestandardowego kodu CSS i motywu WordPress Twenty Nineteen. Ten motyw ma dość responsywny projekt jako część natywnego kodu, ale nasze dostosowania CSS posuną to jeszcze dalej.
Ponieważ wszystkie motywy są różne, będziesz chciał dokładnie zrozumieć strukturę swojego motywu, aby z powodzeniem wdrożyć responsywny projekt tabeli. Niektóre motywy mogą wymagać dodatkowej biblioteki JavaScript.
W naszym przykładzie przejdziemy do Wygląd > Dostosuj > Dodatkowy CSS , gdzie możemy dodać następujący niestandardowy kod CSS:
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
Po wklejeniu własnego kodu do edytora musisz wybrać Publikuj , aby zmiany zaczęły obowiązywać.
Krok 3: Przetestuj responsywność tabeli w WordPress
WordPress ma przydatną wbudowaną funkcję testowania ekranu, która umożliwia testowanie treści na trzech różnych rozmiarach ekranu. U dołu ekranu, na którym dodałeś niestandardowy CSS, możesz kliknąć ikonę tabletu lub telefonu komórkowego, aby przetestować nowy styl tabeli:
Na potrzeby tego przykładu stworzyliśmy już prostą tabelę, która zawiera wszystkie niezbędne atrybuty HTML do pracy z naszym CSS. Nasz punkt przerwania w CSS jest ustawiony na 600 pikseli, ale można to zmienić w zależności od potrzeb.
Zamiast dodawać pasek przewijania lub zgniatać dane w tabeli, dodany przez nas CSS reorganizuje dane do formatu przyjaznego dla urządzeń mobilnych. Dzięki temu użytkownik urządzenia mobilnego może przewijać w pionie i wyświetlać dane tabeli w kontekście pozostałych powiązanych komórek.
Jak zrobić responsywną tabelę za pomocą wtyczki
Jeśli nie masz ochoty dostosowywać kodu motywu lub CSS, istnieje inna opcja. Dostępnych jest wiele wtyczek WordPress, które mogą pomóc w stworzeniu responsywnego projektu tabeli dla Twojej witryny.
Krok 1: Pobierz wtyczkę
Aby rozpocząć, musisz wybrać wtyczkę. Ponieważ istnieje wiele opcji projektowania responsywnych tabel, na początek wyróżnimy kilka z nich:
- Ninja Tables : Oznaczona jako wtyczka numer jeden WordPress do tworzenia responsywnych tabel, zawiera ponad 100 stylów tabel do wyboru.
- wpDataTables : Jest to darmowa wtyczka z wersją premium, ale wersja lite jest wyposażona w funkcje do tworzenia bogatych i interaktywnych tabel i wykresów.
- WP Responsive Table : Jest to prosta i bezpłatna wtyczka, która ułatwia tworzenie responsywnych tabel, które przewijają się w poziomie na małych ekranach.
W dalszej części tego przykładu użyjemy Ninja Tables, aby zademonstrować, jak utworzyć responsywną tabelę danych w WordPress.
Krok 2: Wprowadź swoje dane
Po zainstalowaniu i aktywacji wtyczki będziesz mógł od razu przejść do tworzenia tabeli. Możesz przejść do NinjaTables > Wszystkie stoły > Dodaj stół :
Tutaj możesz dodać nową tabelę od podstaw lub zaimportować tabelę z pliku. Zamierzamy utworzyć tabelę od podstaw za pomocą opcji Dodaj tabelę . Następnie musisz wprowadzić tytuł i opis tabeli:
Będziesz mieć tutaj również kilka innych opcji. Na przykład, jeśli zakładasz sklep WooCommerce, będziesz mógł użyć tych informacji do utworzenia tabeli WooCommerce.
Po dodaniu informacji kliknij przycisk Dodaj , aby utworzyć tabelę. Następnie musisz rozpocząć wprowadzanie danych. Możesz wybrać opcję Dodaj kolumnę, aby skonfigurować strukturę tabeli:
Aby utworzyć kolumnę, musisz wypełnić kilka pól. Obejmuje to nazwę nagłówka kolumny i typ zawartych w niej danych. Będziesz także mógł ustawić responsywny punkt przerwania:
Aby wybrać spośród wielu opcji, które określają, jak Twoje stoły będą reagować na różne urządzenia, możesz uzyskać dostęp do menu, klikając Zawsze pokazuj na wszystkich urządzeniach :
Po zbudowaniu kolumn wybierz opcję Dodaj dane , a NinjaTables udostępni prosty formularz umożliwiający szybkie dodanie wielu wpisów do tabeli:
Możesz pozostawić zaznaczoną opcję Kontynuuj dodawanie, jeśli chcesz wprowadzić wiele wpisów. Gdy skończysz, możesz zamknąć okno i powrócić do ekranu edycji tabeli.
Krok 3: Sformatuj swoją tabelę
Teraz, gdy masz już tabelę z informacjami, możesz zapoznać się z ustawieniami i opcjami stylu NinjaTable. Z poziomu okna edycji tabeli możesz uzyskać dostęp do większej liczby ustawień na górnych kartach, a także w dolnej części ekranu po prawej stronie:
Będziesz mieć wiele opcji dostosowywania stylu i wyglądu tabeli, w tym naprzemienne kolory wierszy tabeli, wyśrodkowywanie tekstu, ukrywanie danych i inne.
Krok 4: Przetestuj swój stół
NinjaTable ułatwia testowanie responsywności stołu podczas jego edycji. W zakładce Projekt tabeli znajdziesz trzy opcje testowania responsywności ekranu:
Możesz wybrać opcję Komputer , Tablet lub Urządzenie mobilne , aby zobaczyć, jak wyglądałby Twój stół na tego rodzaju urządzeniach.
Każda utworzona tabela zawiera również krótki kod. Ponadto możesz łatwo dodać dowolne tabele do treści swojej witryny, korzystając z bloku NinjaTable, który znajdziesz w sekcji Formatowanie w menu Edytor bloków.
Pozwól WP Engine pomóc Ci zachować responsywność witryny
Zbudowanie strony internetowej, która wykorzystuje solidny, responsywny projekt, nie musi być wyzwaniem, jeśli masz dostęp do odpowiednich zasobów.
W WP Engine chcemy, abyś był w stanie zapewnić swoim klientom najlepsze wrażenia cyfrowe. Sprawdź nasze liczne plany hostingowe WordPress i rozwiązania programistyczne dla Twojego następnego projektu!