Tworzenie tabel w WordPressie to nie lada wyzwanie. Edytor wizualny nie oferuje żadnych narzędzi więc jednym z rozwiązań jest wstawienie odpowiedniego kodu HTML w trybie tekstowym. Innym sposobem, znacznie prostszym i dającym więcej możliwości, jest wykorzystanie wtyczki TablePress.
TablePress
Przedstawianą przeze mnie wtyczkę napisał Tobias Bäthge na podstawie DataTables dodając kilka przydatnych funkcji. Można ją pobrać z oficjalnego katalogu a jej działanie podejrzeć w wersji demonstracyjnej. Wpis opiera się o wersję 1.0, która zawiera polskie tłumaczenie mojego autorstwa.
Ustawienia wtyczki
TablePress domyślnie wyświetla się w panelu administratora w najwyższym poziomie menu głównego. Po kliknięciu w zakładkę „TablePress” zostaniemy przeniesieni do strony, gdzie możemy zarządzać ustawieniami oraz wszystkimi tabelami.
TablePress – ustawienia
Wszystkie tabele
Zawiera listę tabel kiedykolwiek przez nas wygenerowanych łącznie z osobami, które je modyfikowały oraz datą kiedy to nastąpiło. Z poziomu tej listy możemy łatwo zarządzać tabelami kopiując je, usuwając lub otrzymując ich shortcody.
Dodaj nową
W tej zakładce możemy utworzyć nową tabelę definiując jej tytuł, opis (który pozwoli ją zidentyfikować wśród większej ilości rekordów) oraz podstawowe wymiary, które później będzie można jeszcze zmienić na etapie edycji.
Import/Export
Te zakładki pozwolą nam na łatwe tworzenie kopii zapasowej oraz wczytywanie tabel z pliku. Do wyboru mamy formaty HTML, CSV oraz JSON.
Opcje wtyczki
W opcjach wtyczki mamy miejsce na dodanie niestandardowego kodu CSS, który sformatuje wyświetlanie tabel. Linki pod polem tekstowym prowadzą do stron, na których znajdziemy przykładowe style oraz listę selektorów.
Poniżej możemy wybrać dokładnie miejsce, w którym będzie wyświetlała się zakładka menu wtyczki w panelu administracyjnym. Jeśli nie chcemy, aby wyświetlała się na głównym ekranie możemy ją ukryć np. w kategorii „Wpisy”. Jeszcze niżej znajdziemy odnośnik do usunięcia wtyczki z naszego bloga.
O wtyczce
Zakładka ta zawiera podstawowe informacje o wtyczce, ale może być źródłem cennych informacji oraz linków do pomocy i dokumentacji. Przy kontakcie z autorem, warto skopiować zawartość sekcji Debugowanie i informacje o wersji.
Dodawanie tabel
Wchodzimy w zakładkę „Dodaj nową” i uzupełniamy jej podstawowe dane. Rozmiar będzie można zmienić podczas edycji.
Ekran dodawania nowej tabeli podzielony jest na sekcje, które można zwinąć, co dodatkowo ułatwi odnalezienie się wśród natłoku opcji:
Informacje o tabeli
TablePress – tworzenie tabeli – informacje
W tej sekcji możemy edytować podstawowe dane podane wcześniej, takie jak tytuł, opis lub numer ID. Jest też bezpośredni dostęp do wygenerowanego od razu znacznika shortcode.
Zawartość
TablePress – tworzenie tabeli – zawartość
Jest to najważniejsza część ekranu. Tutaj uzupełniamy komórki treścią. Możemy dodać tekst, obrazek, link lub połączyć wszystko razem korzystając z zaawansowanego edytora umieszczonego w sekcji niżej.
Kolumny opisane są kolejnymi literami alfabetu, a wiersze numerami. Checkboxy przy oznaczeniach kolumn i wierszy umożliwiają zaznaczenie pożądanych elementów np. do usunięcia lub skopiowania. Kolumny oraz wiersze możemy dowolnie przenosić metodą przeciągnij i upuść, łapiąc za literę kolumny lub numer wiersza.
Operacje na tabeli
TablePress – tworzenie tabeli – operacje
Edytor zaawansowany oraz dodawanie obrazków i linków odbywa się analogicznie jak umieszczanie treści w normalnym wpisie w WordPress. W tej sekcji klikając na poszczególne elementy zobaczymy okienko z informacją jak danej opcji użyć. Jeśli okienko nie pokaże się, trzeba umożliwić witrynie pokazywanie wyskakujących okienek, które czasem są blokowane.
Na początku problem może sprawiać łączenie komórek. Warto zapamiętać, że kierunek łączenia jest zgodny z kierunkiem pisania: z góry na dół i z lewej na prawo. Oznacza to, że w komórce wyżej (lub po lewej stronie) mamy treść, która „rozleje” się na dalsze komórki, które będą miały w swojej zawartości tag #rowspan# dla kolumn lub #colspan# dla wierszy.
Uwaga: łączenie kolumn i wierszy nie działa przy aktywnej funkcji opcji JavaScript.
Opcje tabeli
TablePress – tworzenie tabeli – opcje
Mamy do wyboru podstawowe formatowanie tworzonej tabeli, tj. utworzenie pierwszego wiersza nagłówkiem, a ostatniego wiersza stopką, naprzemienne kolorowanie wierszy i podświetlanie po najechaniu.
Dodatkowo możemy ustawić wyświetlanie tytułu i opisu tabeli oraz dodać niestandardowe klasy, których później użyjemy przy formatowaniu treści. Klasy podane w tym polu odnoszą się do całości tabeli.
Opcje JavaScript tabeli (DataTables JavaScript library)
TablePress – tworzenie tabeli – opcje JavaScript
Wtyczka również dostarcza opcje javascript, które możemy załączyć jako dodatki. Należą do nich:
możliwość sortowania danych w tabeli,
włączenie wyszukiwarki dla tabeli,
stronicowanie przy większej ilości wpisów (ze zmienną ilością wierszy na jednej stronie),
zwracanie informacji o tabeli,
przewijanie w poziomie.
Wszystkie opcje aktywne możemy zobaczyć w działaniu w demo wtyczki.
Rozszerzenia
Wtyczka pozwala również na instalację rozszerzeń, które nie znalazły się w podstawowej wersji, a mogą rozbudować ją o kilka dodatkowych funkcji, których może niekiedy brakować.
Każde z dodatkowych funkcji posiada stronę, gdzie wyjaśnione jest jak dane rozszerzenia używać oraz co może nam zaoferować, a wszystkie pogrupowane są w kategoriach: wygląd tabel, dodatkowe funkcje biblioteki DataTables JavaScript, kompatybilność z innymi wtyczkami oraz dostosowanie zachowania wtyczki w panelu administracyjnym.
Warto również zauważyć, że rozszerzenia instaluje się i aktywuje tak jak normalne wtyczki, czyli poprzez instalator wtyczek w panelu administracyjnym WordPress.
Do najciekawszych rozszerzeń należą:
wywoływanie kodu PHP w komórkach tabeli (PHP code in table cells),
tabele dopasowujące się do rozmiaru okna – Premium (Responsive Tables),
zawsze widoczny nagłówek tabeli przy większej ilości wierszy (DataTables FixedHeader),
automatyczna zamiana tekstu o postaci adresu na aktywne linki (Automatic URL conversion).
Rozszerzenia oznaczone jako „Premium” przeznaczone są dla użytkowników, którzy złożyli dotację na rzecz rozwoju wtyczki.
Podsumowanie
Utworzona przeze mnie tabela prezentuje się następująco:
TablePress – przykładowa tabela
Domyślny CSS sprawia, że tabela ma szerokość 100%, a jej komórki rozkładają się tak, jak w czystej tabeli napisanej ręcznie w HTML – nie mają ustalonych szerokości ani wysokości, a tylko odstępy (padding). Oczywiście można to zmienić dodając niestandardowe style.
Niestety wtyczka może sprawiać problem przy dodawaniu tabel, które mają określony schemat wyglądu, a zmienną treść. Wygodniej byłoby edytować treść takiej tabeli bezpośrednio podczas edycji wpisu, wrzucając tylko tabelę jako szablon.
Nie przeszkadza to jednak w ustawieniu szablonu w pierwszej utworzonej tabeli, a później kopiowanie jej, zmienianie treści i umieszczanie we wpisie za pomocą shortcode. W pasku narzędzi dodawana jest przez wtyczkę ikona, która łatwo pozwala na umieszczenie wybranej tabeli, bez konieczności zapamiętywania jej ID.
Twój sposób na tabele?
Czy znasz może jakieś inne wtyczki do intuicyjnego tworzenia tabel w WordPressie? A może używałeś już TablePress i podzielisz się swoimi odczuciami na jej temat?
Więcej wtyczek oraz porad związanych w WordPressem znajdziesz na moim blogu Sztuka WordPress.
Comments