Coraz częściej pytacie mnie o to, jak zrobić responsywną tabelę na WordPressie z wykorzystaniem wtyczki TablePress. Sama w sobie wtyczka daje wiele możliwości, ale wiele opcji dostępnych jest w formie dodatkowych rozszerzeń. Co prawda większość z nich w opisie zawiera nazwę PRO lub Premium, co mogłoby wskazywać na dodatkowe koszty, ale tak nie jest. Oczywiście jeżeli chcemy, to możemy wspomóc twórcę wtyczki i zasilić jego konto jakaś drobną opłatą, ale nie jest to warunkiem koniecznym do skorzystania z rozszerzenia. I tak jest właśnie w przypadku Responsive Tables, czyli dodatkowego rozszerzenia do wtyczki TablePress, które pozwala na stworzenie dostosowanej do urządzeń mobilnych tabeli. Ja osobiście zachęcam Was do kliknięcia w przycisk Donate, bo musicie przyznać, że twórca wtyczki, zrobił naprawdę świetną robotę, a sama wtyczka jest jedną z najczęściej polecanych jeżeli chodzi o tabele na WordPressie. 

Użycie rozszerzenia nie jest skomplikowane i opiera się na trzech wariantach wyglądu do wyboru. Warto też wspomnieć, że rozszerzenie, które dostosowuje tabelę pod telefony, czy tablety w dwóch wariantach zmienia układ kolumn lub wierszy, więc na urządzeniach mobilnych nasza tabela otrzymuje nowy, nieco zmieniony wygląd i układ.  

Responsywne TablePress – od czego zacząć?

Przede wszystkim zachęcam Was do zapoznania się ze wszystkimi informacjami zawartymi na stronie rozszerzenia do wtyczki. Tobias Bäthge (Twórca wtyczki i rozszerzeń) bardzo dokładnie opisuje, jak należy posłużyć się rozszerzeniem do wtyczki, aby działała ona prawidłowo na urządzeniach mobilnych. Jeżeli jednak jego poradnik to za mało, to zapraszam dalej 🙂

Zaczynamy od pobrania wtyczki. Przejdź na stronę Tebblepress, a następnie kliknij w Download: Responsive Tables Extension 1.5 na zielonym polu. Pobraną wtyczkę dodaj do WordPressa:

  • Z lewego, bocznego menu WordPressa wybierz Wtyczki, następnie Dodaj nowąWysili wtyczkę na serwer.
  • Kliknij w przycisk Wybierz plik, odszukaj pobraną wtyczkę na swoim komputerze i kliknij przycisk Zainstaluj teraz.
  • Następnie kliknij w Włącz wtyczkę.
  • Gotowe. Wtyczka jest aktywna, więc możesz stworzyć swoją tabelę, a w następnych krokach dowiesz się jak ją skonfigurować, aby działała na urządzeniach mobilnych.

Z rozszerzeniem Responsive Tables możemy dostosować nasza tabelę na urządzenia mobilne na trzy sposoby: przewijanie w bok wierszy (flip), przewijanie w bok całej tabeli z nagłówkami (scroll) lub zakładki rozwijane (collapse). Żeby łatwiej było nam zobrazować różnicę, zacznijmy od tabeli wyjściowej. Poniżej na zdjęciu widzicie tabelę, która wyświetla się na komputerach:

Flip – czyli przewijanie horyzontalne wierszy

Pierwszym sposobem na dostosowanie tabeli na urządzenia mobilne jest metoda przewijania horyzontalnego – czyli suniemy palcem po ekranie telefonu czy tabletu w lewo lub w prawo i w taki sposób przewijamy wiersze naszej tabeli. Wiersze nagłówkowe zostają umieszczone po lewej stronie i pozostają nieruchome – są jakby zablokowane i przewijamy tylko pozostałe wiersze tabeli. Żeby móc taki efekt uzyskać, to tworzymy standardową tabelę z wykorzystaniem wtyczki TablePress. Następnie przechodzimy do wpisu, strony lub projektu – gdziekolwiek, gdzie chcemy nasza tabelę umieścić i dodajemy poniższy kod, który składa się z ID tabeli, określenia sposobu przewijania (w tym przypadku flip) i urządzenia, dla którego ma nastąpić zmiana w wyświetlaniu tabeli:

