Twórz wspaniałe responsywne tabele w WordPress za pomocą wpDataTables

Tworzenie tabel w WordPress jest łatwe. Istnieją tradycyjne sposoby dodawania tabel do WordPressa za pomocą kodu, ale zdecydowanie najwygodniejszym sposobem budowania tabeli (lub wykresu) jest wtyczka WordPress wpDataTables. Ułatwia to importowanie tabeli z różnych źródeł zewnętrznych, stylizowanie jej według własnych upodobań i dodawanie jej do witryny.


Podstawowe tabele HTML

Możesz dodawać tabele do WordPressa przy użyciu standardowego Tagi tabeli HTML. Są dość proste i wykorzystują następującą podstawową strukturę (pamiętaj tylko, aby wprowadzić je na karcie „tekst” podczas tworzenia postu):

Pierwszy druga Trzeci
Jacek Jackson 25
Jane Jenson 30

Co spowoduje, że tabela będzie wyglądać podobnie do tej (uwaga – wszelkie style dla komórek nagłówka zależą od motywu):

PierwszydrugaTrzeci
JacekJackson25
JenJenson30

Używanie HTML do tworzenia tabel będzie działać i jest w porządku, jeśli chcesz dodać tylko jedną lub dwie tabele do swojej witryny. Ale jeśli często tworzysz tabele, istnieje kilka problemów, na które prawdopodobnie natkniesz się.

  • Musisz nauczyć się kodowania HTML, aby uzyskać zaawansowane opcje
  • Dodanie HTML jest czasochłonne i na dłuższą metę ograniczy produktywność, jeśli utworzysz wiele tabel
  • Ta metoda jest poważnie ograniczona pod względem układu i projektu (chyba że jesteś zaawansowanym programistą)

Jeśli korzystasz z WordPress, możemy bezpiecznie założyć, że 1) używasz najnowszej wersji WordPress i 2) Twój motyw jest elastyczny. Kiedy używasz znacznika tabeli HTML do wstawiania tabel w witrynie WordPress, poświęcisz dużo czasu na dostosowanie układu.

Twoja witryna może być responsywna, ale Twoje tabele nie.

To naturalnie złamałoby responsywną właściwość twojej witryny. Problemem może być także wstawianie danych do witryny. Oprogramowanie do przetwarzania arkuszy kalkulacyjnych, takie jak Arkusze kalkulacyjne Google lub Microsoft Excel, ma wiele narzędzi do importowania danych z bazy danych. Ale kiedy piszesz każdą postać – nie jest to zbyt produktywne.

Wcześniej zidentyfikowaliśmy trzy główne problemy przy wstawianiu tabel za pomocą HTML w WordPress. Nie martw się – istnieje znacznie lepszy sposób tworzenia tabel. Pozwólcie, że przedstawię wtyczkę, która usunie wszystkie wyżej wymienione problemy i przyniesie wiele przydatnych funkcji.

Twórz lepsze tabele za pomocą wpDataTables

WtData Responsive Tables Wtyczka

Aby tworzyć tabele za pomocą WordPress, zdecydowanie zalecamy wpDataTables. Ta w pełni responsywna wtyczka premium ułatwia tworzenie, dostosowywanie i zarządzanie tabelami i wykresami w WordPress – nie wymaga kodowania. Wystarczy zainstalować i zacząć budować tabele i wykresy! Zaufany przez ponad 14 300 osób (i wcześniej nazwał go jedną z naszych wtyczek WordPress miesiąca), jest to po prostu jeden z najlepszych sposobów dodawania tabel do witryny opartej na WordPress w naszej skromnej opinii.

Więcej informacji o wpDataTables Zobacz wersję demonstracyjną na żywo

Możesz dowiedzieć się więcej o wpDataTables na Themeforest, klikając powyższe przyciski, lub czytaj dalej, aby dowiedzieć się, dlaczego naszym zdaniem jest tak niesamowity.

Wiele źródeł danych

Źródła danych wpDataTables

W zależności od tego, gdzie wolisz przechowywać dane, wpDataTables umożliwia importowanie z wielu różnych źródeł. Wybierz spośród Excela, CSV, Google Doc, XML, JSON, szeregowego PHP Array lub zapytania MySQL, aby zaimportować dane. Istnieją również opcje ręcznego utworzenia nowej tabeli, połączenia ze źródłem danych na żywo (które dynamicznie aktualizują tabelę po załadowaniu jej na stronę) lub generują niestandardowe zapytanie za pomocą narzędzia graficznego interfejsu użytkownika.

