Come creare tabelle HTML avanzate in WordPress senza codifica

WordPress rimane la piattaforma CMS più popolare al mondo con una quota del 43% dell'intero web. Sebbene sia senza dubbio uno con le funzionalità più interessanti, WordPress non è necessariamente la migliore piattaforma quando si tratta di creare tabelle HTML senza codifica.

Sebbene molte persone pensino che le tabelle HTML siano obsolete, offrono comunque un valore eccellente per il pubblico. Di conseguenza, la maggior parte degli utenti ha dovuto assumere esperti per la particolare attività "solo per sviluppatori". Considerando lo scopo, all'epoca è stata una grande delusione per gli utenti di WordPress.

Gutenberg: l'editor predefinito di WordPress con un blocco tabella

Durante l'Europe WordCamp tenutosi a luglio 2017, il fondatore di WordPress Matt Mullenweg ha annunciato che l'editor di blocchi Gutenberg sarebbe stato il futuro editor di WordPress. Per la gioia di molti utenti di WordPress, il nuovissimo editor ha promesso di includere un blocco tabella integrato.

Tuttavia, quando Gutenberg è arrivato con WordPress 5.0, l'editor è stato criticato per aver causato problemi di reattività e ottimizzazione su diversi dispositivi. Tuttavia, l'editor è stato fornito con un blocco tabella integrato come promesso, consentendo agli utenti di creare tabelle sul proprio sito Web senza dover scrivere codice.

Sebbene il blocco di tabelle Gutenberg sia un'opzione piuttosto utile per la creazione di tabelle HTML su WordPress, era molto indietro rispetto a diventare una soluzione efficace per la creazione di tabelle. Non offrirà l'aspetto più attraente, non è riutilizzabile e non è bravo a gestire database di grandi dimensioni.

Gutenberg non è altro che un semplice costruttore di tavoli. Non è possibile utilizzare Gutenberg per funzionalità avanzate di tabelle HTML come l'ordinamento, il filtraggio o lo stile delle tabelle. Tutto sommato, l'editor di blocchi di Gutenberg è ben lungi dal diventare una sorta di generatore di tabelle avanzato.

Quindi, spettava agli sviluppatori WordPress free-roaming come noi, WPManageNinja, creare un plug-in che aggiungesse funzionalità di tabella avanzate alla dashboard.

Ninja Tables: plugin avanzato di WordPress per tabelle HTML

Anche prima dell'annuncio di Gutenberg, i nostri sviluppatori di WPManageNinja stavano lavorando incessantemente per creare un plugin per tabelle WordPress affidabile che consentisse agli utenti di creare tabelle senza problemi.

Il 27 febbraio 2018, abbiamo rilasciato le tabelle Ninja sul negozio di plugin di WordPress e ci sono voluti solo pochi mesi prima che Ninja Tabes raggiungesse oltre 30000 installazioni attive! L'incredibile supporto e apprezzamento dei nostri utenti ci ha anche motivato a rilasciare più di 45 aggiornamenti di plug-in in meno di 2,5 anni dalla prima versione, rendendo Ninja Tables il plug-in di tabelle WordPress numero uno in questo processo!

Grazie alle sue funzionalità dinamiche e all'interfaccia intuitiva, Ninja Tables è ora utilizzato da oltre 70.000 siti Web e aziende.

Ninja Tables è un plug-in di visualizzazione dei dati che ti consente di creare un'ampia gamma di tabelle da mostrare sul tuo sito web. La reattività, le funzionalità, la struttura di personalizzazione e le integrazioni di terze parti lo rendono la soluzione migliore quando si tratta di portare quelle tabelle HTML avanzate difficili da estrarre nel tuo sito WordPress.

Ora, esaminiamo le funzionalità di creazione e personalizzazione di tabelle HTML più avanzate di Ninja Tables.

• L'interfaccia utente
• Editor di tabelle
• Integrazioni

L'interfaccia utente

Dopo l'attivazione, Ninja Tables può essere individuato dalla barra laterale della dashboard di WordPress. Come la maggior parte dei plugin di WordPress, Ninja Table offre un'interfaccia utente con diverse funzionalità. Impariamo di più a riguardo!

• Tutte le schede
• Strumenti e impostazioni
• Aiuto e documentazione

Home/Tutte le tabelle

Ninja Tables Home ha un'interfaccia accattivante con nuove offerte. Ti fornisce due pulsanti, uno per creare e uno per importare.

Il pulsante Crea la tua prima tabella ti porta a un generatore di tabelle WordPress manuale, mentre puoi anche importare da CSV.

