WordPress și vizualizarea datelor

Publicat: 2022-02-04

Aveți o mulțime de date pe care doriți să le prezentați pe site-ul dvs. WordPress într-un format grafic? Poate niște statistici de vânzări sau date care arată unui client cum ați îmbunătățit traficul către site-ul său web pe o perioadă de câteva luni? Oricare ar fi motivul, prezentarea datelor într-un mod vizual face mult mai ușor să comunicați punctele de bază cu publicul dvs., precum și să fiți mai plăcut... la urma urmei, cu excepția cazului în care sunteți un adevărat pasionat al numerelor, studiind cu atenție foile de calcul cu rânduri și rânduri de numere. nu este ideea nimănui de multă distracție!

S-ar putea să vă placă ideea de a prezenta datele într-o manieră vizuală, dar întrebarea cheie este „cum procedați?”. Ar putea fi tentant să creați un grafic sau o diagramă circulară într-un software de design grafic (cum ar fi Canva) și apoi să plasați imaginea pe site-ul dvs. web. Cu siguranță asta va duce la bun sfârșit, dar dacă ar exista o cale mai bună?

Din fericire, există și, fiind WordPress, totul începe cu un plugin! În acest articol, vom arunca o privire la unele dintre opțiunile de plugin disponibile pentru a vă ajuta să afișați acele date într-un mod ușor de utilizat, interesant și lizibil. Haide să mergem!

Grafice ușoare

Pluginul Easy Charts este un plugin popular, gratuit, care face treaba. Nu a fost actualizat de ceva vreme, dar acest lucru pare să fie mai mult ca urmare a faptului că continuă să funcționeze bine „ca atare”, decât din cauza unei neglijențe semnificative.

Este bine prezentat și destul de simplu pentru a începe. După ce este instalat, mergeți direct la linkul de meniu „Adăugați nou” din zona de administrare Easy Charts.

