WordPress e visualizzazione dei dati

Pubblicato: 2022-02-04

Hai un intero carico di dati che vuoi presentare sul tuo sito Web WordPress in formato grafico? Forse alcune statistiche o dati di vendita che mostrano a un cliente come hai migliorato il traffico verso il suo sito Web in un periodo di mesi? Qualunque sia la ragione, presentare i dati in modo visivo rende molto più facile comunicare i punti chiave con il tuo pubblico, oltre ad essere più divertente... dopotutto, a meno che tu non sia un vero fanatico dei numeri, sviscerando fogli di calcolo con righe e righe di numeri nessuno ha idea di tanto divertimento!

Potrebbe piacerti l'idea di presentare i dati in modo visivo, ma la domanda chiave è "come lo fai?". Potrebbe essere allettante creare un grafico o un grafico a torta in alcuni software di progettazione grafica (come Canva) e quindi posizionare l'immagine sul tuo sito web. Questo certamente porterà a termine il lavoro, ma se ci fosse un modo migliore?

Fortunatamente c'è, ed essendo WordPress tutto inizia con un plugin! In questo articolo, daremo un'occhiata ad alcune delle opzioni del plugin disponibili per aiutarti a visualizzare quei dati in modo facile da usare, interessante e leggibile. Muoviamoci!

Grafici facili

Il plug-in Easy charts è un popolare plug-in gratuito che fa il suo lavoro. Non è stato aggiornato da un po' di tempo, ma questo sembra essere più il risultato del fatto che continua a funzionare bene "così com'è" che a causa di una negligenza significativa.

È ben caratterizzato e abbastanza semplice per iniziare. Una volta installato, vai direttamente al collegamento del menu "Aggiungi nuovo" dall'area di amministrazione di Easy Charts.

Vedrai che puoi aggiungere dati in righe e colonne (proprio come faresti in Excel o altri fogli di calcolo. Come bonus, c'è un pannello di anteprima per vedere i risultati al volo.

La configurazione è dettagliata. Puoi personalizzare lo stile, la tipografia, la didascalia, i colori e altro per ottenere l'aspetto che desideri. Esistono diversi modi in cui i tuoi dati possono essere presentati... che scegli dipenderanno in gran parte dal tipo di dati che stai presentando.

Grafico a barre
Grafico ad area
Grafico a barre in pila
Grafico ad area in pila
Grafico a barre percentuale
Grafico ad area percentuale
Grafico a torta
Grafico a ciambella
Aumenta il grafico a barre
Grafico a cascata
Grafico a linee
Grafico dell'area polare

Dopo aver creato il grafico, ti verrà fornito uno shortcode che puoi quindi incollare in un post o in una pagina. In alternativa, puoi aggiungere il tuo grafico direttamente dall'interno dell'editor visivo, se ne stai utilizzando uno, con l'aiuto di un pulsante di inserimento rapido "Grafici facili".

Il plugin è stato sviluppato utilizzando la libreria uvCharts Javascript e crea grafici con transizioni SVG e CSS3. Come bonus interessante puoi anche scaricare tutti i grafici che crei come file immagine. Infine, noterai anche che i grafici sono reattivi... un must nel mondo del web design mobile first di oggi.

Visualizzatore

Il plug-in Visualizer è un'altra scelta popolare per la creazione di grafici e diagrammi di bell'aspetto e reattivi per il tuo sito web. Con oltre 40.000 installazioni e una serie di ottime recensioni, è un'opzione eccellente.

Dopo aver installato e attivato il plugin, dovresti vederlo elencato nel menu di WordPress. Fai clic su "Visualizzatore -> Aggiungi nuovo grafico" per aggiungere il tuo primo grafico.

Apparirà una finestra popup che ti guida attraverso il processo di selezione delle opzioni perfette per i tuoi requisiti particolari del grafico.

Hai 6 modelli gratuiti tra cui scegliere:

Tavolo
Torta/Ciambella
Linea
La zona
Geo
Sbarra

Puoi caricare i tuoi dati CSV localmente o importare dati da un file CSV remoto o da un foglio di lavoro Google. Probabilmente vorrai prima scaricare il file CSV del modello, tuttavia, per verificare che i tuoi dati siano strutturati in un modo che il plug-in possa comprendere. In alternativa, puoi importare dati da un'origine JSON remota o aggiungere dati manualmente.

Nella scheda Impostazioni troverai una gamma di opzioni che ti consentono di modificare lo stile del tuo grafico prima di pubblicarlo.

Una volta creato il grafico, puoi copiare lo shortcode associato o esportarlo come CSV o immagine. Il plug-in Visualizer utilizza l'API di visualizzazione di Google, DataTables.net e ChartJS per realizzare quanto sopra.

wpDataTables

Il plug-in wpDataTables è un'altra ottima scelta per creare tabelle e grafici di dati da visualizzare sul tuo sito Web WordPress. È un plug-in premium ma offre una versione gratuita leggera che potrebbe fornire funzionalità sufficienti per molti progetti.

Una volta installato e attivato, vai su "wpDatatables -> Crea un grafico" per iniziare.

Puoi utilizzare la procedura guidata e seguire i passaggi per creare il grafico di tua scelta. Imposta un nome per il grafico, scegli il motore di rendering e il tipo di visualizzazione e quindi ottieni i dati di origine che devono essere una tabella creata con lo stesso plug-in.

Esaminiamo questo processo in modo leggermente più dettagliato per esaminare una funzione non offerta dai plugin menzionati in precedenza. Fai clic su "Crea una tabella" per iniziare.

Come puoi vedere, puoi crearlo da zero o estrarre il contenuto della tabella da una fonte esistente. Per questo esempio, sceglieremo di creare da un'origine esistente. Dopo aver fatto clic su questo ci verrà quindi chiesto di scegliere il "Tipo di origine dati di input".

Nella versione gratuita, possiamo utilizzare il formato di file CSV, Excel, XML o JSON o fornire un oggetto serializzato PHP.

Questa è un'ottima funzionalità in quanto offre la possibilità di presentare i dati dal database. Questo non è il più facile da fare, ma ehi, siamo pronti per una sfida!

In questo esempio, supponiamo di voler vedere alcune statistiche che mostrano il numero di post rispetto alle pagine.

Il codice PHP che restituisce l'array serializzato dovrebbe assomigliare a questo:

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

Secondo la documentazione ufficiale fornita da wpDataTables, le voci dell'array padre verranno analizzate come righe, le chiavi dell'array figlio verranno analizzate come intestazioni di colonna e i valori dell'array figlio come valori di cella.

Abbiamo salvato il codice in un file che abbiamo chiamato test.php e, ai fini di questo esempio, lo collocheremo nella cartella principale della nostra installazione di WordPress.

Tornando nell'area di amministrazione, compileremo il percorso del file in questo modo:

Salviamo le modifiche e voilà.

Ora possiamo impostare la tabella come origine per il grafico, selezionare il tipo di grafico e salvare il grafico. Semplice come quella! I passaggi finali consistono nel seguire la procedura guidata fino alla sua conclusione, che comporterà la modifica delle impostazioni disponibili per ottenere il design desiderato per il grafico. Dopodiché, sei libero di pubblicarlo.

Conclusione

È incredibilmente utile poter visualizzare i dati in modo visivo su un sito web. Tuttavia, molti utenti di WordPress semplicemente non si rendono conto che è una cosa relativamente facile da fare con l'aiuto di un plugin. Spero che quanto sopra ti abbia dato un'idea delle opzioni a tua disposizione. Buona costruzione del grafico!