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

Tutorial sul plugin TablePress per gli utenti di WordPress

155

Nel nostro precedente articolo abbiamo visto come aggiungere tabelle nel sito WordPress utilizzando diversi metodi. L’editor di blocchi di Gutenberg ha un blocco di tabelle integrato che rende obsoleto l’uso del plug-in di aggiunta. Tuttavia, TablePress è uno dei plug-in che consente agli utenti di aggiungere facilmente tabelle attraenti sul sito WordPress. In questo articolo esploriamo le funzionalità e come utilizzare il plug-in TablePress.

Impara WordPress: dai un’occhiata a oltre 400 tutorial gratuiti su WordPress.

Perché il plugin TablePress?

Vai all’opzione "Plugin > Aggiungi nuovo" nella dashboard di amministrazione di WordPress e cerca la parola chiave "Tabella". Troverai migliaia di plugin per creare diversi tipi di tabelle e la ricerca di "tablepress" mostrerà il plugin TablePress sulla prima pagina.

Tutorial sul plugin TablePress per gli utenti di WordPress

Plugin WordPress TablePress

  • È un plugin gratuito completo dell’autore Tobias Bäthge. Sebbene le estensioni siano offerte come plug-in premium separati, non ci sono banner o link invadenti che richiedono l’aggiornamento dalla dashboard.
  • Oltre 800K di installazioni attive con valutazione a 5 stelle da quasi utenti 4K non possono essere un giudizio sbagliato.
  • Documentazione decente e ottimo supporto sul forum.
  • Crea tabelle dall’aspetto uniforme attraverso il sito e personalizza anche l’aspetto di qualsiasi tabella particolare utilizzando CSS personalizzati.

Caratteristiche del plugin TablePress

Il plugin ha le seguenti funzionalità sufficienti per creare tabelle per la maggior parte degli scopi generali:

  • Le tabelle possono essere create e incorporate in qualsiasi pagina del tuo sito come shortcode.
  • Importa tabelle da Microsoft Excel nei formati XLS, XLSX e CSV. È anche possibile l’importazione tramite copia incolla manuale e dal formato JSON/HTML.
  • Le tabelle possono essere esportate nei formati CSV, JSON e HTML.
  • Inserimento diretto dello shortcode della tabella sull’editor visuale.
  • Le singole tabelle possono essere personalizzate con CSS personalizzati.
  • È possibile creare facilmente tabelle di dati complesse con casella di ricerca, impaginazione e filtraggio.

Come usare il plugin TablePress?

Installa e attiva il plugin per vedere un menu di amministrazione creato come mostrato di seguito:

Tutorial sul plugin TablePress per gli utenti di WordPress

Opzioni del menu del plugin TablePress

La posizione del menu TablePress può essere modificata nella sezione "Opzioni plug-in".

Il plugin ha le seguenti sezioni:

  • Tutte le tabelle: mostra l’elenco di tutte le tabelle create.
  • Aggiungi nuovo: consente di creare una nuova tabella.
  • Importa: offre varie opzioni per l’importazione di tabelle singole e multiple.
  • Esporta: offre varie opzioni per l’esportazione di tabelle singole e multiple.
  • Opzione plugin: le singole tabelle possono essere personalizzate con CSS in questa sezione.
  • Informazioni su: mostra i dettagli sul plug-in e altri dettagli.

Tutorial sul plugin TablePress per gli utenti di WordPress

Opzioni plugin WordPress TablePress

Creazione di una tabella in TablePress

Passa alla scheda "Aggiungi nuovo" dove puoi inserire i dettagli di base come il nome della tabella, una breve descrizione e scegliere il numero di colonne e righe per creare una tabella.

Tutorial sul plugin TablePress per gli utenti di WordPress

Aggiungi nuova tabella in TablePress

La schermata successiva ti mostrerà molte opzioni in più sezioni. Puoi facilmente acquisire familiarità con queste opzioni creando una o due tabelle di esempio.

