Najlepsza wtyczka do tabel i wykresów WordPress?

Potrzebujesz sposobu na wyświetlanie danych, tabel lub wykresów w witrynie WordPress? W naszym praktycznym przeglądzie wpDataTables przyjrzymy się jednemu z najpotężniejszych rozwiązań dla prostych lub złożonych tabel.

Ogólnie rzecz biorąc, wpDataTables jest jedną z najbardziej elastycznych wtyczek do tabel i wykresów, jakie można znaleźć. Możesz importować lub synchronizować dane z wielu różnych źródeł, w tym Excela, Arkuszy Google, CSV, JSON, bazy danych witryny WordPress, zewnętrznych baz danych i innych. W razie potrzeby możesz następnie tworzyć różne wykresy z dowolnej tabeli.

Lub za pomocą nowego prostego konstruktora tabel możesz projektować proste tabele wizualne, takie jak tabele porównawcze produktów lub tabele cenowe.

Co najważniejsze, interfejsy użytkownika są doskonałe zarówno na interfejsie, jak i zapleczu, co zapewnia wspaniałe wrażenia dla odwiedzających, a także ułatwia pracę z tabelami i wykresami.

Ogólnie uważam, że wtyczka wpDataTables jest całkiem dobra w tym, co robi, więc nasza recenzja wpDataTables będzie ogólnie całkiem pozytywna.

W poniższych sekcjach praktycznych podświetlę kluczowe funkcje wpDataTables i pokażę, jak wszystko działa, abyś mógł zrozumieć, skąd pochodzi ta pozytywność.

Uwaga – pierwotnie opublikowaliśmy tę recenzję w 2018 r., ale odświeżyliśmy ją w październiku 2021 r., aby uwzględnić nowe funkcje i zmiany w interfejsie wpDataTables.

Recenzja wpDataTables: szybkie spojrzenie na funkcje

Po pierwsze, wszystkie tabele i wykresy, które tworzysz za pomocą wpDataTables, są responsywne . Wiem – „responsywny” nie jest tak naprawdę czymś seksownym w 2021 roku. Ale zdziwiłbyś się liczbą wtyczek do tabel, które nie radzą sobie dobrze z responsywnym projektowaniem, więc jest to naprawdę duża korzyść. Możesz skonfigurować własne niestandardowe punkty przerwania i ukryć określone kolumny na tabletach/urządzeniach mobilnych.

Inną rzeczą, którą spodoba ci się wpDataTables, jest to, jak wiele sposobów umożliwia tworzenie tabel i/lub importowanie treści. Możesz:

• Twórz tabele od podstaw
• Połącz tabelę ze źródłem zewnętrznym , takim jak Excel, Arkusze Google, JSON, zapytanie SQL, tablica PHP itp . Dane będą aktualizowane, gdy zmienisz plik źródłowy .
• Importuj z zewnętrznego źródła , takiego jak Excel lub Arkusze Google. W przeciwieństwie do poprzedniego jest to import jednorazowy . Dane nie są synchronizowane.
• Użyj narzędzia do tworzenia zapytań do bazy danych, aby dodać do tabeli zawartość WordPress, taką jak posty, taksonomie, postmeta itp.
• Użyj zapytania MySQL , aby pobrać dane z własnej zewnętrznej bazy danych .

Chociaż nie jestem pewien, jak to przetestować, wpDataTables twierdzi, że jest w stanie obsłużyć duże tabele, nawet w milionach wierszy.

Aby edytować dane tabeli, możesz użyć edytora podobnego do programu Excel, w którym po prostu klikasz i wpisujesz w pola. Możesz też użyć „standardowego” edytora, który pozwala edytować całe wiersze w wyskakującym okienku.

W przypadku prostszych tabel wpDataTables również niedawno uruchomił konstruktora „prostych tabel”. Możesz użyć tego do tworzenia bardziej wizualnych tabel, takich jak tabele porównawcze produktów, tabele cenowe i tak dalej. Zasadniczo tabele, w których nie musisz pracować z mnóstwem danych, ale potrzebujesz większej kontroli nad projektem.