Dla telefonu:
[table id=99 responsive=flip responsive_breakpoint=phone/]

Dla tabletu:
[table id=99 responsive=flip responsive_breakpoint=tablet/]

Dla telefonu i tabletu:
[table id=99 responsive=flip responsive_breakpoint=phone responsive_breakpoint=tablet/]

Dla telefonu, tabletu i komputera:
[table id=99 responsive=flip responsive_breakpoint=all/]

Opcja flip tym różni się od opcji scroll czy collapse, że daje nam możliwość wskazania na jakim urządzeniu ten właśnie układ ma zostać zastosowany. 

Collapse – czyli rozwijanie ukrytych kolumn

Szerokość urządzeń mobilnych jest ograniczona, dlatego np. na telefonie wyświetli nam się maksymalnie od 3 do 4 kolumn, wszystko zależy od tego jak długie będą nazwy nagłówków poszczególnych kolumn. Zastosowanie efektu collapse, pokazuje 3 lub 4 pierwsze kolumny naszej tabeli, a resztę zawartości ukrywa, przenosząc ją w rozwijane zakładki. 

 

Żeby dodać efekt rozwijanej tabeli (collapse) do naszego wpisu dodajemy poniższy kod:

[table id=99 responsive=collapse/]

To o czym należy pamiętać, to prawidłowy numer ID tabeli. Każda tabela, którą utworzymy dostaje swój unikalny numer ID, i w zależności od tego, którą tabelę chcemy wstawić, takim shortcodem się posługujemy.  

Scroll – czyli przewijanie całej zawartości tabeli

Opcja Scroll, czyli przewijania tabeli, nie zmienia układu, który widzimy na komputerach, ale jej zaletą jest to, że nie ucina tabeli na urządzeniach mobilnych tylko pozwala ją po prostu przewijać. I o ile w opcji flip układ tabeli nieco się zmienia, ponieważ wiersze nagłówkowe trafiają na lewą stroną, to w wersji scroll tabela pozostaje niemalże identyczna. Różnica, która będzie dla Was widoczna, to nieco węższe kolumny na tabletach i smartphonach, jednak nadal wszystko pozostaje czytelne. 

Żeby dodać efekt scroll do naszego wpisu dodajemy poniższy kod:

[table id=99 responsive=scroll/]

W kodzie zmieniacie wyłącznie numer 99, który powinien odpowiadać Waszemu numerowi ID tabeli, którą chcecie wstawić do wpisu czy strony.

Jak naprawić niepożądane efekty wizualne? 

Tworząc ten wpis i testując wszystkie trzy wersje tabeli na urządzeniach mobilnych, napotkałam kilka problemów. I żeby nie wprowadzić Was w błąd, postanowiłam o pomoc poprosić samego twórcę wtyczki. Tobias, to świetny facet, niesamowicie cierpliwy i pomocny, i to dzięki jego podpowiedziom i przesłanym rozwiązaniom udało mi się zgromadzić małe repetytorium wiedzy. Tobias nie miał nic przeciwko, aby podzielić się tym z Wami, więc poniżej kilka napotkanych niedogodności i informacja jak sobie z nimi poradzić 🙂

Niewłaściwy margines wewnętrzny (padding) przy zastosowaniu ustawiań umożliwiających filtrowanie tabeli po nagłówku

Jak widzicie na zrzucie poniżej, w niektórych kolumnach ikona filtru zachodzi na tekst. Najbardziej widać to w kolumnie Kontrahent, Godziny otwarcia i Godziny zamknięcia. Zdjęcie powyżej pokazuje widok na urządzeniach mobilnych. Żeby zwiększyć odstęp pomiędzy treścią w danej kolumnie, a ikoną wystarczy dodać poniższy kod w opcjach wtyczki Table Press:

.tablepress .sorting,
.tablepress .sorting_asc,
.tablepress .sorting_desc {
 padding-right: 30px !important;
}

Oczywiście wartością padding right możecie operować dowolnie. Ja ustawiłam swój margines wewnętrzny na 30 px, ale Wasz może być mniejszy. Z tym problem spotkacie się niezależnie od tego, czy używacie opcji flip, scroll czy collapse, ale to jak zachowa się margines wewnętrzny zależy od motywu z jakiego korzystacie. Jeżeli macie DIVI, to na pewno się on pojawi. 

