Jak tworzyć responsywne tabele w WordPress

Tabele HTML, kiedyś powszechnie używane w układach stron internetowych, są teraz bólem głowy dla wielu projektantów stron internetowych. Stoły często najlepiej sprawdzają się przy stałych szerokościach, co oznacza, że mogą siać spustoszenie w responsywnych projektach witryn o doskonałych pikselach. Więc co robi WordPresser?

Pierwszą rzeczą do zrobienia z tabel jest ich używać oszczędnie. Tabele powinny być używane do danych tabelarycznych i nic więcej.

Nie jesteś pewien, czy tabela jest odpowiednią opcją dla określonego zestawu danych? Umieść to w teście arkusza kalkulacyjnego. Czy dane te mają sens przedstawione w arkuszu kalkulacyjnym?

Jeśli tak, to odpowiednim wyborem jest tabela HTML. Jeśli nie, rozważ użycie listy lub innego elementu do prezentacji danych.

Po zidentyfikowaniu tabeli jako najlepszej opcji, co wtedy? Upewnij się, że renderuje się pięknie niezależnie od wielkości urządzenia, które ogląda stół. Łatwiej powiedzieć niż zrobić, prawda?

Nie bój się. W tym samouczku dowiesz się o pięciu różnych narzędziach, których możesz użyć, aby tabele HTML były pięknie responsywne.

Jak Obsługiwane są tabele przez WordPress?

Nie ma prostej odpowiedzi na to pytanie. Sposób prezentacji tabel w WordPress różni się w zależności od motywu, ponieważ stylizacja tabel jest obsługiwana przez CSS dostarczany z każdym motywem.

Tak więc tabele są renderowane zgodnie z regułami CSS dołączonymi do aktywnego motywu. Zmieniaj motywy i sposób renderowania tabel.

Niektóre motywy mają lepszą wbudowaną obsługę responsywnych tabel niż inne. Na przykład TwentySixteen dobrze radzi sobie z tabelami, o ile mają tylko dwie lub trzy kolumny wypełnione krótkimi bitami danych.

Jednak nie wszystkie motywy są tak dokładnie zaprojektowane jak TwentySixteen.

Przyjrzyjmy się, jak TwentySixteen radzi sobie z tabelą HTML podczas renderowania na urządzeniu przenośnym. Oto trochę HTML, który stworzy tabelę z pięcioma kolumnami i sześcioma wierszami.

Pokazuje najpopularniejsze systemy zarządzania treścią według W3Techs.

Po wrzuceniu do postu z aktywowanym motywem dziecięcym TwentySixteen, ta tabela wygląda całkiem dobrze oglądana na laptopie lub monitorze stacjonarnym. To oczywiste, że TwentySixteen zawiera przemyślaną stylizację stołu.

Możemy użyć Chrome Developer Tools device Mode, aby zobaczyć, jak rzeczy wyglądają na mniejszym urządzeniu.

To nie jest idealne.

Programiści TwentySixteen zawierali style CSS, które sprawiają, że tabele są responsywne. Gdyby ta tabela zawierała tylko dwie lub trzy kolumny, prawdopodobnie wyglądałaby całkiem dobrze.

Jednak ta tabela zawiera pięć kolumn, co jest zbyt dużo dla domyślnej stylizacji tabeli zawartej w TwentySixteen.

Naprawmy Ten stół.

Ręczne Dostosowywanie Tabel

Pierwszą opcją, na którą przyjrzymy się, jest ręczna poprawka, która obejmuje dodanie CSS i JavaScript do motywu. To może wydawać się trudne, ale w rzeczywistości jest całkiem proste.

Aby tabele były responsywne, potrzebujemy trzech rzeczy:

• Prawidłowo sformatowana tabela HTML.
• Krótki bit JavaScript do kojarzenia każdej komórki nagłówka tabeli z komórkami danych pojawiającymi się w tej samej kolumnie tabeli.
• Prosty zestaw reguł CSS, który zostanie uruchomiony, gdy wyświetlacz zmniejszy się poniżej określonej szerokości. Ten bit CSS zmieni układ wierszy tabeli w kolumny, ukryje wiersz komórek nagłówków i doda zawartość komórek nagłówków do każdej komórki danych.

Ważne jest, aby pamiętać, że tabela musi być odpowiednio sformatowany, aby to działało.

