L'ultima volta che ho provato ad aggiungere una tabella al mio blog WordPress, ho finito per scartare tutto e utilizzare invece un elenco puntato.

Vi suona familiare?

Molti temi WordPress di grande impatto sono dotati della possibilità di creare tabelle di grande effetto. Certo, all'inizio possono sembrare belle, ma non si può fare molto con esse.

Volete dati filtrabili? No.

Volete che la tabella sia reattiva per i dispositivi mobili? No.

Volete importare i dati da un CSV? Non se ne parla.

Ecco la buona notizia:

Con il plugin giusto, è possibile creare tabelle dinamiche altamente funzionali, che consentono di visualizzare dati filtrabili.

Insieme a grafici e altro.

Diamo un'occhiata a come si può fare con wpDataTables.

Nota: Anche se questo tutorial è incentrato sulle tabelle interattive, potreste trovare utile il nostro tutorial sulla creazione di tabelle reattive per i dispositivi mobili con wpDataTables. Fate clic qui per consultarlo. Questo nuovo tutorial tiene conto dell'interfaccia utente aggiornata e delle funzioni aggiuntive recentemente rilasciate in wpDataTables.

Questo plugin consente di creare bellissime tabelle senza alcuna conoscenza del linguaggio HTML.

wpDataTables è un plugin premium per WordPress che rende semplicissimo il processo di creazione e pubblicazione di tabelle sul vostro sito web. È leggero, intuitivo e svolge il lavoro in pochi minuti, lasciandovi meno codice da spulciare e più tempo per il blog.

Uno dei punti chiave di questo plugin è che si non è necessaria alcuna conoscenza pregressa del linguaggio HTML Tutto avviene all'interno di una pagina di impostazioni facile da usare. Per pubblicare è sufficiente copiare e incollare uno shortcode e il gioco è fatto.

Per i blogger e le aziende, questa è un'ottima notizia perché consente di visualizzare molti dati in modo sintetico e facile da digerire.

Si può usare anche per:

• Un catalogo di prodotti
• Tabelle di confronto dei prodotti
• Listini prezzi
• Raccolta dati dagli utenti
• Risultati sportivi
• Tracciare i propri progressi per qualsiasi cosa che coinvolga i numeri (ad esempio, un report sulle entrate del blog)

Le possibilità sono infinite.

Creare una tabella dall'inizio alla fine: una guida passo passo

Utilizzare il plugin wpDataTables per creare tabelle belle, chiare e completamente funzionali sul vostro sito web WordPress è semplice.

Ecco come iniziare:

Fase 1 - Preparate il vostro file

Di seguito, ho creato un esempio di documento Excel per una serie di spese casuali, che include diverse colonne come la data, il metodo di pagamento e il costo.

Assicurarsi che i dati siano visualizzati in modo simile, altrimenti il plugin farà fatica a definire le colonne della tabella.

Passo 2 - Creare una nuova tabella

Passare a wpDataTables sul lato sinistro della dashboard di WordPress.

Facendo clic su questo link si accede alla schermata qui sopra, dove si crea e si aggiunge la nuova tabella:

Dopo aver fatto clic sul pulsante "Aggiungi nuovo", viene visualizzata questa schermata, in cui si iniziano a impostare i parametri della tabella, in modo che funzioni e abbia l'aspetto desiderato:

Fase 3 - Definire le caratteristiche del tavolo

Nelle prime tre sezioni della pagina di impostazione della tabella, è possibile eseguire le seguenti operazioni:

• Creare un titolo
• Selezionare se si desidera mostrare il titolo della tabella nella pagina.
• Selezionare un tipo di sorgente di ingresso per il tavolo

Questi sono gli allestimenti più elementari della tavola.

Fate clic su "Carica file" e cercate il vostro documento. Le tabelle che potete creare possono essere complicate quanto volete.

Come potete vedere, ho dato alla mia tabella un titolo pertinente, ho selezionato il tipo di file Excel dalla casella a discesa e ho caricato il mio file su WordPress.

Più avanti nella pagina, si trovano altre impostazioni per personalizzare la tabella:

Questi sono:

• Reattivo - Consente di visualizzare la tabella in modo diverso su desktop, tablet e cellulari.
• Scorrevole - Consente di scorrere la tabella in orizzontale
• Nascondere la tabella fino al caricamento completo della pagina - Utile per le pagine che si caricano lentamente
• Filtraggio avanzato - Per visualizzare un filtro sotto ogni colonna
• Filtro in forma - Per un filtro all'interno del modulo stesso
• Strumenti da tavolo - Per le opzioni come copia, salva in Excel e salva in CSV integrate nel modulo
• Abilita l'ordinamento - Questo permette di ordinare le tabelle
• Limitare il layout della tabella - Limita la larghezza della tabella al 100% del contenitore padre.
• Lunghezza del display - Definire il numero di voci visualizzate in una pagina

