Jak tworzyć tabele statystyczne w WordPressie

Tabele statystyczne są zwykle nudne. Nie da się ukryć tej oczywistej prawdy. Ale to tylko oznacza, że ​​jest miejsce na ulepszenia.

Jeśli chcesz mieć tabelę statystyk, którą można łatwo analizować i czytać, możesz utworzyć ją w WordPressie. W ten sposób możesz dostosować go do nowoczesnego, ale czystego wyglądu. Następnie możesz opublikować go w Internecie i podzielić się nim z czytelnikami.

Narzędziem, którego będziesz potrzebować, aby to wszystko się stało, jest wpDataTables, wtyczka tabelowa numer 1 WordPress, której możesz użyć do tworzenia tabel statystycznych.

Nasza wtyczka ma kilka funkcji, z których możesz skorzystać, w zależności od źródła danych, które posiadasz.

Jeśli chcesz utworzyć tabelę od podstaw, zalecamy ręczne utworzenie tabeli. Jest to jedno z najczęstszych zastosowań wpDataTables: do tworzenia tabel i wypełniania ich danymi pobranymi z panelu administracyjnego WordPress, bez dostępu lub bez dostępu do żadnego istniejącego źródła danych (Excel, CSV, Google Spreadsheet, JSON, XML, Baza danych MySQL itp.).

Jeśli jednak chcesz utworzyć tabelę z określonego źródła danych, te przewodniki mogą pomóc w rozpoczęciu pracy z wpDataTables:

• Jak utworzyć tabelę opartą na MySQL za pomocą wpDataTables
• Tworzenie tabel w WordPressie z arkuszy kalkulacyjnych Google
• Tworzenie tabel w WordPressie z Excela
• Jak utworzyć tabelę z danych CSV
• Tworzenie tabel w WordPressie z danych wejściowych JSON
• Jak tworzyć tabele w WordPressie z wejściem XML
• Tworzenie tabel w WordPress w oparciu o zserializowane tablice PHP

Teraz przejdźmy do przodu i powiedzmy, że masz dużo kolumn w tabeli statystycznej, które chcesz zaprezentować w swojej witrynie. Oczywiście sprawi to, że będzie to trochę zatłoczone. Jedynym rozwiązaniem, z którego możesz skorzystać, jest ukrycie niektórych kolumn, aby dobrze wyglądały na stronie.

W tym celu możesz użyć tabel Master-detail, dodatku, który pozwala jednym kliknięciem wyświetlić ukryte kolumny, aby poprawić wrażenia użytkownika na Twojej stronie.

W przykładzie, który pokażemy, utworzymy tabelę statystyczną z danych, które mamy w tabeli bazy danych MySQL. Sprawdzimy wcześniej naszą tabelę w phpMyAdmin i wygląda ona tak:

Teraz w wpDataTables użyjemy drugiej opcji kreatora tabel (Utwórz tabelę danych połączoną z istniejącym źródłem danych) i jako źródło danych wybierzemy „zapytanie SQL".

W edytorze SQL wstawimy zapytanie, aby wyświetlić wszystkie kolumny z tej tabeli:

SELECT * FROM statistics_table

Następnie klikamy przycisk „Zapisz zmiany” i tworzymy tabelę.

Szczegółowe instrukcje dotyczące tego procesu znajdują się w naszych dokumentach dotyczących tworzenia wpDataTables opartych na MySQL .

Na marginesie, jeśli nie masz dostępu do swojej bazy danych przez phpMyAdmin lub coś podobnego, lub po prostu nie jesteś zaznajomiony z tworzeniem zapytań, możesz użyć wbudowanego konstruktora zapytań WPDB wpDataTables.

Posiada graficzny interfejs użytkownika, który pozwala wybrać potrzebne tabele i kolumny oraz generuje zapytanie i podgląd. Możesz zmodyfikować zapytanie zgodnie z potrzebami i utworzyć wpDataTable na podstawie zmodyfikowanego zapytania.

W naszych dokumentach znajdziesz szczegółowe instrukcje na ten temat: Utwórz tabelę opartą na zapytaniach MySQL, wysyłając zapytanie do bazy danych.

W porządku, przejdźmy dalej z wytycznymi dotyczącymi tworzenia tabel statystycznych.

Teraz musimy dokonać pewnych dostosowań tabeli, takich jak ukrycie kolumny wdt_ID, włączenie opcji reakcji i ustawienie ukrywania wszystkich kolumn na urządzeniach mobilnych i tabletach, z wyjątkiem kolumny Element i Zysk.

W przypadku kolumn Przychód, Koszt i Zysk możesz użyć dostosowania koloru komórki z formatowaniem warunkowym.

W kolumnie Przychody ustawimy dwa warunki:

1) jeśli wartości komórek są wyższe od zera, to Ustaw kolor komórki na #0083c2

2) jeśli wartości komórek są większe od zera, to Ustaw klasę CSS komórki na biały tekst.

Następnie utworzymy te klasy w polu „Niestandardowy CSS” na karcie „Dostosuj” w ustawieniach tabeli w następujący sposób:

.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}

Gdzie numer 1 w .wpDataTable-1 to identyfikator Twojej tabeli, więc musisz go zmienić dla swojej tabeli.