Se decidi di creare una tabella da zero, ti verrà chiesto di fornire un titolo e una descrizione in una finestra pop-up. Potresti anche notare molte altre schede, che offrono varie funzionalità di importazione e integrazione. Tuttavia, la versione gratuita di Ninja Tables ti consentirà solo di importare tramite CSV o JSON e integrarsi con WP Fluent Forms.

Dopo aver fornito un titolo e una descrizione , fare clic sul pulsante Aggiungi per accedere al generatore di tabelle. Se non ne hai bisogno, puoi saltare la casella della descrizione.

Anche la funzione di importazione funziona allo stesso modo. Ti consente di selezionare un file excel o qualsiasi altro file CSV che hai creato sul tuo computer da caricare sul tuo sito web.

In ogni caso, finirai nell'editor di tabelle. Nota che le tue tabelle create sono riutilizzabili e appariranno nella finestra principale. Le tabelle Ninja identificano le tabelle utilizzando codici brevi. Per utilizzare una tabella in un post o in una pagina del tuo sito web, devi solo copiare e incollare lo shortcode della tabella sulla tua pagina o post.

Strumenti e impostazioni

Oltre alla scheda Home , Ninja Table include anche una scheda Strumenti e Impostazioni che consente agli utenti di importare, modificare l' aspetto globale , impostare le autorizzazioni utente e modificare le impostazioni globali.

Lo strumento Importa è adatto se stavi già utilizzando qualsiasi altro popolare plug-in di tabelle e sei passato a Ninja Table. Ninja Table ha una funzione di importazione delle tabelle con un clic per TablePress, Ultimate Tables e Data Tables Generator di Supsystic. Puoi anche importare file CSV all'interno di questa scheda.

Successivamente, la scheda Aspetto globale ti consente di modificare gli stili di tabella. I tavoli Ninja possono improvvisare i tuoi tavoli utilizzando tre diversi stili dell'interfaccia utente del tavolo. Puoi anche personalizzare ogni stile in base alle tue preferenze e scegliere se consentire ai visitatori di cercare e filtrare le tue tabelle. Tuttavia, le regole di aspetto possono anche essere modificate per ciascuna tabella separatamente.

Sfortunatamente, non puoi impostare l' autorizzazione per diversi utenti back-end a meno che tu non abbia la versione pro di Ninja Tables. La scheda rimanente ti consente di selezionare come verranno gestiti gli errori Javascript e di cancellare la cache della tabella .

Aiuto e documentazione

L'ampia gamma di funzionalità di Ninja Tables richiede una documentazione affidabile e il nostro team ha preparato tutto ciò che devi sapere su Ninja Tables.

La nostra interfaccia di Guida e documentazione offre una guida per l'utente ben documentata per una comprensione approfondita di ciò che Ninja Tables può fare. E se hai ancora problemi, puoi sempre contattarci inviando un ticket di supporto!

Ora che hai imparato a conoscere l'interfaccia utente, vorrai sicuramente creare una tabella! Quindi torna alla Home e inizia a crearne uno!

L'editor di tabelle

L'editor di tabelle è una delle cose più eccitanti di Ninja Tables. Aumenta con alcune delle funzionalità di creazione di tabelle HTML più avanzate e la personalizzazione. Dopo aver fatto clic sul pulsante Aggiungi o Importa, verrai indirizzato all'editor di tabelle Ninja Tables a tutto tondo.

L'interfaccia utente del generatore di tabelle di Ninja Tables è composta dalle sezioni visualizzate sopra. Ogni sezione del generatore di tabelle ha molteplici funzionalità di personalizzazione per creare e progettare bellissime tabelle HTML per WordPress.

Puoi modificare il titolo e la descrizione della tabella e impostare una didascalia della tabella facendo clic sul pulsante Modifica in alto. Inoltre, l'interfaccia utente del generatore di tabelle Ninja Tables ti consente anche di visualizzare in anteprima il tuo tavolo quando vuoi.

• Righe della tabella
• Configurazione
• Design
• Modifica front-end
• CSS personalizzato
• Importa/esporta

Discutiamo le funzioni del generatore di tabelle una per una.

Righe della tabella

Table Rows è uno degli aspetti fondamentali di qualsiasi generatore di tabelle HTML su WordPress. Come si dice, puoi iniziare facendo clic sul pulsante Aggiungi colonna !

Il pulsante aprirà una finestra di creazione di colonne che garantisce alcune delle funzioni di tabella HTML più avanzate su WordPress. Ninja Tables non è solo un generatore di tabelle di base con funzionalità di creazione di colonne nella media; è molto di più.

Quindi, mentre puoi scrivere il titolo di una colonna, puoi anche impostare il tipo di dati e i punti di interruzione reattivi (il punto di interruzione reattivo ti consente di scegliere se mostrare una colonna su dispositivi specifici) .