Skrypt jest przeznaczony do wyszukiwania komórek nagłówkowych w thead element i przypisać je jako atrybuty HTML do komórek danych w tbody element.

Jeśli tworzysz tabelę nie zawiera thead oraz tbody elementy kod nie będzie działać.

Oto JavaScript, którego będziemy używać:

A oto odpowiedni CSS.

Najprostszym sposobem użycia tego kodu jest dodanie go bezpośrednio do posta lub strony, na której pojawia się tabela. Możesz to zrobić, upuszczając CSS pomiędzy styl znaczników, oraz upuszczanie JavaScript pomiędzy skrypt tagi.

Jeśli zdecydujesz się to zrobić, upewnij się, że zminimalizujesz JavaScript przed upuszczeniem go do edytora tekstu lub funkcja wpautop doda podziały akapitów do skryptu, łamiąc go w trakcie.

Wynik jest rzeczywiście bardzo ładny. Oto jak wygląda tabela podczas podglądu z iPhone5 preview w Google Chrome.

Lepszy sposób na stoły

Dodawanie CSS i JavaScript bezpośrednio do posta nie jest najlepsze sposób na dodanie kodu.

Jeśli kiedykolwiek użyjesz tego kodu tylko raz, dodanie go bezpośrednio do posta lub strony, na której pojawia się tabela, jest w porządku.

Jeśli jednak zamierzasz regularnie korzystać z tabel, lepszym sposobem dodania kodu jest osadzenie go bezpośrednio w plikach motywów.

Dodanie kodu do motywu naprawdę nie jest takie trudne. Możesz to zrobić w zaledwie czterech krokach.

• Najpierw upewnij się, że używasz motywu podrzędnego, aby uniknąć utraty pracy przy następnej aktualizacji motywu.
• Po drugie, skopiuj i wklej CSS do motywu styl.css plik.
• Po trzecie, Zapisz JavaScript jako osobny plik i prześlij go do katalogu motywu.
• Po czwarte, użyj wp_enqueue_script funkcja w Twoich motywach funkcje.php plik, aby dodać zasób JavaScript do motywu, upewniając się, aby ustawić in_footer za prawdziwe, kiedy to robisz.

Najtrudniejszą częścią procesu jest dodanie pliku skryptu z wp_enqueue_script ale mogę zrobić ten krok trochę łatwiej.

Oto fragment kodu, który możesz dodać do funkcje.php plik, który doda plik JavaScript do motywu zakładając, że plik JavaScript responsive-stoły.js i umieść go w głównym katalogu tematycznym.

Twój funkcje.php plik może wyglądać nieco inaczej, ale daje to wyobrażenie o tym, jak powinna wyglądać funkcja enqueue.

WPMU dev writer i programista WordPress Daniel Pataki omówił wp_enqueue_script funkcja dogłębnie na tym blogu. Możesz więc odnieść się do tego samouczka–tak jak ja-jeśli zmagasz się z tym krokiem.

Po wykonaniu wszystkich czterech kroków CSS i JavaScript będą dostępne na każdej stronie witryny, a wszelkie tabele w witrynie będą responsywne.

Dobra robota.

Używanie wtyczki do tworzenia tabeli

Oczywiście, może nie chcesz iść do tych wszystkich problemów i po prostu wolisz użyć wtyczki tabeli WordPress.

Z pewnością istnieje wiele wtyczek tabel w katalogu wtyczek WordPress, z których wiele twierdzi, że tabele są responsywne.

Aby zaoszczędzić czas na szukaniu, sprawdź nasz post na temat wyboru najlepszej wtyczki tabeli WordPress, która porównuje różne responsywne wtyczki tabeli, które wykonują dobrą robotę renderowania tabel na urządzeniach o dowolnej wielkości.

Pamiętaj jednak, że te wtyczki nie wpłyną na żadne istniejące tabele już dodane do twojej witryny. Jeśli szukasz wtyczki, która naprawi tabele z mocą wsteczną, sprawdź poniższe wtyczki.