Offerta SEO: ottimizza il tuo sito con la speciale prova gratuita di 14 giorni di Semrush Pro.

Sezione informazioni sulla tabella

Qui puoi visualizzare i dettagli di base che hai inserito nella schermata di creazione insieme allo shortcode per il tuo tavolo.

Tutorial sul plugin TablePress per gli utenti di WordPress

Sezione informazioni sulla tabella

Contenuto della tabella

Qui è dove devi inserire il contenuto effettivo della tua tabella in righe e colonne; la prima riga è considerata per impostazione predefinita come un’intestazione di tabella che è possibile modificare nella sezione "Opzioni tabella".

Tutorial sul plugin TablePress per gli utenti di WordPress

Sezione del contenuto della tabella

Manipolazione della tabella

Questa sezione offre le seguenti funzionalità:

  • Aggiungi righe e colonne alla tua tabella.
  • Nascondi, mostra, elimina, duplica e inserisci righe e colonne.

Tutorial sul plugin TablePress per gli utenti di WordPress

Sezione manipolazione tabella

  • Fai clic sul pulsante "Inserisci collegamento" e scegli la cella della tabella per aprire il popup predefinito di inserimento del collegamento di WordPress. Puoi anche aggiungere direttamente collegamenti utilizzando i tag di ancoraggio HTML.
  • Simile ai collegamenti, fai clic su "Inserisci immagine" e fai clic sulla cella per inserire immagini dalla libreria multimediale di WordPress. Puoi anche aggiungere direttamente immagini usando il tag HTML img.
  • L’editor avanzato consente di aggiungere contenuti formattati utilizzando un semplice editor.

Tutorial sul plugin TablePress per gli utenti di WordPress

Editor avanzato di TablePress

  • Usa le opzioni rowspan e colspan per combinare la cella su una riga e colonne.

Gli attributi Rowspan e Colspan non possono essere utilizzati su tabelle dati avanzate utilizzando la libreria JavaScript per l’ordinamento.

Opzioni tabella

Qui puoi definire l’intestazione, il piè di pagina, i diversi colori per le righe alternate e evidenziare la riga al passaggio del mouse. Puoi anche visualizzare il nome e la descrizione della tabella sopra o sotto la tabella.

Tutorial sul plugin TablePress per gli utenti di WordPress

Opzioni tavolo TablePress

Aggiungi classi CSS extra per personalizzare l’aspetto della tabella, devi utilizzare queste classi CSS a livello di tema e definire gli stili.

Funzionalità della libreria JavaScript DataTables

Dopo aver abilitato la prima riga della tabella come intestazione nella sezione "Opzioni tabella", la tabella può essere convertita in una tabella dati abilitando le funzionalità in questa sezione.

Tutorial sul plugin TablePress per gli utenti di WordPress

Creazione di tabelle dati utilizzando TablePress

  • Ordinamento in base a qualsiasi colonna semplicemente facendo clic sulla colonna.
  • Ricerca / Filtraggio: consente di mostrare una casella di ricerca nell’angolo in alto a destra della tabella e gli utenti possono filtrare i risultati inserendo una parola chiave. Questa è una funzionalità molto utile soprattutto quando hai molte righe e il contenuto non è visibile a causa dell’impaginazione.
  • Impaginazione: consente all’impaginazione di mostrare solo righe particolari con collegamenti di impaginazione "precedente/successivo" nell’angolo in basso a destra della tabella. Puoi anche consentire all’utente di filtrare e visualizzare un determinato numero di righe.
  • Abilita lo scorrimento orizzontale se hai molte colonne nella tabella e aggiungi comandi personalizzati se sai come utilizzare le tabelle di dati avanzate.

Una volta completate le opzioni, visualizza l’anteprima della tabella e salva le modifiche. Puoi anche eliminare, copiare ed esportare la tabella dalla stessa schermata.

