Quante volte hai creato una tabella su WordPress e hai scoperto che da smartphone si visualizza male?
Quello che a prima vista può sembrare una semplice imprecisione estetica è in realtà un grave errore per i seguenti motivi:
- aumenta inutilmente il valore CLS del tuo sito;
- offre una spiacevole esperienza utente;
- vanifica parte del lavoro che hai fatto su quell’articolo (a chi serve una tabella tagliata?!);
Ecco un esempio di una tabella WordPress non responsive:
Come puoi rimediare a questo? Semplice, basta intervenire in WordPress e aggiungere una sorta di regola: ogni tabella dovrà ridimensionarsi a seconda del dispositivo su cui viene visualizzata.
Per raggiungere questo obbiettivo puoi seguire due strade differenti: aggiungere del codice CSS aggiuntivo o affidarti ad un plugin. Noi ti consigliamo di intraprendere la prima strada, in quanto si tratta di un’operazione davvero semplice e alla portata di tutti.
Come rendere responsive una tabella WordPress senza plugin
Se hai un sito di recensioni o dove spesso paragoni e confronti prodotti, ricorrerai spesso alle tabelle. Ecco come renderle responsive, perfette per la visualizzazione da Desktop e da smartphone.
Per creare tabelle responsive WordPress, affinché si adattino agli schermi di smartphone, computer e tablet, dovrai accedere al wp-admin del tuo sito e recarti in Aspetto > CSS aggiuntivo.
Si aprirà un’area di testo sulla sinistra. Scorri fino al fondo e incolla il seguente codice all’interno di questa sezione:
@media only screen and (max-width: 782px) {
table { margin-bottom: 0; overflow: hidden; overflow-x: scroll; display: block; white-space: nowrap; }
}
Al termine, premi su Pubblica (in alto) per confermare e salvare la modifica.
Ecco fatto. Ora tutte le tabelle presenti sul tuo sito (e quelle future) risulteranno responsive. Cosa significa questo? Che da computer la tabella si vedrà in dimensioni standard, mentre da smartphone presenterà una barra di scorrimento.
Plugin per rendere responsive una tabella WordPress
Se il tuo intento è rendere responsive le tabelle ma non ne vuoi proprio sapere di intervenire nel codice CSS aggiuntivo di WordPress, puoi ricorrere a qualche plugin specifico. Attualmente, i migliori gratuiti in questo campo sono:
Clicca sui link qui sopra per vedere le specifiche di ogni plugin e, una volta scelto quello che più ti piace, recati nel tuo wp-admin alla voce Plugin > Aggiungi nuovo.
Cerca ora il plugin per le tabelle che hai scelto digitando il nome nel campo di ricerca presente in alto a destra. Una volta trovato, procedi con l’installazione premendo su Installa Adesso e successivamente sul tasto Attiva che comparirà al termine dell’installazione.
Ora recati in Plugin > Plugin installati.
Si aprirà una lista di tutti i plugin che hai installato. Cerca quello che hai appena scaricato e premi su Impostazioni.
Entrerai nella pagina con tutte le configurazioni del plugin. Procedi personalizzando e gestendo i diversi aspetti della tabelle e premi su Salva al termine.
Ora dovresti aver reso responsive tutte le tabelle presenti nelle pagine del tuo sito.
In qualsiasi momento puoi disattivare o eliminare il plugin. Per procedere, vai in Plugin > Plugin installati e premi su Disattiva in corrispondenza del relativo plugin. Per eliminarlo, premi sulla dicitura Elimina che appare dopo averlo disattivato.
Ora conosci tutte le soluzioni per realizzare delle tabelle perfette, delle misure adatte per smartphone, tablet e computer. Facci sapere nei commenti se questa guida ti è stata utile o se stai riscontrando qualche problema.