Facendo clic su "Anteprima" è possibile visualizzare la tabella e modificare le impostazioni ritenute necessarie per ottenere l'aspetto desiderato.

Una volta selezionate le opzioni più adatte al tipo di tabella che si desidera visualizzare, è il momento di fare clic sul pulsante "Salva".

Se si desidera personalizzare ulteriormente le colonne, una volta fatto clic su "salva", sarà possibile scorrere ulteriormente la pagina per ottenere ulteriori opzioni. Le impostazioni predefinite sono generate automaticamente, tuttavia è possibile modificare il colore di ciascuna colonna, il tipo di colonna e di filtro (come data, ora e testo).

Di seguito, ho aggiunto alcuni colori e modificato i tipi di colonna in testo, numero e stringa.

Passo 4 - Salvare e copiare lo shortcode

Una volta salvata la tabella, fare clic su "Chiudi" per tornare alla pagina iniziale del plugin. Ora si dovrebbe vedere la tabella creata, il titolo e il tipo di tabella, lo shortcode da inserire nel post o nella pagina e l'opzione per duplicarla.

Voglio visualizzare questa tabella in una pagina, quindi devo copiare lo shortcode e poi navigare nella pagina che desidero modificare.

Passo 5 - Aggiungere lo shortcode al post o alla pagina

Per aggiungere la tabella a una pagina, è davvero semplice incollare lo shortcode nell'editor di pagina. Selezionate il punto della pagina in cui desiderate visualizzare la tabella, incollate il codice e continuate a creare i vostri contenuti:

Passo 6 - Pubblicare

Una volta premuto il pulsante di pubblicazione sulla pagina, la tabella dovrebbe avere un aspetto simile a questo: come si può vedere, è chiara, coerente, perfettamente allineata e contiene tutti i dati in modo facile da navigare:

Le opzioni nella parte superiore della tabella consentono agli utenti di esportare i contenuti della tabella in diversi formati. È inoltre possibile filtrare facilmente i risultati sul front-end del sito.

Quali altre tabelle si possono creare?

Le tabelle di WP Data Tables possono visualizzare un'ampia gamma di dati in diversi formati.

Ecco un esempio di tabella completamente funzionante, reattiva e modificabile con più colonne e opzioni.

Questa tabella è basata su MySQL con filtri per ordinare il contenuto in base alle esigenze dell'utente:

Questa tabella basata su array PHP è serializzata e include immagini: ciò aggiunge una dinamica e una funzionalità completamente diverse che molti negozi di e-commerce troverebbero particolarmente utili:

WP Data Tables consente anche l'uso di file basati su Excel, consentendo di utilizzare le numerose funzioni specifiche di cui è dotato:

Altre caratteristiche di wpDataTable degne di nota

• Procedura guidata wpDataChart - Permette di trasformare i dati in un grafico o in un diagramma in pochi semplici passi. Attualmente supporta 3 motori di rendering: Google Charts, Highcharts e Chart.js. Per ulteriori informazioni, consultare la documentazione qui.
• Formattazione condizionale - Permette di evidenziare celle, righe e colonne in base al loro contenuto. È utile soprattutto se la tabella è completamente numerica. Trovate ulteriore documentazione qui.
• Colonne della formula - Consente di aggiungere una colonna che può essere utilizzata per calcolare una cifra in base ai numeri indicati in altre celle. Per ulteriori informazioni, consultare la documentazione qui.
• Colonne Datetime - Utilizzato per le celle che contengono sia date che orari. Verranno visualizzate automaticamente nel formato impostato nella pagina delle impostazioni. Trovate ulteriore documentazione qui.
• Riga Somma/Totali - Utilizzato per le colonne numeriche, consente di calcolare la somma di tutti i valori. Trovate ulteriore documentazione qui.
• Creatore di rapporti - È un componente aggiuntivo per wpDataTables. Report Builder crea istantaneamente documenti e fogli di calcolo riempiendo i vostri modelli con i dati reali del vostro sito WordPress. Trovate ulteriore documentazione qui.
• Tabelle Master-Detail - È un componente aggiuntivo per wpDataTables che consente a voi e ai visitatori del vostro sito di vedere i dettagli di ogni riga con un semplice clic. Trovate ulteriore documentazione qui.

Riflessioni finali

Le tabelle sono un ottimo modo per visualizzare i dati e, se si aggiungono funzioni dinamiche come i filtri, si migliora notevolmente la situazione per i visitatori del sito.

Vi ho spiegato come creare una tabella dinamica in WordPress caricando i dati da Microsoft Excel (o utilizzando qualsiasi altro strumento di foglio di calcolo), ma è possibile fare molto di più.

È anche possibile trasformare le tabelle in grafici o diagrammi e altro ancora.

Ora è il momento di iniziare a preparare il vostro tavolo - buon divertimento!

Lettura correlata: 5 Plugin per tabelle potenti e reattivi ai dispositivi mobili per WordPress.

Divulgazione: Questo post è sponsorizzato, ma le nostre opinioni sono personali.