Come aggiungere tabelle dinamiche in WordPress senza alcun HTML

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

Suona familiare?

Così tanti fantastici temi WordPress hanno la possibilità di creare tabelle dall'aspetto fantastico. E certo, all'inizio possono sembrare buoni, ma non puoi farci molto.

Vuoi dati filtrabili? No.

Vuoi che il tavolo sia mobile responsive? No.

Vuoi importare dati da un CSV? Non una possibilità.

Ecco la buona notizia:

Con il plugin giusto puoi creare tabelle dinamiche altamente funzionali. Il genere di cose che ti consente di visualizzare dati filtrabili.

Insieme a grafici e tutti i tipi.

Suona bene? Diamo un'occhiata a come può essere fatto con wpDataTables.

Nota: Sebbene questo tutorial sia incentrato sulle tabelle interattive, potresti trovare utile il nostro tutorial sulla creazione di tabelle reattive mobili con wpDataTables. Clicca qui per controllare. Questo nuovo tutorial tiene conto dell'interfaccia utente aggiornata e delle funzionalità extra recentemente rilasciate in wpDataTables.

Questo plugin ti consente di creare bellissime tabelle senza alcuna conoscenza di HTML

wpDataTables è un plug-in WordPress premium che semplifica il processo di creazione e pubblicazione di tabelle sul tuo sito Web. È leggero, intuitivo e svolge il lavoro in pochi minuti, lasciandoti con meno codice da leggere e più tempo per bloggare.

Uno dei punti chiave di questo plugin è che non è necessaria alcuna conoscenza precedente di HTML per farlo funzionare. Tutto è fatto all'interno di una pagina delle impostazioni facile da usare. Per pubblicare è semplicemente un caso di copiare e incollare uno shortcode e sei a posto.

Per blogger e aziende, questa è un'ottima notizia perché consente di visualizzare molti dati in modo succinto e facile da assimilare.

Potresti anche usarlo per:

• Un catalogo prodotti
• Tabelle di confronto per i prodotti
• Listino prezzi
• Raccolta dati dagli utenti
• Risultati sportivi
• Monitorare i tuoi progressi per qualsiasi cosa che coinvolga numeri (ad esempio un rapporto sulle entrate del blog)

Le possibilità sono infinite.

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

Utilizzare il plug-in wpDataTables per creare tabelle belle, chiare e completamente funzionali sul tuo sito Web WordPress è semplice.

Ecco come iniziare:

Passaggio 1: prepara il file

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

Assicurati di visualizzare i tuoi dati in modo simile, altrimenti il ​​plugin avrà difficoltà a definire le colonne nella tua tabella.

Passaggio 2: crea una nuova tabella

Passa a wpDataTables sul lato sinistro della dashboard di WordPress.

Facendo clic su questo collegamento si accede alla schermata sopra. Qui è dove creerai e aggiungerai la tua nuova tabella:

Dopo aver fatto clic sul pulsante "Aggiungi nuovo", vedrai questa schermata. Qui inizierai a impostare i parametri della tua tabella, in modo che funzioni e abbia l'aspetto che desideri:

Passaggio 3: definisci le caratteristiche del tuo tavolo

Nelle prime tre sezioni della pagina di configurazione della tabella, puoi eseguire le seguenti operazioni:

• Crea un titolo
• Seleziona se vuoi mostrare il titolo della tabella sulla pagina
• Seleziona un tipo di sorgente di input per la tua tabella

Queste sono le impostazioni di base della tabella.

Fai clic su "Carica file" e cerca il tuo documento. Le tabelle che puoi creare possono essere complicate quanto ne hai bisogno.

Come puoi vedere, ho assegnato 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ù in basso nella pagina, troverai ulteriori impostazioni per personalizzare la tua tabella:

Questi sono:

• Reattivo : consente al tuo tavolo di essere visualizzato in modo diverso su desktop, tablet e dispositivi mobili
• Scorribile – In grado di far scorrere la tabella orizzontalmente
• Nascondi la tabella fino al caricamento completo della pagina – Utile per caricare lentamente le pagine
• Filtraggio avanzato : per visualizzare un filtro sotto ogni colonna
• Filtro nel modulo : per un filtro all'interno del modulo stesso
• Strumenti tabella : per opzioni come copia, salva in Excel e salva in CSV incorporato nel modulo
• Abilita ordinamento : consente di ordinare le tabelle
• Limita layout tabella : limita la larghezza della tabella al 100% del contenitore principale
• Lunghezza display : definisce quante voci vengono visualizzate su una pagina

