WordPress i wizualizacja danych

Opublikowany: 2022-02-04

Masz całą masę danych, które chcesz zaprezentować na swojej stronie WordPress w formie wykresu? Może jakieś statystyki sprzedaży lub dane, które pokazują klientowi, jak poprawiłeś ruch w jego witrynie na przestrzeni miesięcy? Bez względu na przyczynę, prezentacja danych w sposób wizualny znacznie ułatwia komunikowanie kluczowych punktów z odbiorcami, a także sprawia, że ​​jest to przyjemniejsze… w końcu, chyba że jesteś prawdziwym maniakiem liczb, przeglądającym arkusze kalkulacyjne z rzędami i rzędami liczb nie jest niczyim pomysłem na zabawę!

Być może spodobał Ci się pomysł przedstawiania danych w sposób wizualny, ale kluczowe pytanie brzmi „jak to zrobić?”. Kuszące może być utworzenie wykresu lub wykresu kołowego w jakimś oprogramowaniu do projektowania graficznego (takiego jak Canva), a następnie umieszczenie obrazu w witrynie. To z pewnością załatwi sprawę, ale co by było, gdyby istniał lepszy sposób?

Na szczęście istnieje, a ponieważ jest WordPress, wszystko zaczyna się od wtyczki! W tym artykule przyjrzymy się niektórym dostępnym opcjom wtyczek, które pomogą Ci wyświetlić te dane w przyjazny dla użytkownika, interesujący i czytelny sposób. Kontynuujmy!

Łatwe wykresy

Wtyczka Easy charts to popularna, bezpłatna wtyczka, która wykonuje zadanie. Nie był aktualizowany od jakiegoś czasu, ale wydaje się, że jest to bardziej wynikiem tego, że nadal działa dobrze „tak jak jest”, niż z powodu jakiegokolwiek znaczącego zaniedbania.

Jest dobrze wyposażony i dość prosty na początek. Po zainstalowaniu przejdź bezpośrednio do łącza menu „Dodaj nowy” w obszarze administracyjnym Easy Charts.