Inserimento di una tabella su un post o una pagina

Ogni tabella in TablePress avrà un ID univoco che può essere visualizzato nella sezione "Informazioni sulla tabella". Puoi usarlo come shortcode nell’editor Gutenberg o inserire il codice della tabella nell’editor classico usando l’icona TablePress.

Visualizzazione di tutte le tabelle

Tutte le tabelle create con TablePress sono visibili nel menu "TablePress > All Tables". Puoi eseguire azioni come copiare, esportare ed eliminare su singole tabelle e in blocco.

Tutorial sul plugin TablePress per gli utenti di WordPress

Opzioni nella scheda Tutte le tabelle

Importazione di tabelle

Sebbene la creazione di un tavolo sia facile sullo schermo, sarà un compito noioso per i tavoli di grandi dimensioni. In tali scenari, puoi creare tabelle utilizzando un foglio di calcolo Excel in formato XLS, XLSX o CSV e importarlo sul tuo sito WordPress nella scheda "Importa" del plug-in TablePress. Vai alla scheda "Importa" per vedere le seguenti opzioni:

Tutorial sul plugin TablePress per gli utenti di WordPress

Importa opzioni tabella in TablePress

  • L’origine dell’importazione può provenire da un file sul computer locale, da un URL, da un file su un server o da un input manuale.
  • In base alla fonte, carica il file dal tuo computer locale o fornisci i dettagli richiesti.
  • Scegli il formato del file, se stai utilizzando XLSX quindi scegli l’opzione "XLSX -" dal menu a discesa. Sebbene XLSX sia ancora un’opzione beta, funziona perfettamente come abbiamo testato.
  • Scegli se creare una nuova tabella o modificare o aggiungere una tabella esistente. Scegliendo le opzioni di sostituzione e aggiunta verrà visualizzato un elenco a discesa di tutte le tabelle esistenti da cui è possibile selezionare una tabella.
  • Fare clic sul pulsante "Importa" per avviare l’importazione della tabella.

Il plugin consente di importare più tabelle come file zip. Ad esempio, se hai cinque tabelle di fogli di calcolo XLSX, metti tutti i file in un’unica cartella e comprimili in un formato zip. Basta caricare il file zip per creare cinque tabelle.

Esportazione di tabelle

Analogamente all’importazione, tutte le tabelle esistenti possono essere esportate in formato CSV, JSON o HTML sul computer locale. Inoltre il plugin consente di selezionare più tabelle ed esportarle come file zip.

Tutorial sul plugin TablePress per gli utenti di WordPress

Esportare tabelle in TablePress

I formati CSV e HTML esportano solo il contenuto della tabella e il formato JSON include anche le opzioni della tabella.

Personalizzazione delle tabelle in TablePress

Fino ad ora ciò che abbiamo visto sono le opzioni predefinite e nella scheda "Opzioni plug-in" puoi inserire CSS personalizzati per controllare tutte le tabelle in modo uniforme o controllare la visualizzazione di singole tabelle.

Tutorial sul plugin TablePress per gli utenti di WordPress

Aggiunta di CSS personalizzati in TablePress

Di seguito i selettori per definire il tuo stile:

  • .tablepress – tutte le tabelle TablePress dovrebbero avere questa classe.
  • .tablepress-id: utilizzato per definire lo stile di una tabella specifica.
  • .column-id – usato per definire lo stile della colonna di una tabella.
  • .row-id – usato per definire lo stile della riga di una tabella.

Di seguito è riportata una tabella di esempio creata con TablePress, supponiamo che l’id sia 3 e alcuni degli stili di personalizzazione sono forniti in base a questo esempio:

Sotto il codice CSS deve essere aggiunto nell’area di testo in "Opzioni plug-in> CSS personalizzato" e assicurati di selezionare l’opzione "Carica questi comandi "CSS personalizzato" per influenzare lo stile della tabella".

Modifica la larghezza della seconda colonna in 200 px:

