Come creare tabelle responsive su WordPress
Pubblicato: 2023-02-12Le tabelle sono un elemento di design del sito Web che può aiutarti a visualizzare in modo elegante grandi quantità di informazioni in modo organizzato. Funzionano abbastanza bene sui display dei computer tradizionali, ma spesso possono creare un'esperienza indesiderata sui dispositivi mobili.
Fortunatamente, esistono diverse soluzioni praticabili per creare tabelle più reattive. L'utilizzo di queste pratiche di progettazione reattiva può migliorare l'esperienza utente (UX) del tuo sito. Ciò significa che i visitatori saranno in grado di visualizzare e accedere più facilmente ai dati nelle tue tabelle, indipendentemente dal tipo di dispositivo che stanno utilizzando.
In questo articolo, daremo un'occhiata a cosa significa rendere una tabella reattiva. Esamineremo quindi due modi per creare tabelle reattive in WordPress. Immergiamoci subito!
Cosa sono le tabelle reattive?
In genere, l'obiettivo di una tabella è visualizzare molti dati in modo sensato. Quando provi a visualizzare un tavolo su un dispositivo mobile, tuttavia, le cose possono andare storte. Ciò accade perché le righe della tabella sono spesso molte colonne più larghe di quanto il display dello schermo possa gestire.
Quando crei una tabella reattiva, stai essenzialmente creando un insieme di regole per la tua tabella di dati originale. Queste regole possono determinare i punti di interruzione in base alle dimensioni del display. Ciò significa che se un utente accede alla tabella su un dispositivo più piccolo del punto di interruzione impostato, il layout della tabella risponderà riformattando per adattarsi alle dimensioni dello schermo.
Le tabelle reattive in genere possono essere riformattate aggiungendo una barra di scorrimento o impilando le informazioni. Non vuoi semplicemente restringere e stipare le informazioni nelle celle mentre le dimensioni dello schermo cambiano, poiché ciò può rendere illeggibile la tabella. Fortunatamente, il responsive design non è troppo difficile da realizzare.
Come creare una tabella reattiva (senza plug-in)
Esistono essenzialmente due approcci per rendere reattiva una tabella in WordPress. Innanzitutto, daremo un'occhiata a come portare a termine il lavoro senza un plug-in.
Ciò richiederà alcune conoscenze di codifica: in particolare, una comprensione dei Cascading Style Sheets (CSS). Ti consigliamo inoltre di lavorare in un ambiente di staging o di sviluppo piuttosto che sul tuo sito Web live, finché non progetti una tabella che funzioni in modo affidabile.
Passaggio 1: formatta la tua tabella per CSS reattivo
In questo esempio, diremo ai dati della nostra tabella di esempio di riformattare in corrispondenza di un punto di interruzione specifico. In alcuni casi puoi semplicemente aggiungere una barra di scorrimento a una tabella, ma in realtà raggrupperemo i dati della tabella in modo che appaiano in un formato più leggibile che elimini la necessità dello scorrimento orizzontale.
Questo è un ottimo approccio, poiché lo scorrimento orizzontale può spesso significare che stai visualizzando i dati di una colonna fuori contesto:
Per far funzionare meglio questa tabella, devi prima assicurarti di avere la tabella formattata correttamente. Se stai creando una tabella utilizzando l'editor a blocchi, puoi farlo normalmente e quindi aggiungere gli attributi <thead> e <tbody> per assicurarti che il tuo CSS funzioni correttamente:
Dopo aver aggiunto la tabella, puoi utilizzare l'editor HTML per modificarne la formattazione. Il tuo attributo <thead></thead> deve racchiudere tutte le intestazioni di colonna. Allo stesso modo, avvolgerai tutti i dati della tabella successiva nell'attributo <tbody></tbody>.
Una volta aggiunto il tag CSS nel passaggio successivo, i tuoi fogli di stile saranno in grado di capire cosa dovrebbe essere visualizzato come intestazione per ogni colonna nella tabella e qual è il corpo o il contenuto della cella.
Passaggio 2: aggiungi un tag personalizzato al tuo CSS
Successivamente, utilizzeremo uno snippet di codice CSS personalizzato e il tema WordPress Twenty Nineteen. Questo tema ha un design piuttosto reattivo come parte del suo codice nativo, ma le nostre modifiche CSS lo porteranno ancora oltre.
Poiché tutti i temi sono diversi, ti consigliamo di comprendere a fondo la struttura del tuo tema per implementare con successo un design di tabella reattivo. Alcuni temi potrebbero richiedere una libreria JavaScript aggiuntiva.
Per il nostro esempio, andremo su Aspetto > Personalizza > CSS aggiuntivo , dove possiamo aggiungere il seguente codice CSS personalizzato:
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
Dopo aver incollato il tuo codice nell'editor, dovrai selezionare Pubblica affinché le modifiche abbiano effetto.
Passaggio 3: verifica la reattività della tabella in WordPress
WordPress ha un'utile funzione di test dello schermo integrata che ti consente di testare i tuoi contenuti su tre diverse dimensioni dello schermo. Nella parte inferiore dello schermo in cui hai aggiunto il tuo CSS personalizzato, puoi fare clic sulle icone del tablet o del cellulare per testare il nuovo stile della tua tabella:
Per questo esempio, abbiamo già creato una semplice tabella che contiene tutti gli attributi HTML necessari per lavorare con il nostro CSS. Il nostro punto di interruzione nel CSS è impostato su 600px, ma può essere modificato in base alle proprie esigenze.
Invece di aggiungere una barra di scorrimento o schiacciare i dati della tabella, il CSS che abbiamo aggiunto riorganizza i dati in un formato ottimizzato per i dispositivi mobili. Ciò consente all'utente su un dispositivo mobile di scorrere verticalmente e visualizzare i dati della tabella nel contesto con il resto delle celle correlate.
Come creare una tabella reattiva con un plug-in
Se non ti senti a tuo agio nel personalizzare il codice o il CSS del tuo tema, c'è un'altra opzione. Sono disponibili numerosi plug-in di WordPress che possono aiutarti a creare un design di tabella reattivo per il tuo sito web.
Passaggio 1: scarica un plug-in
Per iniziare, dovrai scegliere un plug-in. Poiché ci sono alcune opzioni per la progettazione di tabelle reattive, ne evidenzieremo alcune per iniziare:
- Ninja Tables : etichettato come il plugin numero uno di WordPress per la creazione di tabelle reattive, viene fornito con oltre 100 stili di tabella tra cui scegliere.
- wpDataTables : questo è un plug-in gratuito con una versione premium, ma la versione lite è ricca di funzionalità per la creazione di tabelle e grafici ricchi e interattivi.
- WP Responsive Table : questo è un plug-in semplice e gratuito che semplifica la creazione di tabelle reattive che scorrono orizzontalmente su schermi di piccole dimensioni.
Per il resto di questo esempio, utilizzeremo Ninja Tables per dimostrare come creare una tabella di dati reattiva in WordPress.
Passaggio 2: inserisci i tuoi dati
Dopo aver installato e attivato il plug-in, sarai in grado di passare direttamente alla creazione di una tabella. Puoi accedere a NinjaTables > Tutte le tabelle > Aggiungi tabella :
Qui puoi aggiungere una nuova tabella da zero oppure puoi importare la tabella da un file. Creeremo una tabella da zero con l'opzione Aggiungi tabella . Dovrai quindi inserire un titolo e una descrizione per la tua tabella:
Avrai anche altre opzioni qui. Ad esempio, se stai configurando un negozio WooCommerce, sarai in grado di utilizzare tali informazioni per creare una tabella WooCommerce.
Dopo aver aggiunto le informazioni, fai clic su Aggiungi per creare la tabella. Dovrai quindi iniziare a inserire i dati. Puoi selezionare Aggiungi colonna per impostare la struttura della tua tabella:
Avrai alcuni campi da completare per creare la tua colonna. Ciò include il nome dell'intestazione della colonna e il tipo di dati che contiene. Sarai anche in grado di impostare il suo punto di interruzione reattivo:
Per scegliere tra una serie di opzioni che determinano come le tue tabelle risponderanno a diversi dispositivi, puoi accedere al menu facendo clic su Mostra sempre in tutti i dispositivi :
Dopo aver creato le tue colonne, seleziona Aggiungi dati e NinjaTables ti fornirà un semplice modulo per aggiungere rapidamente più voci nella tabella:
Puoi lasciare selezionata l'opzione Continua ad aggiungere se hai più voci da inserire. Al termine, puoi chiudere la finestra e tornare alla schermata di modifica della tabella.
Passaggio 3: formatta la tabella
Ora che hai una tabella con informazioni al suo interno, puoi esplorare le impostazioni e le opzioni di stile di NinjaTable. Dall'interno della finestra di modifica della tabella, puoi accedere a più impostazioni lungo le schede in alto e anche in basso a destra dello schermo:
Avrai molte opzioni per personalizzare lo stile e l'aspetto della tua tabella, tra cui alternare i colori delle righe della tabella, centrare il testo, nascondere i dati e altro ancora.
Passaggio 4: prova il tuo tavolo
NinjaTable semplifica il test della reattività della tua tabella mentre la modifichi. Nella scheda Table Design , troverai tre opzioni per testare la reattività dello schermo:
Puoi selezionare Desktop , Tablet o Mobile per visualizzare l'aspetto del tuo tavolo su questi tipi di dispositivi.
Ogni tabella che crei include anche uno shortcode. Inoltre, puoi aggiungere facilmente qualsiasi tabella al contenuto del tuo sito Web utilizzando il blocco NinjaTable che troverai nella sezione Formattazione del menu Editor blocchi.
Lascia che WP Engine ti aiuti a mantenere il tuo sito reattivo
Costruire un sito Web che utilizza un solido design reattivo non deve essere una sfida quando si ha accesso alle risorse giuste.
Qui a WP Engine, vogliamo che tu sia in grado di fornire la migliore esperienza digitale ai tuoi clienti. Dai un'occhiata ai nostri numerosi piani di hosting WordPress e soluzioni per sviluppatori per il tuo prossimo progetto!