Zobaczysz, że możesz dodawać dane w wierszach i kolumnach (podobnie jak w Excelu lub innych arkuszach kalkulacyjnych. Jako bonus dostępny jest panel podglądu, dzięki któremu możesz zobaczyć wyniki na bieżąco.

Konfiguracja jest szczegółowa. Możesz spersonalizować styl, typografię, podpis, kolory i nie tylko, aby uzyskać pożądany wygląd. Istnieje wiele sposobów prezentowania danych… wybór, który wybierzesz, będzie w dużej mierze zależeć od rodzaju prezentowanych danych.

  • Wykres słupkowy
  • Wykres powierzchniowy
  • Skumulowany wykres słupkowy
  • Skumulowany wykres warstwowy
  • Procentowy wykres słupkowy
  • Wykres procentowy powierzchni
  • Wykres kołowy
  • Wykres pączkowy
  • Wykres słupkowy Step Up
  • Wykres wodospadu
  • Wykres liniowy
  • Wykres obszaru polarnego

Po utworzeniu wykresu otrzymasz krótki kod, który możesz następnie wkleić do posta lub strony. Alternatywnie możesz dodać swój wykres bezpośrednio z edytora wizualnego, jeśli go używasz, za pomocą przycisku szybkiego wstawiania „Łatwe wykresy”.

Wtyczka została opracowana przy użyciu biblioteki JavaScript uvCharts i tworzy wykresy z przejściami SVG i CSS3. Jako fajny bonus możesz również pobrać dowolne wykresy, które utworzysz jako plik obrazu. Na koniec zauważysz również, że wykresy są responsywne… to konieczność w dzisiejszym świecie projektowania stron internetowych zorientowanym na urządzenia mobilne.

Wizualizator

Wtyczka Visualizer to kolejny popularny wybór do tworzenia dobrze wyglądających, responsywnych wykresów i diagramów dla Twojej witryny. Z ponad 40 000 instalacji i mnóstwem świetnych recenzji jest to doskonała opcja.

Po zainstalowaniu i aktywacji wtyczki powinieneś zobaczyć jej listę w menu WordPress. Kliknij „Wizualizator -> Dodaj nowy wykres”, aby dodać swój pierwszy wykres.

Pojawi się wyskakujące okienko, które przeprowadzi Cię przez proces wyboru opcji, które są idealne dla Twoich konkretnych wymagań wykresu.

Masz 6 darmowych szablonów do wyboru:

  • Stół
  • Ciasto/Pączek
  • Linia
  • Powierzchnia
  • Geo
  • Bar

Możesz przesłać swoje dane w formacie CSV lokalnie lub zaimportować dane ze zdalnego pliku CSV lub arkusza kalkulacyjnego Google. Prawdopodobnie najpierw zechcesz pobrać szablonowy plik CSV, aby sprawdzić, czy Twoje dane są uporządkowane w sposób zrozumiały dla wtyczki. Alternatywnie możesz zaimportować dane ze zdalnego źródła JSON lub dodać dane ręcznie.

Na karcie Ustawienia znajdziesz szereg opcji, które pozwalają zmienić styl wykresu przed jego opublikowaniem.

Po utworzeniu wykresu możesz skopiować powiązany z nim kod skrócony lub wyeksportować go jako plik CSV lub obraz. Wtyczka Visualizer korzysta z Google Visualization API, DataTables.net i ChartJS, aby osiągnąć powyższe.

wpDataTables

Wtyczka wpDataTables to kolejny świetny wybór do tworzenia tabel danych i wykresów do wyświetlania w witrynie WordPress. Jest to wtyczka premium, ale oferuje lekką darmową wersję, która może zapewnić wystarczającą ilość funkcji dla wielu projektów.

Po zainstalowaniu i aktywacji przejdź do „wpDatatables -> Utwórz wykres”, aby rozpocząć.

Możesz użyć kreatora i postępować zgodnie z instrukcjami, aby utworzyć wybrany wykres. Ustaw nazwę dla wykresu, wybierz silnik renderowania i typ wizualizacji, a następnie pobierz dane źródłowe, które muszą być tabelą utworzoną za pomocą tej samej wtyczki.

Przyjrzyjmy się temu procesowi nieco bardziej szczegółowo, aby zbadać funkcję, której nie oferują wspomniane wcześniej wtyczki. Kliknij „Utwórz tabelę”, aby rozpocząć.

Jak widać, możesz utworzyć go od podstaw lub pobrać zawartość tabeli z istniejącego źródła. W tym przykładzie wybierzemy tworzenie z istniejącego źródła. Po kliknięciu tego zostaniemy poproszeni o wybranie „Typu źródła danych wejściowych”.

W wersji darmowej możemy skorzystać z formatu pliku CSV, Excel, XML lub JSON lub dostarczyć obiekt serializowany PHP.

Hostuj swoją stronę internetową z Pressidium

60- DNIOWA GWARANCJA ZWROTU PIENIĘDZY

ZOBACZ NASZE PLANY

Jest to świetna funkcja, ponieważ daje możliwość prezentacji danych z Twojej bazy danych. Nie jest to najłatwiejsze do zrobienia, ale hej, czeka nas wyzwanie!

W tym przykładzie załóżmy, że chcemy zobaczyć statystyki, które pokazują liczbę postów na stronach.

Kod PHP, który wyprowadza zserializowaną tablicę, powinien wyglądać tak:

 <?php include('wp-blog-header.php'); header("HTTP/1.1 200 OK"); $return_array = array(); $posts_query = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish' ) ); $pages_query = new WP_Query( array( 'post_type' => 'page', 'post_status' => 'publish' ) ); $posts = $posts_query->found_posts; $pages = $pages_query->found_posts; $return_array[] = array( 'Type' => 'Posts', ' Count' => $posts ); $return_array[] = array( 'Type' => 'Pages', 'Count' => $pages ); echo serialize( $return_array ); ?>

Zgodnie z oficjalną dokumentacją dostarczoną przez wpDataTables, wpisy tablicy nadrzędnej będą analizowane jako wiersze, klucze podrzędnych tablic będą analizowane jako nagłówki kolumn, a wartości tablic podrzędnych jako wartości komórek.

Zapisaliśmy kod w pliku o nazwie test.php i na potrzeby tego przykładu umieścimy go w głównym folderze naszej instalacji WordPressa.

W obszarze administracyjnym wypełnimy ścieżkę do pliku w następujący sposób:

Zapisujemy zmiany i voila.

Teraz możemy ustawić tabelę jako źródło wykresu, wybrać typ wykresu i zapisać wykres. Proste! Ostatnie kroki to podążanie za kreatorem do jego zakończenia, co będzie wymagało dostosowania dostępnych ustawień, aby uzyskać projekt, który chcesz dla swojego wykresu. Po tym możesz go opublikować.

Wniosek

Niezwykle przydatna jest możliwość wizualnego wyświetlania danych na stronie internetowej. Jednak wielu użytkowników WordPressa po prostu nie zdaje sobie sprawy, że za pomocą wtyczki jest to stosunkowo łatwe. Mamy nadzieję, że powyższe informacje dały ci pewne pojęcie o dostępnych opcjach. Miłego budowania wykresu!