Zapytanie MySQL jest moim ulubionym, ponieważ pozwala mi przeglądać i zmodyfikuj dane z właściwej bazy danych. Jeśli masz zespół programistów pracujących nad projektem stołu, współpraca byłaby bardzo prosta (więcej na ten temat później)!

Ulepszona personalizacja i responsywny układ

Projektowanie stołu nigdy nie było łatwiejsze. Za pomocą kilku pól wyboru i kilku wyborów kolorów możesz zaprojektować wtyczkę, która będzie uzupełniać motyw witryny. Spójrz na niesamowite funkcje projektowania, które wtyczka ma do zaoferowania:

wpDataTables Stylizacja niestandardowa

Istnieją również wbudowane opcje języka interfejsu, formatowania godziny / daty, wyrównania, niestandardowego JS / CSS i innych. Aha, a czy wspominałem, że wtyczka jest również responsywna na urządzenia mobilne? Możesz ustawić, ile miejsca zajmie stół, bez względu na rozmiar ekranu!

Filtry do efektywnego wyszukiwania

wpDataTables Opcje sortowania i filtrowania

Podczas tworzenia nowej tabeli (lub edycji wychodzącej) masz opcję włączenia filtrów. Za pomocą filtrów możesz zmniejszyć zestaw wyników tylko za pomocą wymaganych elementów. Jest to niezwykle przydatne do tworzenia zapytań do dużej bazy danych. Na przykład, jeśli masz bazę danych biblioteki, filtruj wyniki na podstawie Przedmiot pomogłoby ci znaleźć książkę znacznie szybciej.

Ponieważ jednak za każdym razem, gdy edytujesz filtry, zwiększa to liczbę obliczeń do wykonania przez bazę danych – zwiększając w ten sposób presję serwera. Dlatego masz słodką opcję całkowitego wyłączenia filtrów.

Edytuj bazę danych MySQL z poziomu interfejsu użytkownika

wpDataTables Zezwalaj na edycję front-end

wpDataTables umożliwia także bezpośrednią edycję baz danych z interfejsu użytkownika – tj. z witryny WordPress na żywo. Po prostu włącz tę opcję w zakładce „Edycja” podczas konfigurowania tabeli. Możesz nawet ustawić, którzy użytkownicy mogą edytować wartości w bazie danych – pozostawiając ją otwartą dla wszystkich użytkowników, aby mogli przesłać lub oprzeć dostęp do swojej roli użytkownika.

Wizualizuj dane za pomocą wykresów

Wizualizacja jest znacznie skuteczniejszym narzędziem przyciągającym uwagę niż zwykły tekst. W końcu widzenie to wiara. To zwiększa nasze tempo pobierania danych, w porównaniu do tradycyjnego czytania. Na przykład, gdy przeglądasz wykres kołowy rocznego raportu dochodu, prawie zawsze będziesz interpretować dane szybciej w porównaniu do odczytu danych przez wszystkie 12 miesięcy.

Style wykresów wpDataTables

wpDataTables pomaga tworzyć dynamiczne wykresy (za pomocą Google Charts, HighCharts lub Chart.js) w celu wizualizacji danych tabeli. Jest to szczególnie przydatne w przypadku tabel zawierających wiele danych liczbowych, na przykład blogerów udostępniających swoje miesięczne raporty o dochodach.

Dożywotnie aktualizacje

Większość programistów wtyczek oferuje rok aktualizacji i wsparcia. Jednak ten programista uwzględnił dożywotnie aktualizacje i sześciomiesięczne wsparcie za jednorazową opłatą (uwaga – w celu dalszego wsparcia konieczne będzie odnowienie licencji).

Szczegółowa dokumentacja

Deweloper nie pozostawia kamienia obróconego, jeśli chodzi o wyjaśnienie, jak używać wpDataTables. Istnieje obszerna dokumentacja online oraz samouczki wideo, które pomogą Ci w pełni zrozumieć możliwości wtyczki!

To mówi nam 2 rzeczy:

  1. Deweloper dba o swoich klientów – aby wrócili, aby kupić produkt
  2. Dobrze poinformowany klient = mniej czkawek = niższe bilety wsparcia = zadowoleni klienci