Tekst w dwóch linijkach, a margines wewnętrzny

W opcji scroll i w opcji flip możecie napotkać problem nieodpowiedniego marginesu wewnętrznego wierszy, jeżeli wasz tekst w każdej z komórek będzie zajmował więcej niż jedną linijkę. Zobaczycie wtedy – jak na obrazku poniżej, że linie oddzielające wiersze czy kolumny układają się nierówno do treści znajdującej się nagłówku. 

Żeby uporać się z tym problemem w opcjach wtyczki Table Press należy podać poniższy kod:

.tablepress-id-5 .column-3,
.tablepress-id-5 .column-4,
.tablepress-id-5 .column-5 {
 height: 72px;
}

W zależności od tego ile wy macie kolumn w swojej tabeli i ile linijek zajmuje tekst będziecie musieli operować wartością height oraz zmieniać numer kolumny, który u mnie wynosi odpowiednio .column-3, .column-4 oraz .column-5

Wersja flip na komputerach i zbyt duży odstęp między kolumnami 

Kolejny problem z jakim możecie się spotkać, a który przynajmniej ja napotkałam to niewłaściwy margines wewnętrzny między kolumnami, przy zastosowaniu wersji flip na komputery. Tworząc swoją tabelę, zastosowałam shortcode [table id=99 responsive=flip responsive_breakpoint=all/], co oznacza, że na wszystkich urządzeniach moja tabela miała wyglądać tak, że po lewej stronie znajduje się nagłówek, a po prawej stronie pozostała zawartość tabeli, która można swobodnie przewijać. I o ile na smartphonach i tabletach tabela wyglądała dobrze, to na komputerze powstało coś takiego:

Rozwiązaniem problemu, jest dodanie dodatkowego kodu w opcjach wtyczki TablePress:

.tablepress tr {
 padding: 0 !important;
}

Jeżeli po dodaniu tego kodu zauważycie, że Wasza tabela znacznie się zmniejszyła, to wystarczy zmienić szerokość kolumn i wszystko zacznie wyglądać tak jak powinno. A o tym jak zmienić szerokość tabeli, albo jak ją dostosować pod kątem środkowania i wyrównywania tekstu już kiedyś pisałam: Zaawansowane tabele na Wrodpressie z TablePress oraz TablePress – tekst wyśrodkowany, a wyrównany do środka.  W tych dwóch wpisach znajdzie mnóstwo przydatnych informacji jak zacząć z tworzeniem tabeli i jak ją formatować, zmieniać szerokość kolumn, jak poradzić sobie z ustawieniami wtyczki i wiele innych przydatnych rzecz, jeżeli dopiero z tą wtyczka zaczynacie swoją przygodę. 


Niemieszczące się w jednej linii stronicowanie i wyszukiwanie 

Jeżeli Wasza tabela jest mocno rozbudowana, ma wiele kolumn, wierszy i zawiera mnóstwo informacji, to na pewno chcielibyście dać użytkownikowi możliwość szybkiego wyszukania informacji. Podczas tworzenia tabeli mamy możliwość włączenia wyszukiwania poprzez zaznaczeni checkboxa Pozwól czytelnikowi na filtrowanie albo przeszukiwanie zawartości tabeli. Jedynie wiersze z wyszukiwanym hasłem zostaną pokazane. Możemy też określić ile wierszy pojawi się od razu na stronie, na której znajduje się tabela poprzez zaznaczenie checkboxa 

Żeby wyrównać ilość pokazywanych pozycji i opcje przeszukiwania tabeli na urządzeniach mobilnych należy użyć poniższego kodu:

.dataTables_wrapper label input {
  width: 120px;
}

Sprawi on, że pole przeszukiwania tabeli będzie nieco krótsze, a przez to znajdzie się w jednej linii z wyświetlanymi pozycjami na urządzeniach mobilnych. 

Na dzisiaj to już wszystko, mam nadzieję, że wpis będzie dla Was pomocny. Jeżeli tak się stanie, nie zapomnijcie zostawić komentarza i podać go dalej, niech służy również innym zainteresowanym uzytkownikom 🙂

by Paulina Kanak

właścicielka domen Canaq.net | Canaq.pl

© Copyright 2014 | Wszelkie prawa zastrzeżone
cq.canaq@gmail.com

Pin It on Pinterest