Veți vedea că puteți adăuga date în rânduri și coloane (la fel ca într-un Excel sau alte foi de calcul. Ca bonus, există un panou de previzualizare pentru a vedea rezultatele din mers.

Configurația este detaliată. Puteți personaliza stilul, tipografia, legenda, culorile și multe altele pentru a obține aspectul dorit. Există mai multe moduri în care datele dvs. pot fi prezentate... pe care le alegeți va depinde în mare parte de tipul de date pe care le prezentați.

  • Diagramă cu bare
  • Graficul zonelor
  • Diagramă cu bare stivuite
  • Diagrama cu zone stivuite
  • Diagramă cu bare procentuale
  • Graficul cu suprafețe procentuale
  • Graficul proporțiilor
  • Graficul gogoșilor
  • Step Up Bar Chart
  • Diagrama Cascadei
  • Diagramă cu linii
  • Diagrama zonei polare

După ce ați creat graficul, vi se va oferi un cod scurt pe care îl puteți lipi apoi într-o postare sau într-o pagină. Alternativ, puteți adăuga diagrama direct din interiorul editorului vizual, dacă utilizați unul, cu ajutorul unui buton „Easy Charts” de inserare rapidă.

Pluginul a fost dezvoltat folosind biblioteca uvCharts Javascript și creează diagrame cu tranziții SVG și CSS3. Ca un bonus grozav, puteți descărca, de asemenea, toate diagramele pe care le creați ca fișier imagine. În cele din urmă, veți observa, de asemenea, că diagramele sunt responsive... o necesitate în lumea de astăzi a designului web, care are prioritate pe mobil.

Vizualizator

Pluginul Visualizer este o altă alegere populară pentru a crea diagrame și diagrame arătoase și receptive pentru site-ul dvs. Cu peste 40.000 de instalări și o serie de recenzii excelente, este o opțiune excelentă.

După instalarea și activarea pluginului, ar trebui să-l vedeți listat în meniul WordPress. Faceți clic pe „Visualizer -> Adăugați o diagramă nouă” pentru a adăuga prima diagramă.

Va apărea o fereastră pop-up care vă conduce prin procesul de selectare a opțiunilor care sunt perfecte pentru cerințele dvs. particulare ale diagramei.

Aveți 6 șabloane gratuite din care să alegeți:

  • Masa
  • Plăcintă/ Gogoașă
  • Linia
  • Zonă
  • geo
  • Bar

Puteți încărca datele dvs. CSV la nivel local sau puteți importa date dintr-un fișier CSV de la distanță sau dintr-o foaie de calcul Google. Probabil că veți dori să descărcați mai întâi fișierul CSV șablon pentru a verifica dacă datele dvs. sunt structurate într-un mod pe care pluginul îl va înțelege. Alternativ, puteți importa date dintr-o sursă JSON la distanță sau puteți adăuga date manual.

În fila Setări, veți găsi o serie de opțiuni care vă permit să modificați stilul diagramei înainte de a-l publica.

După ce ați creat diagrama, puteți copia codul scurt asociat sau îl puteți exporta ca CSV sau imagine. Pluginul Visualizer folosește Google Visualization API, DataTables.net și ChartJS pentru a realiza cele de mai sus.

wpDataTables

Pluginul wpDataTables este o altă alegere excelentă pentru a crea tabele și diagrame de date pentru a fi afișate pe site-ul dvs. WordPress. Este un plugin premium, dar oferă o versiune ușoară gratuită, care poate oferi suficiente funcții pentru multe proiecte.

Odată instalat și activat, mergeți la „wpDatatables -> Creați o diagramă” pentru a începe.

Puteți folosi expertul și urmați pașii pentru a crea diagrama la alegere. Setați un nume pentru diagramă, alegeți motorul de randare și tipul de vizualizare și apoi obțineți datele sursă care trebuie să fie un tabel creat cu același plugin.

Să ne uităm la acest proces puțin mai detaliat pentru a examina o funcție care nu este oferită de pluginurile menționate anterior. Faceți clic pe „Creați un tabel” pentru a începe.

După cum puteți vedea, puteți fie să-l creați de la zero, fie să extrageți conținutul tabelului dintr-o sursă existentă. Pentru acest exemplu, vom alege să creăm dintr-o sursă existentă. După ce am făcut clic pe aceasta, ni se va cere să alegem „Tipul sursei de date de intrare”.

În versiunea gratuită, putem folosi formatul de fișier CSV, Excel, XML sau JSON sau putem oferi un obiect serializat PHP.

Găzduiește-ți site-ul web cu Pressidium

GARANTIE 60 DE ZILE BANI RAPIS

VEZI PLANUL NOSTRU

Aceasta este o caracteristică excelentă, deoarece oferă posibilitatea de a prezenta date din baza de date. Nu este cel mai ușor de făcut, dar suntem pregătiți pentru o provocare!

În acest exemplu, să presupunem că vrem să vedem câteva statistici care arată numărul de postări pe pagini.

Codul PHP care scoate matricea serializată ar trebui să arate astfel:

 <?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 ); ?>

Conform documentației oficiale furnizate de wpDataTables, intrările din matricea părinte vor fi analizate ca rânduri, cheile matricei copil vor fi analizate ca antete de coloană, iar valorile matricei secundare ca valori de celule.

Am salvat codul într-un fișier pe care l-am numit test.php și, în sensul acestui exemplu, îl vom plasa în folderul rădăcină al instalării noastre WordPress.

Înapoi în zona de administrare, vom completa calea fișierului astfel:

Salvăm modificările și voila.

Acum putem seta tabelul ca sursă pentru diagramă, selectam tipul de diagramă și salvam diagrama. Simplu ca asta! Pașii finali sunt să urmați expertul până la încheierea acestuia, ceea ce va implica modificarea setărilor disponibile pentru a obține designul dorit pentru diagrama dvs. După aceea, sunteți liber să îl publicați.

Concluzie

Este incredibil de util să poți afișa datele într-un mod vizual pe un site web. Cu toate acestea, mulți utilizatori WordPress pur și simplu nu realizează că este un lucru relativ ușor de făcut cu ajutorul unui plugin. Sperăm că cele de mai sus v-au dat o idee despre opțiunile disponibile. Construire grafică fericită!