TablePress: Shortcode, Blocchi Gutenberg e Elementor
Uno degli aspetti più apprezzati di TablePress è la sua flessibilità nell’integrarsi con qualsiasi editor e page builder di WordPress. Che tu stia usando l’editor classico, Gutenberg, Elementor o qualsiasi altro builder, TablePress offre metodi semplici e affidabili per inserire le tabelle nei tuoi contenuti. In questa guida esploreremo in profondità ogni metodo di integrazione, con trucchi e best practice per ottenere il massimo da ciascuno.
Gli Shortcode di TablePress: Il Metodo Universale
Gli shortcode sono il metodo originale e più universale per inserire tabelle TablePress nei contenuti WordPress. Ogni tabella creata con TablePress ha uno shortcode univoco nel formato [table id=N /], dove N è il numero identificativo della tabella. Questo shortcode può essere inserito in qualsiasi contesto WordPress che supporti gli shortcode: articoli, pagine, widget di testo, custom post type e persino nei template PHP.
Lo shortcode base è sufficiente nella maggior parte dei casi, ma TablePress offre anche parametri aggiuntivi che ti permettono di personalizzare il comportamento della tabella senza modificarne le impostazioni originali. Ecco i parametri più utili:
[table id=1 /]— Inserisce la tabella con ID 1 con le impostazioni predefinite[table id=1 responsive=scroll /]— Abilita lo scroll orizzontale responsive[table id=1 datatables_paging=false /]— Disabilita la paginazione solo in questo contesto[table id=1 datatables_sort=false /]— Disabilita l’ordinamento solo qui
Questi parametri sono particolarmente utili quando la stessa tabella viene utilizzata in contesti diversi con esigenze diverse. Ad esempio, nella pagina principale potresti voler mostrare la tabella completa con tutte le funzionalità, mentre in un widget della sidebar potresti disabilitare paginazione e filtro per risparmiare spazio.
Shortcode Multipli nella Stessa Pagina
Puoi inserire più shortcode di tabelle diverse nella stessa pagina senza alcun problema. TablePress gestisce correttamente il caricamento delle risorse JavaScript e CSS anche quando ci sono più tabelle. Ogni tabella mantiene il proprio ID e le proprie impostazioni indipendentemente dalle altre.
Tuttavia, se inserisci molte tabelle nella stessa pagina (più di 5-6), le performance possono risentirne, soprattutto se tutte hanno DataTables attivo. In questi casi, considera di disabilitare DataTables per le tabelle più semplici o di utilizzare la paginazione per ridurre il numero di righe renderizzate simultaneamente.
Un altro aspetto da considerare è che tutte le tabelle condividono gli stessi stili CSS globali di TablePress. Se hai bisogno di stili diversi per tabelle diverse nella stessa pagina, utilizza i selettori specifici basati sull’ID della tabella (ad esempio .tablepress-id-3) per applicare stili mirati.
Integrazione con l’Editor a Blocchi Gutenberg
Dal momento che WordPress 5.0 ha introdotto l’editor a blocchi Gutenberg, TablePress ha sviluppato un blocco dedicato che rende l’inserimento delle tabelle ancora più semplice e intuitivo. Per utilizzarlo, apri l’editor a blocchi e fai clic sull’icona “+” per aggiungere un nuovo blocco.
Cerca “TablePress” nella barra di ricerca dei blocchi e seleziona il blocco “TablePress table”. Si aprirà un pannello di configurazione dove puoi selezionare la tabella da un menu a tendina che mostra tutte le tabelle disponibili, ordinate per nome o per ID. Seleziona la tabella desiderata e il blocco verrà configurato automaticamente.
Il vantaggio principale del blocco Gutenberg rispetto allo shortcode manuale è la selezione visuale: non devi ricordare gli ID delle tabelle, puoi semplicemente scegliere dal menu. Inoltre, il blocco mostra un’anteprima del nome e della descrizione della tabella direttamente nell’editor, facilitando l’identificazione della tabella corretta.
Nella barra laterale del blocco puoi configurare opzioni aggiuntive, come i parametri dello shortcode menzionati in precedenza. Questo ti offre lo stesso livello di controllo dello shortcode manuale, con un’interfaccia più user-friendly.
Blocco Gutenberg: Funzionalità Avanzate
Il blocco TablePress per Gutenberg supporta anche le trasformazioni di blocco. Se hai un blocco di testo contenente uno shortcode TablePress, puoi trasformarlo in un blocco TablePress nativo e viceversa. Questa funzionalità è utile se stai migrando contenuti dall’editor classico a Gutenberg.
Il blocco rispetta le impostazioni di spaziatura e allineamento di Gutenberg. Puoi configurare margini superiore e inferiore, allineamento (sinistro, centrato, largo, piena larghezza) e altre opzioni di layout offerte dal tema. Questo garantisce che la tabella si integri perfettamente nel flusso del contenuto.
Per utenti avanzati, il blocco supporta anche l’HTML personalizzato. Facendo clic su “Modifica come HTML” nel menu del blocco, puoi accedere direttamente allo shortcode sottostante e modificare i parametri manualmente. Questo è utile per parametri avanzati che non sono esposti nell’interfaccia grafica del blocco.
Integrazione con Elementor
Elementor è il page builder più popolare per WordPress, e TablePress si integra perfettamente con esso. Ci sono diversi modi per inserire una tabella TablePress in una pagina costruita con Elementor, ciascuno con i propri vantaggi.
Il metodo più diretto è il widget Shortcode di Elementor. Trascina il widget Shortcode nella posizione desiderata e incolla lo shortcode di TablePress nel campo apposito. La tabella verrà renderizzata nel frontend con tutte le funzionalità attive, anche se nell’editor Elementor potresti vedere solo il testo dello shortcode.
Il secondo metodo utilizza il widget Editor di Testo (o Text Editor). Incolla lo shortcode nel widget di testo e Elementor lo processerà correttamente. Questo metodo ha il vantaggio di permetterti di aggiungere testo prima e dopo la tabella nello stesso widget.
Il terzo metodo, disponibile con Elementor Pro, è il widget HTML. Questo widget ti permette di inserire codice HTML personalizzato, inclusi shortcode e CSS inline. È l’opzione più flessibile ma richiede più competenze tecniche.
Elementor: Stilizzazione e Responsività
Quando inserisci una tabella TablePress in Elementor, puoi sfruttare le opzioni di stile di Elementor per personalizzare ulteriormente l’aspetto. Il pannello “Avanzato” del widget ti permette di aggiungere margini, padding, bordi, ombreggiature e animazioni di ingresso all’intero contenitore della tabella.
Per la responsività, Elementor offre la possibilità di nascondere widget specifici su determinati dispositivi. Puoi creare due tabelle TablePress diverse (una con più colonne per desktop e una semplificata per mobile) e usare le impostazioni di visibilità di Elementor per mostrare quella appropriata su ogni dispositivo. Questo approccio è alternativo alla responsività nativa di TablePress e può essere più pratico in alcuni casi.
Un aspetto importante da considerare è la priorità degli stili. Elementor applica i propri stili globali alle tabelle HTML, che possono entrare in conflitto con gli stili di TablePress. Se noti differenze di aspetto tra l’anteprima di TablePress e la resa in Elementor, utilizza selettori CSS più specifici con !important per sovrascrivere gli stili di Elementor.
Integrazione con Altri Page Builder
TablePress funziona con praticamente tutti i page builder WordPress grazie alla compatibilità universale degli shortcode. Ecco le istruzioni specifiche per i builder più diffusi.
Con Beaver Builder, utilizza il modulo “HTML” o “Text Editor” per inserire lo shortcode. Beaver Builder processa automaticamente gli shortcode nel frontend. Con Divi Builder, usa il modulo “Text” o “Code” per lo shortcode. Divi potrebbe richiedere l’aggiunta di una classe CSS personalizzata per sovrascrivere i propri stili tabella.
Con Oxygen Builder, utilizza l’elemento “Shortcode Wrapper” che renderizza gli shortcode direttamente nell’editor visuale. Con WPBakery Page Builder, usa l’elemento “Raw HTML” o “Text Block”. In tutti i casi, lo shortcode standard di TablePress funziona senza modifiche.
Inserire TablePress nei Widget della Sidebar
I widget della sidebar e del footer di WordPress supportano gli shortcode, quindi puoi inserire tabelle TablePress anche in queste aree. Aggiungi un widget “Testo” (o “HTML personalizzato”) alla sidebar desiderata e incolla lo shortcode della tabella.
Per le tabelle nei widget, considera di disabilitare le funzionalità DataTables (ordinamento, filtro, paginazione) poiché la sidebar ha uno spazio limitato e i controlli aggiuntivi possono risultare ingombranti. Riduci anche il numero di colonne e utilizza dimensioni del font più piccole per adattare la tabella allo spazio ridotto.
Inserire TablePress nei Template PHP
Se hai bisogno di inserire una tabella TablePress direttamente in un template PHP (ad esempio nel file del tema o in un plugin personalizzato), puoi utilizzare la funzione do_shortcode() di WordPress:
<?php echo do_shortcode([table id=1 /]); ?>Questo metodo è particolarmente utile per integrazioni programmatiche, come mostrare automaticamente una tabella specifica in tutte le pagine di una categoria o in una custom post type. Puoi anche utilizzare variabili PHP per rendere dinamico l’ID della tabella:
<?php
$table_id = get_post_meta(get_the_ID(), tablepress_table_id, true);
if ($table_id) {
echo do_shortcode("[table id={$table_id} /]");
}
?>Shortcode in Commenti e Excerpt
Per motivi di sicurezza, WordPress non processa gli shortcode nei commenti degli utenti. Questo significa che un visitatore non può inserire uno shortcode TablePress in un commento per visualizzare una tabella. Questa è una protezione intenzionale che impedisce l’iniezione di contenuti non autorizzati.
Gli excerpt (riassunti) degli articoli, per impostazione predefinita, non processano gli shortcode. Se inserisci uno shortcode TablePress nel testo di un articolo, l’excerpt mostrerà il testo grezzo dello shortcode invece della tabella. Per evitare questo, assicurati che lo shortcode sia posizionato dopo il tag “Leggi tutto” (more tag) o scrivi un excerpt personalizzato nel campo apposito.
Troubleshooting delle Integrazioni
Se la tabella non viene visualizzata dopo aver inserito lo shortcode, verifica questi punti. Controlla che lo shortcode sia scritto correttamente, con le parentesi quadre e la barra finale. Verifica che l’ID della tabella corrisponda a una tabella esistente. Assicurati che TablePress sia attivo: se il plugin viene disattivato, gli shortcode vengono mostrati come testo grezzo.
Se la tabella appare ma senza interattività (ordinamento, filtro), il problema è probabilmente un conflitto JavaScript. Controlla la console del browser (F12 → Console) per errori JavaScript. Conflitti comuni includono il caricamento multiplo di jQuery o incompatibilità con altri plugin che utilizzano DataTables.
Se gli stili della tabella sono diversi da quanto atteso, ispeziona gli elementi con gli strumenti per sviluppatori per identificare quali regole CSS stanno sovrascrivendo quelle di TablePress. Ricorda che la specificità del selettore CSS determina quale regola prevale in caso di conflitto.
Leggi anche gli altri articoli della serie TablePress
Hai bisogno di assistenza per integrare TablePress con il tuo page builder o per risolvere problemi di compatibilità? Il team di G Tech Group è esperto in tutte le principali piattaforme WordPress. Contattaci per un supporto tecnico rapido e professionale.
Migliora il Tuo Sito WordPress
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress: