TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare tabelle responsive in WordPress?

53

Il nuovo editor di Gutenberg ha un bellissimo blocco tabella per inserire tabelle sul tuo sito WordPress. La tabella avrà un bell’aspetto sul tuo sito, hai anche opzioni per fornire colori alternativi (strisce) alle righe e modificare le impostazioni per ridurre le colonne per adattarle alla modalità. Tuttavia, il problema più grande è che i tavoli non sono responsive sui dispositivi mobili. La larghezza del dispositivo mobile può contenere un massimo di tre o quattro colonne a seconda del contenuto della tabella. Quando hai più colonne, il browser troncherà la visualizzazione alla larghezza del contenitore. Porterà alla situazione in cui gli utenti non hanno modo di visualizzare il contenuto nascosto delle tue tabelle. Pertanto, il blocco tabella Gutenberg è inutile quando si desidera avere tabelle reattive sul proprio sito.

Esistono molti plugin gratuiti ea pagamento per la creazione di tabelle reattive sul sito WordPress. Il nostro plugin preferito è TablePress e spiegheremo come creare tabelle reattive in WordPress con il plugin TablePress.

Perché TablePress?

  • TablesPress è uno dei plugin più popolari per la creazione di tabelle in WordPress.
  • Lo sviluppatore offre un’interfaccia user-friendly e mantiene la tabella continuamente.
  • Puoi trovare una buona documentazione per l’utilizzo del plugin.
  • La cosa più importante è che il plugin è gratuito. Puoi anche scaricare le estensioni gratuitamente anche se lo sviluppatore richiede una donazione. Questo è in forte contrasto con molti sviluppatori avidi che rendono le funzionalità gratuite alla versione a pagamento quando il plug-in diventa popolare.

Installazione di TablePress e componenti aggiuntivi

Puoi installare e attivare il plug-in TablePress dalla dashboard di amministrazione di WordPress in modo simile a qualsiasi altro plug-in. Tuttavia, le tabelle TablePress predefinite non rispondono in modo simile alle tabelle Gutenberg. È necessario installare un’estensione per rendere le tabelle responsive.

  • Vai alla pagina dell’estensione reattiva di TablePress.
  • Scarica il file zip dell’estensione Responsive Tables
  • Come accennato, lo sviluppatore richiede $ 9 come donazione per questa estensione. Ti consigliamo vivamente di donare $ 9 se hai intenzione di utilizzare il plug-in come risorsa principale sul tuo sito.
  • Torna al pannello di amministrazione di WordPress e vai alla sezione "Plugin > Aggiungi nuovo".
  • Fare clic sul pulsante "Carica plug-in". Fai clic sul pulsante "Scegli file" e seleziona il file "tablepress-responsive-tables.zip" che hai scaricato in precedenza.
  • Infine, fai clic sul pulsante "Installa ora" per avviare l’installazione dell’estensione sul tuo sito.
  • Attivare l’estensione, dopo l’installazione riuscita.

Come creare tabelle responsive in WordPress?

Ricordati di installare e attivare il plug-in TablesPress prima di provare a installare l’estensione delle tabelle reattive.

Creazione di una tabella

TablePress offre diversi modi per creare una tabella; puoi fare riferimento alla funzione plug-in nel nostro articolo precedente su come creare una tabella con TablePress. Di seguito è riportato il riepilogo dei passaggi per la creazione di una tabella in TablePress:

  • Vai al menu "Strumenti > TablePress > Aggiungi nuovo" e inizia a creare una tabella e personalizza le opzioni.
  • In alternativa, vai alla scheda "Importa" e importa una tabella da un’origine dati esterna. Ad esempio, puoi semplicemente caricare i dati del tuo foglio Excel per creare una tabella.

Come creare tabelle responsive in WordPress?

Dopo aver creato la tabella, salva le modifiche e annota lo shortcode dell’ID tabella .

Inserimento dello shortcode della tabella

L’interfaccia dell’editor classico aveva un’icona TablePress che ti aiuta a scegliere la tabella nell’editor dei post. Tuttavia, non hai alcun blocco TablePress nell’editor Gutenberg. Pertanto, è necessario incorporare manualmente lo shortcode della tabella nel post o nella pagina utilizzando il blocco shortcode.

Le tabelle TablePress avranno lo shortcode dell’ID tabella nel formato tabella id=xxx / all’interno di parentesi quadre. Aggiungi un blocco shortcode e inserisci il tuo shortcode ID tabella come hai annotato prima.

Rendere i tavoli reattivi

TablePress offre tre modi diversi per creare tabelle reattive.

  • Scorrere
  • Flip
  • Crollo

Poiché utilizziamo il plug-in TablePress, discutiamo ogni opzione con una tabella di esempio.