Poza tym otrzymujesz mnóstwo ustawień do kontrolowania wyglądu i funkcji twoich tabel, w tym:

• Formatowanie warunkowe
• Edycja tabeli front-end
• Opcje sortowania
• Funkcjonalność filtrowania (w tym dedykowany widżet)
• Opcja wyszukiwania
• Opcje frontonu do eksportowania tabel do Excela lub CSV
• Opcje front-end do drukowania tabeli

I o tak, wpDataTables nie służy tylko do tabel! Możesz również użyć go do przekształcenia dowolnej tabeli w świetnie wyglądający wykres. Możesz wybierać spośród ogromnej różnorodności typów wykresów, a Twoje wykresy będą automatycznie aktualizowane po zmianie danych w tabeli. Oto częściowa lista niektórych typów wykresów:

• Wykres liniowy
• Wykres słupkowy
• Wykres kolumnowy
• Wykres warstwowy
• Wykres kołowy
• Wykres pączkowy
• Histogram
• Wykres miernika
• Wykres punktowy
• Wykres świecowy

Jeśli chcesz zobaczyć tabele i wykresy w akcji, możesz obejrzeć kilka demonstracji tutaj.

Praktyczne korzystanie z wpDataTables: Osiem rzeczy, które Ci się spodobają

Ok, teraz przejdźmy do praktycznego korzystania z wpDataTables i pokażę, jak te funkcje faktycznie działają. Omówię to w sposób liniowy, abyś mógł również zobaczyć, jak to jest tworzyć tabele i wykresy za pomocą wpDataTables.

1. Kreator konstruktora tabel

Aby pomóc w tworzeniu tabel, wpDataTables udostępnia dobrze zaprojektowanego kreatora konstruktora tabel.

Najpierw wybierz, skąd chcesz pobrać dane tabeli. Możesz zobaczyć sześć opcji, o których wspomniałem powyżej – pięć z nich koncentruje się na tabelach danych, ale otrzymujesz również nową opcję „prostej tabeli” dla bardziej wizualnych tabel:

Wybrałem import ze źródła danych . W moim przypadku jest to opublikowana tabela Arkuszy Google, która zawiera wiek zdobywców Oskara płci męskiej na każdy rok.

W przypadku tej metody wystarczy wkleić adres URL:

wpDataTables wyświetla następnie podsumowanie znalezionych kolumn. Jeśli chcesz, możesz zmienić typ danych każdej kolumny (na przykład możesz ustawić kolumnę jako liczbę lub datę). W razie potrzeby możesz również dodać nowe kolumny ręcznie:

Gdy jesteś zadowolony z tego, jak wszystko wygląda, mówisz wpDataTables, aby zaimportował tabelę i przyniesie wszystkie dane.

2. Dwa różne edytory tabel dla danych, w tym edytor podobny do programu Excel

Oprócz prostego konstruktora tabel dla tabel wizualnych ( którym podzielę się z Tobą później ), wpDataTables udostępnia dwa różne edytory do pracy z danymi:

• Edytor podobny do Excela – tak to brzmi. Możesz edytować dane w przeglądarce, tak jakbyś pisał w komórkach Excela.
• Standardowy edytor – otrzymujesz bardziej wizualny interfejs, wraz z wyskakującymi okienkami do zarządzania szczegółami, takimi jak ustawienia kolumn.

Oto jak działa edytor podobny do Excela – aby edytować pole, wystarczy dwukrotnie kliknąć i wpisać ( tak jak w Excelu ):

W przypadku pól innych niż tekstowe otrzymasz inne selektory. Na przykład możesz otworzyć selektor dat dla kolumn z typem danych data.

Możesz także otworzyć widok listy kolumn, który umożliwia szybkie konfigurowanie kolumn lub sortowanie/filtrowanie danych:

A oto jak działa standardowy edytor:

Jedną z fajnych rzeczy jest to, że podczas pracy w standardowym edytorze możesz szybko otworzyć ustawienia kolumny jako wysuwaną ramkę.