Robimy to samo dla kolumny Koszt, z wyjątkiem tego, że ustawimy kolor w wartości warunku na czerwony (#D9534F)

A także dla kolumny Zysk, z wyjątkiem tego, że ustawimy kolor w wartości warunku na zielony (#5CB85C)

We wszystkich trzech kolumnach (Przychody, Koszt i Zysk) prefiks komórki, który mamy, jest ustawiony na walutę $ z opcją „Prefiks zawartości komórki” na karcie Wyświetlanie w ustawieniach Kolumn dla każdej kolumny.

Jeśli chcesz dowiedzieć się więcej na ten temat, zapoznaj się z naszymi dokumentami dotyczącymi waluty, wartości procentowych i innych kolumn.

I to wszystko!

Tak, to takie proste.

Tabela jest gotowa do opublikowania w Twoim poście lub na stronach. Teraz musisz to zrobić, aby pojawił się na twoich stronach w interfejsie. Podobnie jak w przypadku każdej innej wtyczki, używamy skrótów do wyświetlania tabel na stronach lub postach użytkowników.

Dodawanie skrótów jest łatwe, zwłaszcza jeśli korzystasz z popularnych programów do tworzenia stron, takich jak Elementor, WP Bakery lub Gutenberg.

Przy okazji, jeśli potrzebujesz więcej funkcji dla swoich tabel statystycznych, możesz sprawdzić następujące przewodniki, które pomogą:

• Obliczanie sum, wartości minimalnych, maksymalnych i średnich w tabelach WordPress
• Utwórz kolumny z formułą (obliczoną)
• Więcej personalizacji stołu
• Ustawianie zaawansowanego filtrowania

Możesz łatwo dostosować swoje tabele statystyczne za pomocą wpDataTables.

W porządku, teraz musimy pokazać dane, które mamy w postaci diagramów.

Stworzymy wykres kołowy. W tym przypadku użyjemy biblioteki Highcharts. Istnieją również dwie inne opcje, w zależności od Twoich preferencji: Google Charts i Chartjs.

Po wykonaniu prostej konfiguracji wykresu uzyskasz piękne wykresy z danych statystycznych.

Zobaczysz, że kiedy to zrobisz, wpDataTables pokaże listę możliwych typów wykresów, listę w zależności od używanego silnika wykresów.

Kiedy dochodzimy do kroku „Źródło danych”, musimy zdefiniować tabelę statystyczną, którą już utworzyliśmy, aby była używana jako źródło danych dla tego wykresu.

Teraz, gdy jesteśmy na etapie „Zakres danych”, będziemy musieli podać zakres danych dla wykresu.

Aby to zrobić, po prostu przeciągamy i upuszczamy potrzebne kolumny lub po prostu użyjemy przycisków strzałek. Wybraliśmy kolumny Pozycje i Przychody. W tym kroku ustawiamy również opcję filtrowania Śledź tabelę, dzięki czemu po sortowaniu i filtrowaniu tabel będziemy mieć dynamiczne wykresy.

Należy pamiętać, że w wpDataCharts można używać tylko jednej kolumny typu ciąg (ciąg, data, e-mail), podczas gdy wszystkie inne muszą być liczbami całkowitymi lub zmiennoprzecinkowymi.

Następnym krokiem, który musimy wykonać, jest „Formatowanie i podgląd”. Wprowadzone zmiany są natychmiast widoczne na wykresie renderowanym po prawej stronie ekranu.

Krok formatowania jest podzielony na kategorie reprezentujące różne elementy wykresu.

Tutaj możemy dostosować wykresy według potrzeb. Możemy ustawić responsywną szerokość, grupowanie, różne opcje dostosowywania układu, podpowiedzi, eksportu i nie tylko. Kiedy skończymy, kliknij przycisk „Zapisz wykres”.

Ostatnim krokiem jest „Zapisz i pobierz krótki kod”, w którym twój wykres jest gotowy. Wszystko, co musisz zrobić, to skopiować ten skrót i wstawić go na tej samej stronie lub poście, w którym wstawiłeś tabelę statystyczną.

Ponownie stworzymy drugi wykres z biblioteką Highchart. Tym razem wybierzemy typ skumulowanego wykresu warstwowego.

W kroku „Źródło danych” definiujemy tabelę statystyk tak samo jak w przypadku wykresu kołowego.

W kroku „Zakres danych” wybierzemy kolumny Pozycje, Przychody, Koszt i Zysk.

Włączona jest również opcja „Follow table filtering”.

W kroku „Formatowanie i podgląd” ustawimy opcje, takie jak szerokość responsywna, Wykres grupowania, Kolory serii, ale możesz to ustawić inaczej, w zależności od potrzeb.

W ostatnim kroku, „Zapisz i pobierz krótki kod”, skopiujemy krótki kod tak samo, jak w przypadku wykresu kołowego, a następnie wstawimy go na tej samej stronie, na której wstawiliśmy tabelę statystyk.

I to wszystko. To wszystko, jeśli chodzi o tabele statystyczne i wykresy, które są z nimi powiązane.

Chociaż tworzenie tabel statystycznych może być przytłaczającym zadaniem, tworzenie ich za pomocą wpDataTables jest dość łatwe, jak widzieliśmy w tym artykule.

Jeśli wykonasz kroki przedstawione w tym artykule, w efekcie stworzysz na swojej stronie lub poście responsywne tabele statystyczne i wykresy, które są połączone. Oznacza to, że gdy użytkownicy filtrują lub sortują tabele, wykresy również zostaną zaktualizowane.