• Magic Liquidizer Responsive Table

  

  Ta wtyczka jest zaprojektowana do tworzenia standardowego HTML tabela elementy reagują. Wszystko, co musisz zrobić, to zainstalować i aktywować wtyczkę, a wszelkie tabele osadzone w postach i stronach będą magicznie upłynnione (made responsive).

  Strona ustawienia wtyczki zawiera opcję określenia szerokości widoku, przy której działają ustawienia responsywne.

  Jeśli tabele zbyt szybko przechodzą w tryb responsywny lub przerywają układ przed przejściem na tryb responsywny, możesz dostosować szerokość widoku.

  Ponadto, jeśli wtyczka nie działa za pomocą tabela element jako selektor, można również ustawić wtyczkę do wyboru tabel przez # id lub .Klasa.

  Co właściwie robi Wtyczka to dodaje Wyświetlacz: Brak; do tabeli CSS przy ustawionej szerokości widoku. Następnie używa JavaScript, aby odbudować tabelę jako listę opisów HTML.

  Nagłówki są dodawane jako terminy, a wartości tabeli są dodawane jako definicje. Oto wynik.

  

  Być może zauważyłeś, że podpis tabeli nie został odebrany i wyświetlony przez tę wtyczkę.

  Jeśli używasz tej wtyczki, będziesz chciał uniknąć używania podpis ponieważ nie będzie wyświetlany, gdy tabela jest wyświetlana w trybie responsywnym.

• Automatyczne Tablice Responsywne

  

  Ta super prosta wtyczka robi dokładnie to, co mówi, że zrobi: automatycznie spraw, aby Twoje tabele były responsywne. Zainstaluj go, Aktywuj, skonfiguruj kilka podstawowych ustawień, a wszystkie tabele HTML osadzone w postach i stronach będą renderowane responsywnie.

  Po zainstalowaniu wtyczki odwiedź Ustawienia > Responsywne Stoły aby skonfigurować wtyczkę.

  Najpierw zaznacz pole wyboru, aby tabele były responsywne, następnie ustaw punkt przerwania, w którym powinny przełączyć się w tryb responsywny, a następnie zdecyduj, w jaki sposób mają być stylizowane.

  Wybranie domyślnych opcji stylizacji spowoduje utworzenie tabeli, która wygląda następująco:

  

  Całkiem nieźle, prawda? Jak to działa?

  Podobnie jak Magic Liquidizer, ten plugin dodaje Wyświetlacz: Brak; do tabeli i przebudowuje tabele przy użyciu JavaScript.

  Jednak zamiast używać znaczącej semantycznie listy opisów, ta wtyczka buduje tabelę responsywną z elementów div.

  Efekt końcowy wygląda naprawdę ładnie, ale z punktu widzenia semantyki znaczniki nie są idealne.

  Ponadto warto zauważyć, że ta wtyczka nie renderuje podpisu tabeli w trybie responsywnym. Musisz więc znaleźć inny sposób dodania podpisu lub tytułu tabeli.

Która opcja jest dla ciebie odpowiednia?

To zależy.

Jak często korzystasz z tabel?

Jakie zestawy danych prezentujesz w tabelach HTML?

Czy chcesz wtyczkę, która robi wszystkie ciężkie rzeczy, czy chcesz być praktyczny z kodem swojej witryny?

Sposób, w jaki odpowiesz na te pytania, pomoże określić, które z tych narzędzi jest odpowiednie dla Twojej witryny WordPress.

• Potrzebujesz potężnego narzędzia do tworzenia złożonych tabel, które można sortować i przeszukiwać? Czy masz do czynienia z dużymi zbiorami danych i tabelami o stałej szerokości, które chcesz przewijać bez naruszania responsywnego projektu witryny? Następnie wybierz jedną z wtyczek, które sprawdziliśmy w tym poście.
• Czy lubisz grzebać w kodzie i chcesz ręcznie wykonane rozwiązanie, które jest lekkie na zasoby i wygląda pięknie? Wypróbuj ręczną implementację i dostosuj ją, aby była twoja.
• Szukasz tylko łatwego przycisku? Spójrz na automatyczne responsywne tabele lub Magic Liquidizer Responsive Table. Jedno z tych dwóch na pewno cię uszczęśliwi.

Tabele nie muszą wyglądać okropnie na smartfonach i tabletach. Przy odrobinie przezorności i wysiłku możesz użyć tabel HTML na swojej stronie WordPress i sprawić, by wyglądały świetnie na każdym urządzeniu.

Tagi:

• projekt
• responsywny stół
• tabele