Ogólnie rzecz biorąc, edytor podobny do programu Excel jest pomocny, gdy faktycznie pracujesz z danymi. Ale zaletą standardowego edytora jest to, że ułatwia on dostęp do szczegółowych kontrolek kolumn. Mówiąc o…

3. Szczegółowe ustawienia kolumn

W standardowym edytorze możesz uzyskać dostęp do szczegółowych ustawień dla każdej kolumny, które pozwalają kontrolować ustawienia, takie jak:

• Typy danych
• Niestandardowe klasy CSS
• Czy zezwolić na sortowanie
• Czy zezwolić na filtrowanie. Jeśli tak, jak korzystać z filtrowania
• Formatowanie warunkowe. Na przykład możesz dodać niestandardową klasę CSS opartą na danych komórki ( to rzeczywiście bardzo przypomina formatowanie warunkowe w Excelu lub Arkuszach Google )

4. Szczegółowe ogólne ustawienia tabeli

Nad danymi tabeli znajduje się zbiór ogólnych ustawień tabeli.

Tutaj możesz kontrolować:

• Ustawienia dla całej tabeli dotyczące filtrów, sortowania i wyszukiwania.
• Edycja front-endu – czy ludzie mogą edytować tabelę z front-endu.
• Narzędzia tabel — pozwalają użytkownikom wydrukować tabelę lub wyeksportować ją do programu Excel/CSV.

Tutaj też możesz włączyć możliwość ukrywania niektórych kolumn na różnych urządzeniach:

Gdy włączysz zwijanie responsywne, otrzymasz nowe ustawienia kolumn, które pozwolą Ci ukryć poszczególne kolumny na urządzeniach mobilnych lub tabletach.

W ostatnim wydaniu wpDataTables dodał również nową kartę Dostosuj , która pozwala dostosować projekt tabel. Możesz zacząć od wyboru bazowej „skóry”. Następnie możesz użyć innych opcji, aby kontrolować kolory, typografię, obramowania i inne ustawienia:

5. Utwórz wykres z tabeli

Oprócz funkcji tabel, wpDataTables zawiera również dość potężną funkcję wykresów, która pozwala zamienić dowolną tabelę w różne typy wykresów obsługiwane przez kilka różnych silników wykresów.

Kiedy idziesz do tworzenia wykresu, najpierw wybierasz silnik renderujący, którego chcesz użyć. Twoje opcje to:

• Wykresy Google
• Wysokie wykresy
• Chart.js

Następnie możesz wybrać typ wykresu do utworzenia spośród typów obsługiwanych przez wybrany silnik renderujący. Na przykład w Google Charts możesz wybierać spośród 14 różnych typów wykresów:

Po wybraniu typu wykresu możesz wybrać jedną z istniejących tabel jako źródło danych dla wykresu:

Następnie możesz wybrać dokładnie, jakich danych w tej tabeli chcesz użyć.

Na przykład możesz wybrać tylko dwie lub trzy konkretne kolumny.

Możesz równieżwpisaćzakres, dla którego mają być uwzględnione wiersze i wybraćczy stosowaćopcje filtrowania tabeli ( to fajne, ponieważ wykres faktycznie zostanie ponownie wyrenderowany, jeśli jeden z odwiedzających zmieni opcje filtrowania w interfejsie Twojej witryny ):

Po wybraniu danych do użycia wpDataTables wyświetli podgląd wykresu na żywo, a także opcje kontroli:

• Responsywna szerokość wykresu
• Grupowanie
• Zabarwienie
• Granice
• Etykiety
• Kilka innych mniejszych ustawień

Gdy będziesz zadowolony ze swoich ustawień, wpDataTables wypluwa krótki kod, którego możesz użyć w dowolnym miejscu na swojej stronie. Możesz też użyć dedykowanego bloku.

6. Dedykowany widżet filtra

