Il nostro plug-in ha alcune funzionalit\u00e0 che puoi utilizzare, a seconda della fonte di dati che hai.<\/p>\n
Se devi creare una tabella da zero, ti consigliamo di creare una tabella manualmente<\/a>. Questo \u00e8 uno degli usi pi\u00f9 comuni di wpDataTables: creare tabelle, e riempirle con i dati presi dal pannello di amministrazione di WordPress, senza accedere o avere a disposizione alcuna fonte di dati preesistente (Excel, CSV, Google Spreadsheet, JSON, XML, DB MySQL, ecc.).<\/p>\n Se, tuttavia, desideri creare una tabella da una determinata origine dati, queste guide potrebbero aiutarti a iniziare con wpDataTables:<\/p>\n Ora andiamo avanti e diciamo che hai molte colonne sulla tabella statistica che vuoi presentare sul tuo sito web. Ovviamente, questo lo far\u00e0 sembrare un po’ affollato. L’unica soluzione che puoi utilizzare \u00e8 nascondere alcune colonne in modo che appaia bene sulla pagina.<\/p>\n Per questo, puoi utilizzare le tabelle Master-detail<\/a>, un componente aggiuntivo che ti consente di mostrare le colonne nascoste con un clic in modo da migliorare l’esperienza utente della tua pagina.<\/p>\n Nell’esempio che ti mostreremo, creeremo una tabella statistica dai dati che abbiamo in una tabella di un database MySQL. Controlleremo in anticipo la nostra tabella in phpMyAdmin e si presenta cos\u00ec:<\/p>\n Ora, in wpDataTables, utilizzeremo la seconda opzione della procedura guidata tabella (Crea una tabella di dati collegata a un’origine dati esistente) e sceglieremo "Query SQL" come origine dati.<\/p>\n Nell’editor SQL, inseriremo una query per mostrare tutte le colonne di questa tabella:<\/p>\n Quindi, faremo clic sul pulsante "Salva modifiche" e verr\u00e0 creata la tabella.<\/p>\n Hai istruzioni dettagliate su questo processo nei nostri documenti per la creazione di wpDataTables basati su MySQL<\/a>.<\/p>\n Come nota a margine, se non hai accesso al tuo database tramite phpMyAdmin o qualcosa di simile, o semplicemente non hai familiarit\u00e0 con la creazione di query, puoi utilizzare il costruttore di query WPDB integrato in wpDataTables.<\/p>\n Ha un’interfaccia utente grafica che ti consente di selezionare tabelle e colonne di cui hai bisogno e genera una query e un’anteprima. \u00c8 possibile modificare la query in base alle esigenze e creare un wpDataTable in base alla query modificata.<\/p>\n Puoi trovare nei nostri documenti istruzioni dettagliate su questo: Creare una tabella basata su query MySQL interrogando un database<\/a>.<\/p>\n Bene, andiamo avanti con le linee guida per la creazione di tabelle statistiche.<\/p>\n Ora dovremo eseguire alcune personalizzazioni della tabella come nascondere la colonna<\/a> wdt_ID, attivare l’ opzione di reattivit\u00e0<\/a> e impostare tutte le colonne in modo che siano nascoste su dispositivi mobili e tablet, ad eccezione della colonna Articolo e Profitto.<\/p>\n Per le colonne Entrate, Costo e Profitto, puoi utilizzare alcune personalizzazioni del colore delle celle con la formattazione condizionale<\/a>.<\/p>\n Per la colonna Entrate imposteremo due condizioni:<\/p>\n 1) se i valori della cella sono maggiori di zero, imposta il colore della cella su #0083c2<\/p>\n 2) se i valori della cella sono maggiori di zero, imposta la classe CSS della cella su testo bianco.<\/p>\n Quindi creeremo quelle classi nel campo "CSS personalizzato" nella scheda "Personalizza" nelle impostazioni della tabella come questa:<\/p>\n Dove il numero 1 in .wpDataTable-1 \u00e8 l’ID della tua tabella, quindi dovrai cambiarlo per la tua tabella.<\/p>\n Facciamo lo stesso per la colonna Costo, tranne per il fatto che imposteremo il colore nel valore della condizione su rosso (#D9534F)<\/p>\n E anche per la colonna Profitto, ad eccezione del fatto che imposteremo il valore della condizione del colore su verde (#5CB85C)<\/p>\n In tutte e tre le colonne (Fatturato, Costo e Profitto) il prefisso di cella che abbiamo \u00e8 impostato su valuta $ con l’opzione "Prefisso contenuto cella" nella scheda Visualizza nelle impostazioni delle colonne per ciascuna colonna.<\/p>\n Se desideri saperne di pi\u00f9, consulta i nostri documenti su valuta, percentuale e altre colonne<\/a>.<\/p>\n E questo \u00e8 tutto!<\/p>\n S\u00ec, \u00e8 cos\u00ec facile.<\/p>\n La tabella \u00e8 pronta per la pubblicazione sul tuo post o sulle tue pagine. Ora quello che devi fare \u00e8 che appaia sulle tue pagine nel front-end. Come con qualsiasi altro plugin, utilizziamo gli shortcode per mostrare le tabelle sulle pagine o sui post degli utenti.<\/p>\n L’aggiunta di shortcode<\/a> \u00e8 facile, soprattutto se stai utilizzando page builder popolari come Elementor, WP Bakery o Gutenberg.<\/p>\n A proposito, se hai bisogno di pi\u00f9 funzionalit\u00e0 per le tue tabelle statistiche, puoi consultare le seguenti guide che ti aiuteranno:<\/p>\n Puoi personalizzare facilmente le tue tabelle statistiche con wpDataTables.<\/p>\n Bene, ora quello che dobbiamo fare \u00e8 mostrare i dati che abbiamo come diagrammi.<\/p>\n Creeremo un grafico a torta. Per questo, useremo la libreria Highcharts<\/a>. Ci sono anche altre due opzioni, a seconda delle tue preferenze: Google Charts<\/a> e Chartjs<\/a>.<\/p>\n Dopo aver eseguito una semplice configurazione del grafico<\/a>, ti ritroverai con bellissimi grafici dai tuoi dati statistici.<\/p>\n Vedrai che quando lo fai, wpDataTables mostrer\u00e0 un elenco di possibili tipi di grafici, l’elenco a seconda del motore grafico che stai utilizzando.<\/p>\n Quando raggiungiamo il passaggio "Fonte dati", dobbiamo definire la tabella statistica che abbiamo gi\u00e0 creato da utilizzare come origine dati per questo grafico.<\/p>\n Ora che siamo nel passaggio "Intervallo di dati", dovremo fornire l’intervallo di dati per il grafico.<\/p>\n Per farlo, trascineremo semplicemente le colonne di cui abbiamo bisogno o useremo semplicemente i pulsanti freccia. Abbiamo scelto le colonne Articoli e Entrate. In questo passaggio, impostiamo anche l’ opzione di filtro Segui tabella<\/a> in modo da avere grafici dinamici dopo l’ordinamento e il filtro delle tabelle.<\/p>\n Una cosa da tenere presente \u00e8 che in wpDataCharts puoi utilizzare solo una colonna di tipo stringa (stringa, data, e-mail) mentre tutte le altre devono essere numeri interi o float.<\/p>\n Il passaggio successivo che dobbiamo compiere \u00e8 quello di "Formattazione e anteprima". Le modifiche apportate sono immediatamente visibili sul grafico visualizzato sul lato destro dello schermo.<\/p>\n Il passaggio di formattazione \u00e8 suddiviso in categorie che rappresentano diversi elementi del grafico.<\/p>\n Qui possiamo personalizzare i grafici di cui abbiamo bisogno. Possiamo impostare una larghezza reattiva, raggruppamento, diverse opzioni di personalizzazione per layout, descrizioni comandi, esportazione e altro. Al termine, fai clic sul pulsante "Salva grafico".<\/p>\n L’ultimo passaggio \u00e8 quello "Salva e ottieni shortcode" in cui il tuo grafico \u00e8 pronto. Tutto quello che devi fare \u00e8 copiare quello shortcode e inserirlo nella stessa pagina o post in cui hai inserito la tabella statistica.<\/p>\n Creeremo di nuovo un secondo grafico con la libreria Highchart. Questa volta, sceglieremo il tipo di grafico ad area in pila.<\/p>\n Nel passaggio "Fonte dati" definiamo una tabella delle statistiche come per un grafico a torta.<\/p>\n Nella fase "Intervallo di dati", sceglieremo le colonne Articoli, Entrate, Costo e Profitto.<\/p>\n \u00c8 attiva anche l’opzione "Filtro tabella di seguito".<\/p>\n Nel passaggio "Formattazione e anteprima" imposteremo opzioni come larghezza reattiva, Grafico di raggruppamento, Colori per serie, ma puoi impostarlo in modo diverso in base alle tue esigenze.<\/p>\n\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee4b505f.png\")
<\/a><\/p>\nSELECT * FROM statistics_table<\/code><\/pre>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee63b493.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee8a7204.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eebe26c5.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}<\/code><\/pre>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eed74f6c.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eefd0112.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef18e88f.png\")
<\/a><\/p>\n\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef36ae8f.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef51f1ea.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef6455b8.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef87fe1f.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efa64d74.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efcc29c4.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eff8c779.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f00ad5b0.png\")
<\/a><\/p>\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f02ca95c.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f0581e29.png\")
<\/a><\/p>\n