.tablepress-id-3 .column-2 { width: 200px; }

Cambia il colore di sfondo della riga 2 in rosso:

.tablepress-id-3 .row-2 td { Background-color: red; }

Cambia il colore delle righe alternative:

.tablepress-id-3 .odd td { background-color: red; } .tablepress-id-3 .even td { background-color: blue; }

Cambia il colore della riga al passaggio del mouse:

.tablepress-id-3 .row-hover tr:hover td { background-color lightgrey; }

Problemi generali

Ci sono alcuni problemi di base che abbiamo notato durante l’utilizzo di TablePress:

  • Reattività delle tabelle sui dispositivi mobili che può essere risolta installando l’estensione del plug-in.
  • Inserimento di tabelle a piè di pagina o barra laterale del sito: questo può essere risolto utilizzando i tag modello con "$ query" come stringa o array. Ad esempio, di seguito è riportato un esempio per ottenere i dati della tabella per la tabella id=1:
<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false) ); ?>

Se riscontri altri problemi specifici sul tuo sito, fai riferimento al forum per vedere se è stato risolto e controlla la documentazione prima di sollevare la richiesta di supporto. Abbiamo notato che la maggior parte dei problemi è stata affrontata in uno di questi luoghi.

Nota: l’ inserimento di tag HTML nelle celle della tabella non è supportato, sebbene sia possibile utilizzare tag immagine, tag collegamento, utilizzare editor avanzato ed estensione per l’aggiunta di collegamenti.

Estensioni TablePress

Sebbene le esigenze di base possano essere soddisfatte con la versione gratuita del plug-in, è possibile scaricare estensioni aggiuntive dalla pagina delle estensioni di TablePress per migliorare le funzionalità delle tabelle. Sempre come contributo alla community l’autore offre gratuitamente tutte le estensioni e ne nomina alcune come premium con una richiesta di donazione. Tra tutte le estensioni, abbiamo scoperto che " Responsive Tables " è quella di cui potresti aver bisogno per rendere la tabella visualizzabile sui dispositivi mobili. Ogni estensione può essere scaricata e installata caricando il file zip tramite la dashboard di amministrazione di WordPress in "Plugin> Aggiungi nuovo> Carica plug-in". Puoi anche utilizzare FTP per caricare la cartella del plug-in estratta in "/wp-content/plugins/".

Di seguito è riportata una tabella di esempio creata con lo stile flip utilizzando l’estensione delle tabelle reattive.

Tutorial sul plugin TablePress per gli utenti di WordPress

Flip Table reattivo

TablePress SEO

L’aspetto più importante della creazione di tabelle con il plug-in TablePress è il SEO: le tabelle sono più adatte ai motori di ricerca, specialmente su Google. Di seguito è riportato un esempio di un risultato di ricerca di Google che mostra il contenuto della tabella in modo più accattivante con il numero totale di elementi:

Tutorial sul plugin TablePress per gli utenti di WordPress

Tabella TablePress nei risultati di ricerca di Google

Google mostra il risultato con la tabella se la tua pagina riceve abbastanza traffico per le parole chiave all’interno del contenuto della tabella. Sebbene la meta descrizione della pagina non venga visualizzata, abbiamo notato che la vista tabella attira più utenti del semplice testo.

TablePress è il plugin gratuito di WordPress per creare tabelle per il tuo sito. Puoi inserire le tabelle ovunque sul sito utilizzando lo shortcode. È possibile rendere le tabelle responsive con componenti aggiuntivi.

Professionisti

  • Aggiornamenti gratuiti e regolari
  • Interfaccia utente semplice
  • Tabelle dati avanzate
  • Reattivo sui cellulari

Contro

  • Il caricamento della tabella richiede molte risorse
  • Nessuna ottimizzazione delle prestazioni per caricare CSS/JS solo su pagine con tabelle
  • Nessun modello

Fonte di registrazione: www.webnots.com

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