Jeśli nie chcesz uwzględniać opcji filtrowania nad tabelą, wpDataTables zawiera również własny dedykowany widżet filtrowania, który można umieścić w dowolnym obszarze widżetów. Działa to zarówno z klasycznym systemem widżetów WordPress, jak i nowym edytorem widżetów opartym na blokach.

Po dodaniu widżetu będzie on zawierał kontrolki filtrowania dla aktywnej tabeli:

7. Wiele ustawień globalnych

Oprócz ustawień specyficznych dla tabeli / wykresu, wpDataTables oferuje również mnóstwo opcji w obszarze wpDataTables → Ustawienia . Tutaj możesz skonfigurować takie rzeczy jak:

• Czy analizować skróty w tabelach
• Responsywne punkty przerwania
• Zabarwienie
• Czcionki
• Niestandardowy CSS i JavaScript
• Oddzielne połączenia z bazą danych

8. Nowy prosty kreator tabel dla tabel wizualnych

W przeszłości wpDataTables było przeznaczone wyłącznie do tabel danych, w których koncentrowano się na danych, a nie na projekcie tabeli. Na przykład w przeszłości nie używano wpDataTables do tabel porównawczych produktów lub tabel cenowych.

Zmieniło się to w 2021 roku, kiedy wpDataTables uruchomił nowy prosty konstruktor tabel . Dzięki prostemu konstruktorowi tabel zyskujesz bardziej wizualne wrażenia z budowania tabel, które zawierają przydatne funkcje, takie jak:

• Połączone komórki
• Stylizacja
• Oceny w gwiazdkach
• I tak dalej

Masz większą kontrolę nad formatowaniem, ale tracisz reguły sortowania, filtrowania i stronicowania, które otrzymujesz dzięki bardziej zaawansowanym opcjom tabeli danych. Nie możesz również tworzyć wykresów z tabel utworzonych za pomocą prostego konstruktora tabel.

Z tych powodów uważam, że prosty konstruktor tabel najlepiej sprawdza się w przypadku tabel, w których nie masz dużo danych, ale kluczem jest sposób ich prezentacji. Ponownie, typowym przykładem może być tabela porównawcza produktów dla Twoich własnych produktów lub produktów stowarzyszonych, które promujesz.

Oto przykład poniżej – ponownie widać, że masz o wiele więcej opcji formatowania. Możesz także łatwo wstawić krótki kod do dowolnej komórki.

W dalszej części strony otrzymasz również podgląd na żywo gotowego stołu.

Szybkie spojrzenie na inne metody importowania danych wykresu

Powyżej pokazałem, jak importować dane z tabeli Arkuszy Google. Ale jedną z największych zalet wpDataTables jest elastyczność w imporcie danych.

Więc zanim skończę tę recenzję wpDataTables, pozwól, że przedstawię Ci inne sposoby, w jakie możesz umieścić dane w swoich tabelach.

Kreator zapytań

Konstruktor zapytań umożliwia wykonywanie zapytań:

• Dane z bazy danych Twojej witryny WordPress (posty, taksonomie itp.)
• Dowolne dane z zewnętrznej bazy danych MySQL

Jeśli wybierzesz bazę danych swojej witryny WordPress, wpDataTables udostępnia ten naprawdę pomocny kreator zapytań, w którym możesz przeglądać różne typy postów i tworzyć ukierunkowany filtr:

Podobnie wpDataTables może pomóc w generowaniu zapytań do zewnętrznej bazy danych przy użyciu tego samego interfejsu wizualnego.

Synchronizuj ze źródłem zewnętrznym

Inną fajną opcją jest synchronizacja z zewnętrznym źródłem. Dzięki tej metodzie wtyczka automatycznie zaktualizuje tabelę przy każdym przeładowaniu strony ( lub za każdym razem, gdy pamięć podręczna zostanie wyczyszczona, jeśli używasz wtyczki buforującej ).

Tutaj możesz wybierać z wielu źródeł:

• Zapytanie SQL
• Plik CSV
• plik Excel
• Arkusz kalkulacyjny Google
• plik XML
• Plik JSON
• Zserializowana tablica PHP

