Nasza wtyczka ma kilka funkcji, z kt\u00f3rych mo\u017cesz skorzysta\u0107, w zale\u017cno\u015bci od \u017ar\u00f3d\u0142a danych, kt\u00f3re posiadasz.<\/p>\n
Je\u015bli chcesz utworzy\u0107 tabel\u0119 od podstaw, zalecamy r\u0119czne utworzenie tabeli<\/a>. Jest to jedno z najcz\u0119stszych zastosowa\u0144 wpDataTables: do tworzenia tabel i wype\u0142niania ich danymi pobranymi z panelu administracyjnego WordPress, bez dost\u0119pu lub bez dost\u0119pu do \u017cadnego istniej\u0105cego \u017ar\u00f3d\u0142a danych (Excel, CSV, Google Spreadsheet, JSON, XML, Baza danych MySQL itp.).<\/p>\n Je\u015bli jednak chcesz utworzy\u0107 tabel\u0119 z okre\u015blonego \u017ar\u00f3d\u0142a danych, te przewodniki mog\u0105 pom\u00f3c w rozpocz\u0119ciu pracy z wpDataTables:<\/p>\n Teraz przejd\u017amy do przodu i powiedzmy, \u017ce masz du\u017co kolumn w tabeli statystycznej, kt\u00f3re chcesz zaprezentowa\u0107 w swojej witrynie. Oczywi\u015bcie sprawi to, \u017ce b\u0119dzie to troch\u0119 zat\u0142oczone. Jedynym rozwi\u0105zaniem, z kt\u00f3rego mo\u017cesz skorzysta\u0107, jest ukrycie niekt\u00f3rych kolumn, aby dobrze wygl\u0105da\u0142y na stronie.<\/p>\n W tym celu mo\u017cesz u\u017cy\u0107 tabel Master-detail<\/a>, dodatku, kt\u00f3ry pozwala jednym klikni\u0119ciem wy\u015bwietli\u0107 ukryte kolumny, aby poprawi\u0107 wra\u017cenia u\u017cytkownika na Twojej stronie.<\/p>\n W przyk\u0142adzie, kt\u00f3ry poka\u017cemy, utworzymy tabel\u0119 statystyczn\u0105 z danych, kt\u00f3re mamy w tabeli bazy danych MySQL. Sprawdzimy wcze\u015bniej nasz\u0105 tabel\u0119 w phpMyAdmin i wygl\u0105da ona tak:<\/p>\n Teraz w wpDataTables u\u017cyjemy drugiej opcji kreatora tabel (Utw\u00f3rz tabel\u0119 danych po\u0142\u0105czon\u0105 z istniej\u0105cym \u017ar\u00f3d\u0142em danych) i jako \u017ar\u00f3d\u0142o danych wybierzemy \u201ezapytanie SQL".<\/p>\n W edytorze SQL wstawimy zapytanie, aby wy\u015bwietli\u0107 wszystkie kolumny z tej tabeli:<\/p>\n Nast\u0119pnie klikamy przycisk \u201eZapisz zmiany” i tworzymy tabel\u0119.<\/p>\n Szczeg\u00f3\u0142owe instrukcje dotycz\u0105ce tego procesu znajduj\u0105 si\u0119 w naszych dokumentach dotycz\u0105cych tworzenia wpDataTables opartych<\/a> na MySQL .<\/p>\n Na marginesie, je\u015bli nie masz dost\u0119pu do swojej bazy danych przez phpMyAdmin lub co\u015b podobnego, lub po prostu nie jeste\u015b zaznajomiony z tworzeniem zapyta\u0144, mo\u017cesz u\u017cy\u0107 wbudowanego konstruktora zapyta\u0144 WPDB wpDataTables.<\/p>\n Posiada graficzny interfejs u\u017cytkownika, kt\u00f3ry pozwala wybra\u0107 potrzebne tabele i kolumny oraz generuje zapytanie i podgl\u0105d. Mo\u017cesz zmodyfikowa\u0107 zapytanie zgodnie z potrzebami i utworzy\u0107 wpDataTable na podstawie zmodyfikowanego zapytania.<\/p>\n W naszych dokumentach znajdziesz szczeg\u00f3\u0142owe instrukcje na ten temat: Utw\u00f3rz tabel\u0119 opart\u0105 na zapytaniach MySQL, wysy\u0142aj\u0105c zapytanie do bazy danych<\/a>.<\/p>\n W porz\u0105dku, przejd\u017amy dalej z wytycznymi dotycz\u0105cymi tworzenia tabel statystycznych.<\/p>\n Teraz musimy dokona\u0107 pewnych dostosowa\u0144 tabeli, takich jak ukrycie kolumny<\/a> wdt_ID, w\u0142\u0105czenie opcji reakcji<\/a> i ustawienie ukrywania wszystkich kolumn na urz\u0105dzeniach mobilnych i tabletach, z wyj\u0105tkiem kolumny Element i Zysk.<\/p>\n W przypadku kolumn Przych\u00f3d, Koszt i Zysk mo\u017cesz u\u017cy\u0107 dostosowania koloru kom\u00f3rki z formatowaniem warunkowym<\/a>.<\/p>\n W kolumnie Przychody ustawimy dwa warunki:<\/p>\n 1) je\u015bli warto\u015bci kom\u00f3rek s\u0105 wy\u017csze od zera, to Ustaw kolor kom\u00f3rki na #0083c2<\/p>\n 2) je\u015bli warto\u015bci kom\u00f3rek s\u0105 wi\u0119ksze od zera, to Ustaw klas\u0119 CSS kom\u00f3rki na bia\u0142y tekst.<\/p>\n Nast\u0119pnie utworzymy te klasy w polu \u201eNiestandardowy CSS” na karcie \u201eDostosuj” w ustawieniach tabeli w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n Gdzie numer 1 w .wpDataTable-1 to identyfikator Twojej tabeli, wi\u0119c musisz go zmieni\u0107 dla swojej tabeli.<\/p>\n Robimy to samo dla kolumny Koszt, z wyj\u0105tkiem tego, \u017ce ustawimy kolor w warto\u015bci warunku na czerwony (#D9534F)<\/p>\n A tak\u017ce dla kolumny Zysk, z wyj\u0105tkiem tego, \u017ce ustawimy kolor w warto\u015bci warunku na zielony (#5CB85C)<\/p>\n We wszystkich trzech kolumnach (Przychody, Koszt i Zysk) prefiks kom\u00f3rki, kt\u00f3ry mamy, jest ustawiony na walut\u0119 $ z opcj\u0105 \u201ePrefiks zawarto\u015bci kom\u00f3rki” na karcie Wy\u015bwietlanie w ustawieniach Kolumn dla ka\u017cdej kolumny.<\/p>\n Je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej na ten temat, zapoznaj si\u0119 z naszymi dokumentami dotycz\u0105cymi waluty, warto\u015bci procentowych i innych kolumn<\/a>.<\/p>\n I to wszystko!<\/p>\n Tak, to takie proste.<\/p>\n Tabela jest gotowa do opublikowania w Twoim po\u015bcie lub na stronach. Teraz musisz to zrobi\u0107, aby pojawi\u0142 si\u0119 na twoich stronach w interfejsie. Podobnie jak w przypadku ka\u017cdej innej wtyczki, u\u017cywamy skr\u00f3t\u00f3w do wy\u015bwietlania tabel na stronach lub postach u\u017cytkownik\u00f3w.<\/p>\n Dodawanie skr\u00f3t\u00f3w<\/a> jest \u0142atwe, zw\u0142aszcza je\u015bli korzystasz z popularnych program\u00f3w do tworzenia stron, takich jak Elementor, WP Bakery lub Gutenberg.<\/p>\n Przy okazji, je\u015bli potrzebujesz wi\u0119cej funkcji dla swoich tabel statystycznych, mo\u017cesz sprawdzi\u0107 nast\u0119puj\u0105ce przewodniki, kt\u00f3re pomog\u0105:<\/p>\n Mo\u017cesz \u0142atwo dostosowa\u0107 swoje tabele statystyczne za pomoc\u0105 wpDataTables.<\/p>\n W porz\u0105dku, teraz musimy pokaza\u0107 dane, kt\u00f3re mamy w postaci diagram\u00f3w.<\/p>\n Stworzymy wykres ko\u0142owy. W tym przypadku u\u017cyjemy biblioteki Highcharts<\/a>. Istniej\u0105 r\u00f3wnie\u017c dwie inne opcje, w zale\u017cno\u015bci od Twoich preferencji: Google Charts<\/a> i Chartjs<\/a>.<\/p>\n Po wykonaniu prostej konfiguracji wykresu<\/a> uzyskasz pi\u0119kne wykresy z danych statystycznych.<\/p>\n Zobaczysz, \u017ce kiedy to zrobisz, wpDataTables poka\u017ce list\u0119 mo\u017cliwych typ\u00f3w wykres\u00f3w, list\u0119 w zale\u017cno\u015bci od u\u017cywanego silnika wykres\u00f3w.<\/p>\n Kiedy dochodzimy do kroku \u201e\u0179r\u00f3d\u0142o danych”, musimy zdefiniowa\u0107 tabel\u0119 statystyczn\u0105, kt\u00f3r\u0105 ju\u017c utworzyli\u015bmy, aby by\u0142a u\u017cywana jako \u017ar\u00f3d\u0142o danych dla tego wykresu.<\/p>\n Teraz, gdy jeste\u015bmy na etapie \u201eZakres danych”, b\u0119dziemy musieli poda\u0107 zakres danych dla wykresu.<\/p>\n Aby to zrobi\u0107, po prostu przeci\u0105gamy i upuszczamy potrzebne kolumny lub po prostu u\u017cyjemy przycisk\u00f3w strza\u0142ek. Wybrali\u015bmy kolumny Pozycje i Przychody. W tym kroku ustawiamy r\u00f3wnie\u017c opcj\u0119 filtrowania \u015aled\u017a tabel\u0119<\/a>, dzi\u0119ki czemu po sortowaniu i filtrowaniu tabel b\u0119dziemy mie\u0107 dynamiczne wykresy.<\/p>\n Nale\u017cy pami\u0119ta\u0107, \u017ce w wpDataCharts mo\u017cna u\u017cywa\u0107 tylko jednej kolumny typu ci\u0105g (ci\u0105g, data, e-mail), podczas gdy wszystkie inne musz\u0105 by\u0107 liczbami ca\u0142kowitymi lub zmiennoprzecinkowymi.<\/p>\n Nast\u0119pnym krokiem, kt\u00f3ry musimy wykona\u0107, jest \u201eFormatowanie i podgl\u0105d”. Wprowadzone zmiany s\u0105 natychmiast widoczne na wykresie renderowanym po prawej stronie ekranu.<\/p>\n Krok formatowania jest podzielony na kategorie reprezentuj\u0105ce r\u00f3\u017cne elementy wykresu.<\/p>\n Tutaj mo\u017cemy dostosowa\u0107 wykresy wed\u0142ug potrzeb. Mo\u017cemy ustawi\u0107 responsywn\u0105 szeroko\u015b\u0107, grupowanie, r\u00f3\u017cne opcje dostosowywania uk\u0142adu, podpowiedzi, eksportu i nie tylko. Kiedy sko\u0144czymy, kliknij przycisk \u201eZapisz wykres”.<\/p>\n Ostatnim krokiem jest \u201eZapisz i pobierz kr\u00f3tki kod”, w kt\u00f3rym tw\u00f3j wykres jest gotowy. Wszystko, co musisz zrobi\u0107, to skopiowa\u0107 ten skr\u00f3t i wstawi\u0107 go na tej samej stronie lub po\u015bcie, w kt\u00f3rym wstawi\u0142e\u015b tabel\u0119 statystyczn\u0105.<\/p>\n Ponownie stworzymy drugi wykres z bibliotek\u0105 Highchart. Tym razem wybierzemy typ skumulowanego wykresu warstwowego.<\/p>\n W kroku \u201e\u0179r\u00f3d\u0142o danych” definiujemy tabel\u0119 statystyk tak samo jak w przypadku wykresu ko\u0142owego.<\/p>\n W kroku \u201eZakres danych” wybierzemy kolumny Pozycje, Przychody, Koszt i Zysk.<\/p>\n W\u0142\u0105czona jest r\u00f3wnie\u017c opcja \u201eFollow table filtering”.<\/p>\n W kroku \u201eFormatowanie i podgl\u0105d” ustawimy opcje, takie jak szeroko\u015b\u0107 responsywna, Wykres grupowania, Kolory serii, ale mo\u017cesz to ustawi\u0107 inaczej, w zale\u017cno\u015bci od potrzeb.<\/p>\n\n
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee4b505f.png\")
<\/a><\/p>\nSELECT * FROM statistics_table<\/code><\/pre>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee63b493.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee8a7204.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eebe26c5.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}<\/code><\/pre>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eed74f6c.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eefd0112.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef18e88f.png\")
<\/a><\/p>\n\n
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef36ae8f.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef51f1ea.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef6455b8.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef87fe1f.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efa64d74.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efcc29c4.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eff8c779.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f00ad5b0.png\")
<\/a><\/p>\n
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f02ca95c.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f0581e29.png\")
<\/a><\/p>\n