Facendo clic su "Anteprima" puoi visualizzare la tua tabella e modificare le impostazioni che ritieni necessarie per ottenere l'aspetto desiderato.

Una volta selezionate le opzioni che meglio si adattano al tipo di tavolo che si desidera visualizzare, è il momento di fare clic sul pulsante “salva”.

Se desideri personalizzare ulteriormente le tue colonne, dopo aver fatto clic su "salva", potrai scorrere ulteriormente la pagina per ulteriori opzioni. Le impostazioni predefinite vengono generate automaticamente, tuttavia con questo è possibile modificare il colore di ogni colonna, colonna e tipo di filtro (come data, ora e testo).

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

Passaggio 4: salva e copia lo shortcode

Dopo aver salvato la tabella, fai clic su "Chiudi" e verrai reindirizzato alla home page del plug-in. Ora dovresti vedere la tabella che hai creato, il titolo e il tipo della tabella, lo shortcode per l'inserimento nel tuo post o pagina e l'opzione per duplicarlo.

Voglio visualizzare questa tabella in una pagina, quindi dovrei copiare lo shortcode e quindi passare alla pagina che desidero modificare.

Passaggio 5: aggiungi shortcode al post o alla pagina

Per aggiungere la tua tabella a una pagina, è davvero semplice come incollare il tuo shortcode nell'editor di pagina. Seleziona in quale punto della pagina desideri visualizzare la tabella, incolla il codice e continua a creare i tuoi contenuti:

Passaggio 6: pubblicazione

Dopo aver premuto il pulsante di pubblicazione sulla tua Pagina, la tua tabella dovrebbe assomigliare a questa. Come puoi vedere, è chiaro, coerente, perfettamente allineato e contiene tutti i miei dati in modo facile da navigare:

Le opzioni nella parte superiore della tabella consentiranno agli utenti di esportare il contenuto della tabella in una varietà di formati. Puoi anche filtrare facilmente i risultati sul front-end del tuo sito.

Quali altre tabelle puoi creare?

Tuttavia, non sei solo limitato a semplici tabelle basate su CSV. Le tabelle dati WP possono visualizzare un'ampia gamma di dati in più formati.

Ecco un esempio di una 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: questo aggiunge una dinamica e una funzionalità completamente diverse che molti negozi di e-commerce troverebbero particolarmente utili:

Non sei nemmeno limitato ai soli file CSV. WP Data Tables consente anche l'uso di file basati su Excel, consentendo di utilizzare le numerose funzionalità specifiche che ne derivano:

Altre caratteristiche di wpDataTable degne di nota

• Procedura guidata wpDataChart : consente di trasformare i dati in un grafico o un grafico in pochi semplici passaggi. Attualmente supporta 3 motori di rendering: Google Charts, Highcharts e Chart.js. Trova più documentazione qui.
• Formattazione condizionale : consente di evidenziare celle, righe e colonne in base al contenuto. È utile soprattutto se la tabella è completamente numerica. Trova più documentazione qui.
• Colonne formula : consente di aggiungere una colonna che può essere utilizzata per calcolare una cifra in base ai numeri indicati in altre celle. Trova più documentazione qui.
• Colonne DateTime : utilizzate per le celle che contengono sia le date che le ore. Appariranno automaticamente nel formato che hai impostato nella pagina delle impostazioni. Trova più documentazione qui.
• Riga Somma/Totali – Utilizzata per colonne numeriche, consente di calcolare la somma di tutti i valori. Trova più documentazione qui.
• Generatore di report : è un componente aggiuntivo per wpDataTables. Report Builder crea istantaneamente documenti e fogli di calcolo riempiendo i tuoi modelli con dati effettivi dal tuo sito WordPress. Trova più documentazione qui.
• Master-Detail Tables – È un componente aggiuntivo per wpDataTables che consente a te e ai visitatori del tuo sito di vedere i dettagli per ogni riga con un semplice clic. Trova più documentazione qui.

Pensieri finali

Le tabelle sono un ottimo modo per visualizzare i dati. E quando aggiungi funzionalità dinamiche come il filtro, rendi le cose molto migliori per i visitatori del tuo sito web.

Ti ho spiegato come creare una tabella dinamica in WordPress caricando i dati da Microsoft Excel (o utilizzando qualsiasi altro strumento per fogli di calcolo). Ma c'è molto di più che è possibile.

Puoi persino trasformare qualsiasi tabella in grafici o grafici e altro ancora.

Ora è il momento di iniziare sulla tua tavola: divertiti!

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

Divulgazione: questo post è sponsorizzato ma le nostre opinioni sono le nostre.