Ręczne tworzenie tabeli

Wreszcie, zawsze możesz stworzyć stół od podstaw. Gdy pójdziesz tą trasą, najpierw skonfigurujesz używane kolumny, a także powiązane z nimi typy danych:

Następnie możesz wprowadzić swoje dane za pomocą edytora podobnego do programu Excel lub standardowego edytora.

Ceny wpDataTables: ograniczona darmowa wersja / Pro od 59 USD

Istnieje ograniczona wersja wpDataTables na WordPress.org. Jednak właśnie to – „ograniczone”. Możesz go używać do prostych tabel za pomocą prostego konstruktora tabel, ale tak naprawdę nie będzie to opcja dla poważnych tabel danych.

Jeśli potrzebujesz darmowej wtyczki do tabel danych lub wykresów, lepiej skorzystać z innej opcji.

Tam, gdzie wpDataTables naprawdę świeci, jest wersja premium.

Możesz kupić licencję z rocznym wsparciem i aktualizacjami lub możesz kupić licencję z dożywotnią pomocą techniczną i aktualizacjami. Wszystkie licencje obejmują wszystkie funkcje; jedyną różnicą jest liczba witryn, na których można go używać:

• Jedna strona – 59 USD za roczną licencję lub 189 USD za dożywotnią licencję.
• Trzy witryny – 109 USD za roczną licencję lub 389 USD za dożywotnią licencję.
• Nieograniczone witryny – 249 USD za roczną licencję lub 589 USD za dożywotnią licencję.

Możesz także zaoszczędzić trochę pieniędzy dzięki naszemu ekskluzywnemu kodowi kuponu wpDataTables.

Uwaga – upewnij się, że kupujesz bezpośrednio ze strony programisty. W przeszłości wpDataTables były sprzedawane wyłącznie za pośrednictwem rynku CodeCanyon firmy Envato. Deweloper nadal utrzymuje stronę aukcji w CodeCanyon, ale cena jest znacznie wyższa niż kupowanie bezpośrednio od dewelopera, więc nie zalecamy już korzystania z CodeCanyon.

Recenzja wpDataTables: nasze końcowe przemyślenia

Po użyciu wielu wtyczek tabel WordPress, czuję się całkiem pewnie, mówiąc, że wpDataTables jest zdecydowanie jednym z najlepszych dostępnych rozwiązań.

Jest elastyczny w sposobie importowania danych z tabeli. A interfejs sprawia, że ​​to, co może być skomplikowanym procesem, jest zaskakująco proste.

Poza tym łatwo jest edytować tabele dzięki dwóm różnym edytorom. Masz też dużą kontrolę nad całymi tabelami lub poszczególnymi kolumnami w różnych obszarach ustawień.

Dzięki nowemu prostemu konstruktorowi tabel możesz również używać wpDataTables do więcej niż, cóż, tabel danych. Możesz go również użyć do bardziej wizualnych tabel porównawczych produktów, tabel cenowych i tak dalej.

Wreszcie, możliwość tworzenia wykresów z tej samej wtyczki jest przydatna, a funkcjonalność wykresów jest naprawdę łatwa w użyciu.

Jedynym minusem jest to, że darmowa wersja wpDataTables na WordPress.org jest dość ograniczona, więc będziesz musiał zapłacić za wersję premium, aby uzyskać dostęp do większości funkcji.

Mając to na uwadze, jeśli chcesz zapłacić za wersję Pro, zdecydowanie powinieneś wziąć to pod uwagę.

A jeśli chcesz zobaczyć inne opcje pracy z tabelami w WordPressie, zapoznaj się z naszym samouczkiem TablePress.

Pobierz wpDataTables

️ Nie zapomnij skorzystać z naszego ekskluzywnego kuponu wpDataTables, aby uzyskać 20% zniżki.

Czy nadal masz jakieś pytania dotyczące wpDataTables lub naszej recenzji wpDataTables? Daj nam znać w sekcji komentarzy.