Ponadto dzięki mniejszym biletom pomocy technicznej deweloper może poświęcić więcej czasu na ulepszenie wtyczki i wprowadzenie nowszych funkcji!

Jak zbudować responsywną tabelę za pomocą wpDataTables

Teraz, gdy wiesz, dlaczego naszym zdaniem wpDataTables jest świetną wtyczką, pokażemy, jak z niej korzystać! Istnieją dokładnie trzy kroki tworzenia nowej tabeli za pomocą wtyczki wpDataTables.

1. Zainstaluj wpDataTables

Wiem, że to powinno być oczywiste, ale najpierw musisz zainstalować wpDataTables. Ponieważ jest to wtyczka premium, należy ją kupić i pobrać z CodeCanyon (po prostu przejdź do zakupów i pobierz „Tylko plik instalowalny WordPress”).

Zainstaluj wtyczkę wpDataTables

Następnie postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zakończyć instalację i aktywację.

2. Utwórz tabelę danych

Przy aktywnej wtyczce powinieneś mieć zupełnie nowy element menu „wpDataTables”. Kliknij na niego, a następnie kliknij duży niebieski przycisk Dodaj nowy, aby rozpocząć tworzenie nowej tabeli.

wpDataTables Utwórz lub zaimportuj tabelę

Pierwszą opcją będzie sposób utworzenia stołu. Należy przedstawić pięć opcji. Wybraliśmy opcję importowania z CVS, ponieważ mieliśmy prosty arkusz kalkulacyjny, którego chcieliśmy użyć. Następnie po kliknięciu przycisku Dalej pojawi się monit o wybranie i przesłanie pliku.

wpDataTables Manage Table

Po przesłaniu źródła danych będzie można wprowadzić niestandardową nazwę tabeli, a także użyć opcji do edycji, dodawania lub usuwania kolumn i wierszy. Następnie kliknij zielony przycisk, aby zakończyć tworzenie tabeli.

Ustawienia tabeli wpDataTables

Jesteś teraz w domu! Na tej stronie możesz dostosować dodatkowe ustawienia swoich tabel (opcjonalnie). Użyj opcji „Wyświetl”, aby umożliwić responsywne zwijanie na mniejszych urządzeniach, dodać poziomy pasek przewijania, ograniczyć szerokość tabeli itp. Przejdź do karty „Edycja”, aby włączyć edycję front-end lub włączyć narzędzia tabel (drukowanie, kopiowanie lub eksportowanie Szybkie linki). Najlepsze jest to, że możesz przeglądać swoje zmiany na żywo, gdy wprowadzasz poprawki. Pamiętaj tylko, aby kliknąć Zapisać (lub zastosuj) znacznik wyboru, jeśli dokonasz jakichkolwiek zmian.

Gdy skończysz, skopiuj swój skrót tabeli z góry ekranu, ponieważ będziesz go potrzebować do trzeciego i ostatniego kroku.

3. Wstaw tabelę do posta lub strony

Krótki kod wpDataTables

Aby skorzystać ze stołu, wystarczy wkleić krótki kod do treści postu lub strony (jak na powyższym obrazku). Ten krótki kod będzie renderowany na interfejsie witryny w zależności od stylu tabeli:

Tabela frontendowa wpDataTables

W naszym możesz zobaczyć, że włączyliśmy narzędzia tabelowe (do drukowania, eksportu itp.), Filtrowanie i wysyłanie zgłoszeń. Ale to wszystko – Twój stół jest gotowy do pracy!

Chcesz zbudować wykres?

Możesz także budować wykresy za pomocą wpDataTables. Po utworzeniu tabeli kliknij „Utwórz wykres”, aby rozpocząć.

wpDataTables Utwórz wykres

Stąd podaj nazwę wykresu, wybierz styl (do wyboru jest mnóstwo ton) i przejdź do następnego ekranu, na którym wybierzesz tabelę danych, której chcesz użyć do utworzenia wykresu.

wpDataTables Przypisz dane

Po wybraniu tabeli jako źródła danych przypisz kolumny tabeli do części wykresu. W zależności od wybranego wykresu może być wymagana minimalna liczba wartości. W naszym przykładzie wybraliśmy wykres słupkowy, który wymagał co najmniej dwóch kolumn dla wykresu (aby były słupkami). Po posortowaniu kolumny przejdź do następnego kroku.

wpDataTables Dostosuj wykres