Tabella di scorrimento reattiva

Questa è l’opzione migliore per rendere la tua tabella reattiva quando la tabella ha molte colonne. Aggiungerà semplicemente una barra di scorrimento orizzontale in modo che gli utenti possano scorrere e visualizzare il contenuto fuori dallo schermo. Ecco un esempio di come apparirà una tabella di scorrimento reattiva.

Tabella di compressione reattiva

La seconda opzione è avere una tabella di compressione reattiva. Come indica il nome, aggiungerà un’icona + sulle righe in modo che gli utenti possano toccare/fare clic per visualizzare maggiori dettagli. L’estensione del plugin sposterà il contenuto della tabella nascosta sotto l’icona mostra/nascondi. Questo è molto utile per mostrare alcune colonne importanti e nascondere i dati rimanenti sotto il pulsante +.

Flip Table reattivo

L’ultima opzione è capovolgi, simile alla trasposizione in Microsoft Excel. Questo convertirà la riga in colonne e le colonne in righe. Puoi usare il flip table, se si adatta al contenuto della tua tabella. Di seguito è riportato un esempio di flip table reattivo creato con il plug-in TablePress.

Nome Soggetto 1 Soggetto 2 Soggetto 3 Soggetto 4 Soggetto 5 Soggetto 6 Soggetto 7 Soggetto 8 Soggetto 9 Soggetto 10 Soggetto 11 Soggetto 12 Soggetto 13
John 50 60 70 45 68 98 78 54 21 23 43 76 87
Paolo 89 65 45 12 32 56 78 89 quattordici 56 98 56 45
David 98 84 65 89 12 45 98 65 32 12 45 43 75
Ralf 65 56 23 45 78 54 65 21 35 64 90 78 34
Krauss 15 56 48 98 65 45 78 23 56 45 87 56 98
Peter 45 89 98 51 65 65 67 43 23 76 45 34 87
Bing 67 54 89 76 90 56 76 80 98 56 98 76 54

Correlati: recensione del plug-in WordPress flipbook reattivo.

Abilitazione di Flip Responsive Table su dispositivi specifici

Normalmente, puoi utilizzare la tabella reattiva indirizzata agli utenti mobili. In questo caso, è sufficiente modificare lo shortcode della tabella per includere la modalità responsive. Per testare le tabelle, è necessario visualizzare le tabelle in un dispositivo mobile o utilizzare l’opzione di attivazione/disattivazione del dispositivo nella sezione degli strumenti per sviluppatori sui browser Chrome/Firefox/Edge. Se utilizzi Safari su Mac, abilita il menu di sviluppo per entrare in una modalità reattiva.

Tuttavia, quando si dispone di tabelle più grandi con molte colonne, potrebbe essere necessario disporre di tabelle reattive anche su desktop o tablet. L’estensione del plugin semplifica questo compito aggiungendo un punto di rottura per la tabella reattiva. Le modalità di scorrimento e compressione funzioneranno su tutti i dispositivi senza aggiungere alcun punto di interruzione. Per la modalità flip, cambia lo shortcode come di seguito per rendere la tabella reattiva su dispositivi diversi. (assicurati di racchiudere gli shortcode tra parentesi quadre [ ]).

  • id tabella=123 responisve= capovolgi responsive_breakpoint=desktop /
  • id tabella=123 responisve=capovolgi responsive_breakpoint=tablet /
  • id tabella=123 responisve= capovolgi responsive_breakpoint=mobile /
  • id tabella=123 responisve= capovolgi responsive_breakpoint=all /

Ecco le dimensioni esatte per i punti di interruzione:

  • Desktop: dispositivi con larghezza inferiore a 1200 px
  • Tablet: dispositivi con larghezza inferiore a 980 px
  • Telefono: dispositivi con larghezza inferiore a 768 px
  • Tutto: aggiungi reattività su tutti i dispositivi indipendentemente dalle dimensioni del dispositivo.

Attenzione alla velocità della pagina

Come puoi vedere, è facile inserire diversi tipi di tabelle responsive su tutti i dispositivi. Il problema che abbiamo notato con l’estensione è che aggiungerà file CSS aggiuntivi per la modalità capovolgimento. La maggior parte dei plug-in di memorizzazione nella cache esclude questo foglio di stile senza combinarlo con altri file CSS, creando così un avviso su Google PageSpeed ​​Insights. Inoltre, il plugin caricherà anche gli stili e gli script su tutte le pagine del tuo sito indipendentemente dal fatto che la pagina abbia o meno una tabella. Se hai solo poche tabelle, non ti consigliamo di utilizzare il plug-in TablePress per migliorare la velocità della tua pagina.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More