Tuttavia, la versione gratuita limita il campo Seleziona, i caricamenti di immagini e file e non ti consente di creare pulsanti. Tuttavia, il plug-in si potenzia con alcune incredibili funzionalità di aggiunta di dati come campo HTML , valore numerico e campo data .

E se stai ancora cercando un maggiore controllo sulle colonne della tabella, puoi sbloccare Impostazioni avanzate , Impostazioni condizionali e Valore di trasformazione disponibili nelle altre schede di personalizzazione delle colonne. Consulta la documentazione di Ninja Tables per ulteriori informazioni su come funzionano.

Dopo aver aggiunto le colonne della tabella, nell'editor verrà visualizzato un pulsante Aggiungi dati . Ti consente di aggiungere dati al tuo sito Web senza sforzo. Puoi personalizzare le colonne separatamente facendo clic sull'icona a forma di ingranaggio accanto all'intestazione della colonna e modificare, duplicare o eliminare i dati in qualsiasi momento!

Infine, la sezione delle righe della tabella ti consentirà anche di eseguire azioni in blocco o impostare una visualizzazione compatta se la tabella è composta da molti dati.

Configurazione tabella

La scheda Configurazione tabella offre un'organizzazione delle colonne drag-and-drop. In genere, le tabelle HTML non possono essere organizzate su WordPress una volta create.

A questo proposito, Ninja Tables non limita l'organizzazione dei tavoli. Le righe della tabella possono essere organizzate trascinando e rilasciando, mentre puoi anche creare nuove colonne o modificare quelle esistenti.

La scheda successiva nella scheda di configurazione della tabella ti consente di scegliere Impostazioni di rendering , ovvero come desideri che le tue tabelle vengano visualizzate dai browser. Per impostazione predefinita, le tue tabelle verranno renderizzate con le impostazioni della tabella Ajax . Questa funzione ti consente di incorporare enormi database senza danneggiare la velocità del tuo sito web.

Sebbene ci siano due opzioni di rendering, non puoi selezionare le impostazioni avanzate della tabella a meno che tu non abbia la versione pro. La tabella avanzata può incorporare alcuni dei campi di tabella più avanzati, inclusi i margini delle celle e gli shortcode, ed è adatta per l'ottimizzazione SEO.

Filtri personalizzati è una funzione utile se desideri includere un pulsante di opzione, una casella di controllo, un selettore di data o varie altre interfacce utente specializzate nella tabella. Questi potrebbero fornire eccellenti funzionalità di ottimizzazione della conversione se stai visualizzando prodotti o aggiungendo più dati all'interno delle celle della tabella. Tuttavia, anche il filtro personalizzato è una caratteristica professionale.

La configurazione dei pulsanti consente di includere il pulsante di importazione Stampa o CSV (funzione Pro). Impostazioni lingua è utile se sei interessato a utilizzare una lingua diversa per la barra di ricerca della tabella, il segnaposto di ricerca o l'intestazione del menu a discesa di ricerca.

Disegno della tavola

Il Ninja Tables Table Design è un incredibile personalizzatore visivo. È dotato di tre librerie di stili con un massimo di nove funzioni di personalizzazione dello stile, offrendoti il ​​massimo controllo visivo sulle tabelle HTML su WordPress.

Oltre allo stile, puoi anche scegliere se mostrare il titolo della tabella, la descrizione, la barra di ricerca, il filtro delle colonne, la riga dell'intestazione, il bordo, ecc. Inoltre, puoi impostare i dispositivi di destinazione abilitando la Configurazione tabella impilabile in modo che non si rompano su qualsiasi dispositivo.

Lo stile gioca un ruolo significativo nell'appeal visivo di un tavolo. Tuttavia, il colore conta di più. Le tabelle Ninja offrono una personalizzazione completa del colore all'interno della scheda dei colori della tabella. Puoi personalizzare qualsiasi cosa, dal colore dell'intestazione della tabella ai bordi della tabella e non ci sono limiti ai colori consentiti.

E se non riesci a decidere sulla personalizzazione del colore, Ninja Table viene fornito con tredici combinazioni di colori predefinite per i tuoi tavoli! Tuttavia, questa incredibile funzionalità richiede una versione premium.

La restante scheda di progettazione della tabella presenta varie funzionalità di personalizzazione come l'impaginazione, la posizione della barra di ricerca, il metodo di ordinamento e puoi fornire una classe CSS aggiuntiva per la progettazione della tabella.

Modifica front-end

L'editing frontend è un altro motivo esemplare per cui Ninja Tables è più di un plug-in di tabelle. Ti consente di abilitare la modifica per il tuo utente front-end. Ad esempio, se hai bisogno che i tuoi utenti compilino i dati della tabella, puoi facilitare la modifica del frontend. Tuttavia, la funzione di modifica frontend è disponibile solo nella versione premium.