Teraz część zabawy. Użyj opcji, aby stylizować i dodawać funkcje do wykresu. Istnieje mnóstwo opcji odpowiadających szerokości, wysokości, tła, ramek, czcionek, etykiet, kolorów, tytułu pokaż / ukryj, podpowiedzi po najechaniu myszką i więcej.

Po zakończeniu edycji kliknij przycisk Dalej i skopiuj krótki kod wykresu. Po prostu wklej go do treści postu lub strony, zapisz i przejdź do interfejsu witryny, aby zobaczyć wykres!

Dodaj więcej funkcji tabeli WordPress

Chcieć więcej? Istnieje wiele rozszerzenia i dodatki dla wpDataTables aby dodać jeszcze więcej opcji tabel i wykresów do swojej witryny WordPress.

Zaawansowane filtry wpDataTables

Potężne filtry: Ustaw kaskadowe (złożone od lewej do prawej) filtry, filtrowanie aspektowe (zastosuj wiele filtrów do wąskich wyników), wyłącz widok tabeli, dopóki użytkownik nie wybierze filtrów, dodaj funkcje wyszukiwania na żywo i wiele więcej. Po prostu włącz i skonfiguruj tę opcję podczas konfigurowania stołu.

Konstruktor raportów: Generuj własne niestandardowe raporty Word lub Excel na podstawie tabel danych. Jest to szczególnie przydatne, gdy zezwalasz użytkownikom na edycję front-endu (w celu gromadzenia danych możesz ponownie uruchamiać i drukować raporty) lub jeśli potrzebujesz regularnie regenerować raporty (np. Faktury miesięczne lub karty czasowe).

wpDataTables Formidable Forms

Formidable Forms: Dodaj obsługę popularnego narzędzia Formidable Forms Pro. Użyj Formidable Forms, aby utworzyć formularz gromadzenia danych (np. Ankietę), a następnie automatycznie wygeneruj tabelę na podstawie zgłoszeń użytkowników, z każdym polem przekształconym w kolumnę.

Formy grawitacyjne: Zintegruj przesyłanie formularzy grawitacyjnych z wpDataTables, aby automatycznie tworzyć tabele WordPress na podstawie danych użytkownika. Rozszerzenie dodaje nowe źródło danych podczas tworzenia tabeli, dzięki czemu można łatwo połączyć się z określonym formularzem grawitacyjnym i wizualizować dane.

Wypróbuj dla siebie wpDataTables

wpDataTables Live Sandbox

Większość programistów udostępnia demo na żywo, dzięki któremu poczujesz, co może zrobić wtyczka. Ale pokazują tylko dane wyjściowe, tj. Widok „nakładki” – który jest oparty na wcześniej ustalonych danych wejściowych. W tym momencie większość demonstracji na żywo wtyczek jest niewystarczająca – nie dają dostępu do ustawień wtyczki i narzędzi – tj. Zaplecza.

wpDataTables oferuje jednak pełną wersję piaskownicy w swojej wersji demonstracyjnej, w której możesz Wypróbuj zanim kupisz. Robią to wszyscy dealerzy – niesławna jazda próbna. Za pomocą piaskownicy możesz przetestować funkcje wtyczki pod kątem zadowolenia swojego serca i wyświetlać wyniki w czasie rzeczywistym.

Zobacz demo wpDataTables

Chcesz pobrać kopię, aby przetestować własną instalację? wpDataTables oferuje wersję Lite, którą można pobrać z repozytorium WordPress.org. Nie ma wszystkich wspaniałych funkcji premium, które omówiliśmy powyżej, ale jest to świetny sposób, aby sprawdzić, czy wtyczka może być właściwym rozwiązaniem dla twoich potrzeb.

Uzyskaj wpDataTables Lite

A jeśli ci się spodoba, możesz iść dalej i kupić go z całkowitym spokojem. Dlaczego? Ponieważ już przetestowałeś i korzystałeś z produktu.

Wniosek

wpDataTables to jedna z tych niezbędnych wtyczek do stron WordPress zajmujących się ogromną ilością danych. Niezależnie od tego, czy tworzysz projekt szkolny, czy roczny raport firmy, tabele i ich wizualizacja odgrywają istotną rolę w reprezentacji danych.

Uzyskaj wpDataTables dla WordPress

Próbowałeś wpDataTables? A może masz pytania dotyczące możliwości tej wtyczki? Zostaw komentarz poniżej – chcielibyśmy usłyszeć od ciebie!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map