CSS/JS personalizzato

Il CSS personalizzato ti consente di controllare l'aspetto dell'HTML su WordPress e, nel caso del plugin, ti dà il controllo sulle tue tabelle. Sebbene l'articolo sia destinato ai non programmatori, conoscere CSS e Javascript può offrirti un controllo completo sull'aspetto di Ninja Tables.

Importa/Esporta

Anche in questo caso, la funzione Importa consente di importare un file CSV o sostituire una tabella esistente tramite CSV. D'altra parte, la funzione di esportazione ti consentirà di salvare la tabella su un file CSV.

Integrazioni

Ninja Tables incorpora tutti gli strumenti e le funzionalità essenziali per creare tabelle HTML su WordPress senza problemi. Ma i poteri non si limitano alla creazione di tavoli. È molto più di un semplice plug-in da tavolo e include diverse integrazioni incredibili. Tutti offrono strutture superbe!

• Integrazione di moduli fluidi
• Post WP
• WooCommerce
• Fogli Google
• Grafici Ninja

Integrazione di forme fluide

In qualità di proprietario di un sito Web, probabilmente utilizzi un plug-in di moduli sul tuo sito Web. E se volessi inserire le voci del modulo in una tabella? Ninja Tables utilizza le voci del modulo per creare e visualizzare una tabella senza che tu debba fare altro che impostare la tabella.

WP Fluent Forms è il miglior plug-in per moduli di contatto al mondo in questo momento e, se hai utilizzato il plug-in per raccogliere dati dal tuo pubblico, puoi inserirlo nelle tabelle di WordPress senza dover fare molto.

Integrazione di WP Posts

Ninja Tables non si limita a portare le voci del modulo di contatto sui tavoli. Può anche organizzare tutti i tuoi post, prodotti, pagine e molti altri in una tabella in pochi clic. Se stai cercando di classificare i tuoi post o prodotti, l'integrazione delle tabelle Ninja con WP Posts può ridurre notevolmente il tuo lavoro.

Integrazione WooCommerce

WooCommerce è il plugin per negozio WordPress più popolare. Tuttavia, un'enorme quantità di persone che utilizzano WooCommerce significa anche che molte di loro offrono la stessa esperienza utente. Ninja Tables con integrazione WooCommerce è un plug-in leggendario in grado di offrire diversità sul tuo sito ed efficacia sul tuo back-end. Aumenta i tassi di conversione consentendo la gestione del negozio WooCommerce più semplice! Ninja Tables è proprio ciò di cui hai bisogno per gestire il tuo negozio WooCommerce.

Integrazione con Fogli Google

È incredibile quello che Ninja Tables ha nascosto sotto le sue maniche! È quello che stai pensando, giusto?

Forse, Fogli Google è tra le migliori opzioni di integrazione che qualsiasi plugin di WordPress può offrire. Google Sheet è il foglio di lavoro online più popolare con le funzionalità più semplici. L'app Web ha funzionalità assolutamente di livello mondiale e, soprattutto, è accessibile da qualsiasi dispositivo!

Ninja Tables può connettersi con qualsiasi foglio di Google e visualizzare i suoi dati sul tuo sito Web mentre il foglio si aggiorna. Quindi, se hai bisogno di aggiornare le tue tabelle in movimento, l'integrazione dei fogli di google di Ninja Tables è un'assoluta masterclass!

Integrazione di grafici Ninja

Le tabelle funzionano con i dati. Dipendiamo dalle tabelle di WordPress perché ci mostrano dati statistici. Tuttavia, a volte abbiamo bisogno di essere un po' creativi e scoprire modi grafici per mostrarli. L'integrazione di Ninja Charts è la soluzione perfetta per produrre una presentazione visiva dei dati delle tabelle. Vuoi vedere cosa puoi farci? Guarda il video!

Avvolgendo

Con Ninja Tables, le difficoltà di creare tabelle HTML avanzate su WordPress finiscono finalmente! È la soluzione completa per tutti gli utenti di WordPress che hanno bisogno di mostrare bellissime tabelle di dati mentre abbandonano i codici HTML.

Quindi crea tabelle, aumenta il coinvolgimento, migliora la conversione e fai di più della semplice creazione di tabelle usando Ninja Tables.

È tutto per oggi. Vi auguro tutto il meglio.

Coautore: Nusrat Fariha

Nusrat è uno scrittore di contenuti creativi presso WPManageNinja che ama lavorare su diversi argomenti. E quando non scrive, probabilmente legge i suoi libri preferiti!