{"id":167255,"date":"2025-06-09T09:00:00","date_gmt":"2025-06-09T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/tablepress-shortcode-gutenberg-elementor\/"},"modified":"2026-05-30T10:00:00","modified_gmt":"2026-05-30T08:00:00","slug":"tablepress-shortcode-gutenberg-elementor","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/tablepress-shortcode-gutenberg-elementor\/","title":{"rendered":"TablePress: Shortcode, Blocchi Gutenberg e Elementor"},"content":{"rendered":"<h2>TablePress: Shortcode, Blocchi Gutenberg e Elementor<\/h2>\n<p>Uno degli aspetti pi&#249; apprezzati di <strong>TablePress<\/strong> &#232; la sua flessibilit&#224; nell&#8217;integrarsi con qualsiasi editor e page builder di WordPress. Che tu stia usando l&#8217;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&#224; ogni metodo di integrazione, con trucchi e best practice per ottenere il massimo da ciascuno.<\/p>\n<h2>Gli Shortcode di TablePress: Il Metodo Universale<\/h2>\n<p>Gli shortcode sono il metodo originale e pi&#249; universale per inserire tabelle TablePress nei contenuti WordPress. Ogni tabella creata con TablePress ha uno <strong>shortcode univoco<\/strong> nel formato <code>[table id=N \/]<\/code>, dove N &#232; il numero identificativo della tabella. Questo shortcode pu&#242; essere inserito in qualsiasi contesto WordPress che supporti gli shortcode: articoli, pagine, widget di testo, custom post type e persino nei template PHP.<\/p>\n<p>Lo shortcode base &#232; sufficiente nella maggior parte dei casi, ma TablePress offre anche <strong>parametri aggiuntivi<\/strong> che ti permettono di personalizzare il comportamento della tabella senza modificarne le impostazioni originali. Ecco i parametri pi&#249; utili:<\/p>\n<ul>\n<li><code>[table id=1 \/]<\/code> &#8212; Inserisce la tabella con ID 1 con le impostazioni predefinite<\/li>\n<li><code>[table id=1 responsive=scroll \/]<\/code> &#8212; Abilita lo scroll orizzontale responsive<\/li>\n<li><code>[table id=1 datatables_paging=false \/]<\/code> &#8212; Disabilita la paginazione solo in questo contesto<\/li>\n<li><code>[table id=1 datatables_sort=false \/]<\/code> &#8212; Disabilita l&#8217;ordinamento solo qui<\/li>\n<\/ul>\n<p>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&#224;, mentre in un widget della sidebar potresti disabilitare paginazione e filtro per risparmiare spazio.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/tp2-01-list.png\" alt=\"Elenco tabelle con shortcode in TablePress\" \/><\/p>\n<h2>Shortcode Multipli nella Stessa Pagina<\/h2>\n<p>Puoi inserire <strong>pi&#249; shortcode<\/strong> di tabelle diverse nella stessa pagina senza alcun problema. TablePress gestisce correttamente il caricamento delle risorse JavaScript e CSS anche quando ci sono pi&#249; tabelle. Ogni tabella mantiene il proprio ID e le proprie impostazioni indipendentemente dalle altre.<\/p>\n<p>Tuttavia, se inserisci molte tabelle nella stessa pagina (pi&#249; di 5-6), le performance possono risentirne, soprattutto se tutte hanno DataTables attivo. In questi casi, considera di disabilitare DataTables per le tabelle pi&#249; semplici o di utilizzare la paginazione per ridurre il numero di righe renderizzate simultaneamente.<\/p>\n<p>Un altro aspetto da considerare &#232; 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&#8217;ID della tabella (ad esempio <code>.tablepress-id-3<\/code>) per applicare stili mirati.<\/p>\n<h2>Integrazione con l&#8217;Editor a Blocchi Gutenberg<\/h2>\n<p>Dal momento che WordPress 5.0 ha introdotto l&#8217;editor a blocchi Gutenberg, TablePress ha sviluppato un <strong>blocco dedicato<\/strong> che rende l&#8217;inserimento delle tabelle ancora pi&#249; semplice e intuitivo. Per utilizzarlo, apri l&#8217;editor a blocchi e fai clic sull&#8217;icona &#8220;+&#8221; per aggiungere un nuovo blocco.<\/p>\n<p>Cerca &#8220;TablePress&#8221; nella barra di ricerca dei blocchi e seleziona il blocco &#8220;TablePress table&#8221;. Si aprir&#224; 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&#224; configurato automaticamente.<\/p>\n<p>Il vantaggio principale del blocco Gutenberg rispetto allo shortcode manuale &#232; la <strong>selezione visuale<\/strong>: non devi ricordare gli ID delle tabelle, puoi semplicemente scegliere dal menu. Inoltre, il blocco mostra un&#8217;anteprima del nome e della descrizione della tabella direttamente nell&#8217;editor, facilitando l&#8217;identificazione della tabella corretta.<\/p>\n<p>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&#8217;interfaccia pi&#249; user-friendly.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/tp2-02-add.png\" alt=\"Aggiunta di una tabella TablePress nell&#8217;editor Gutenberg\" \/><\/p>\n<h2>Blocco Gutenberg: Funzionalit&#224; Avanzate<\/h2>\n<p>Il blocco TablePress per Gutenberg supporta anche le <strong>trasformazioni di blocco<\/strong>. Se hai un blocco di testo contenente uno shortcode TablePress, puoi trasformarlo in un blocco TablePress nativo e viceversa. Questa funzionalit&#224; &#232; utile se stai migrando contenuti dall&#8217;editor classico a Gutenberg.<\/p>\n<p>Il blocco rispetta le impostazioni di <strong>spaziatura e allineamento<\/strong> 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.<\/p>\n<p>Per utenti avanzati, il blocco supporta anche l&#8217;<strong>HTML personalizzato<\/strong>. Facendo clic su &#8220;Modifica come HTML&#8221; nel menu del blocco, puoi accedere direttamente allo shortcode sottostante e modificare i parametri manualmente. Questo &#232; utile per parametri avanzati che non sono esposti nell&#8217;interfaccia grafica del blocco.<\/p>\n<h2>Integrazione con Elementor<\/h2>\n<p><strong>Elementor<\/strong> &#232; il page builder pi&#249; 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.<\/p>\n<p>Il metodo pi&#249; diretto &#232; il widget <strong>Shortcode<\/strong> di Elementor. Trascina il widget Shortcode nella posizione desiderata e incolla lo shortcode di TablePress nel campo apposito. La tabella verr&#224; renderizzata nel frontend con tutte le funzionalit&#224; attive, anche se nell&#8217;editor Elementor potresti vedere solo il testo dello shortcode.<\/p>\n<p>Il secondo metodo utilizza il widget <strong>Editor di Testo<\/strong> (o Text Editor). Incolla lo shortcode nel widget di testo e Elementor lo processer&#224; correttamente. Questo metodo ha il vantaggio di permetterti di aggiungere testo prima e dopo la tabella nello stesso widget.<\/p>\n<p>Il terzo metodo, disponibile con Elementor Pro, &#232; il widget <strong>HTML<\/strong>. Questo widget ti permette di inserire codice HTML personalizzato, inclusi shortcode e CSS inline. &#200; l&#8217;opzione pi&#249; flessibile ma richiede pi&#249; competenze tecniche.<\/p>\n<h2>Elementor: Stilizzazione e Responsivit&#224;<\/h2>\n<p>Quando inserisci una tabella TablePress in Elementor, puoi sfruttare le <strong>opzioni di stile di Elementor<\/strong> per personalizzare ulteriormente l&#8217;aspetto. Il pannello &#8220;Avanzato&#8221; del widget ti permette di aggiungere margini, padding, bordi, ombreggiature e animazioni di ingresso all&#8217;intero contenitore della tabella.<\/p>\n<p>Per la <strong>responsivit&#224;<\/strong>, Elementor offre la possibilit&#224; di nascondere widget specifici su determinati dispositivi. Puoi creare due tabelle TablePress diverse (una con pi&#249; colonne per desktop e una semplificata per mobile) e usare le impostazioni di visibilit&#224; di Elementor per mostrare quella appropriata su ogni dispositivo. Questo approccio &#232; alternativo alla responsivit&#224; nativa di TablePress e pu&#242; essere pi&#249; pratico in alcuni casi.<\/p>\n<p>Un aspetto importante da considerare &#232; la <strong>priorit&#224; degli stili<\/strong>. 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&#8217;anteprima di TablePress e la resa in Elementor, utilizza selettori CSS pi&#249; specifici con <code>!important<\/code> per sovrascrivere gli stili di Elementor.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/tp2-04-options.png\" alt=\"Configurazione shortcode e opzioni di integrazione TablePress\" \/><\/p>\n<h2>Integrazione con Altri Page Builder<\/h2>\n<p>TablePress funziona con praticamente tutti i page builder WordPress grazie alla compatibilit&#224; universale degli shortcode. Ecco le istruzioni specifiche per i builder pi&#249; diffusi.<\/p>\n<p>Con <strong>Beaver Builder<\/strong>, utilizza il modulo &#8220;HTML&#8221; o &#8220;Text Editor&#8221; per inserire lo shortcode. Beaver Builder processa automaticamente gli shortcode nel frontend. Con <strong>Divi Builder<\/strong>, usa il modulo &#8220;Text&#8221; o &#8220;Code&#8221; per lo shortcode. Divi potrebbe richiedere l&#8217;aggiunta di una classe CSS personalizzata per sovrascrivere i propri stili tabella.<\/p>\n<p>Con <strong>Oxygen Builder<\/strong>, utilizza l&#8217;elemento &#8220;Shortcode Wrapper&#8221; che renderizza gli shortcode direttamente nell&#8217;editor visuale. Con <strong>WPBakery Page Builder<\/strong>, usa l&#8217;elemento &#8220;Raw HTML&#8221; o &#8220;Text Block&#8221;. In tutti i casi, lo shortcode standard di TablePress funziona senza modifiche.<\/p>\n<h2>Inserire TablePress nei Widget della Sidebar<\/h2>\n<p>I widget della sidebar e del footer di WordPress supportano gli shortcode, quindi puoi inserire tabelle TablePress anche in queste aree. Aggiungi un widget &#8220;Testo&#8221; (o &#8220;HTML personalizzato&#8221;) alla sidebar desiderata e incolla lo shortcode della tabella.<\/p>\n<p>Per le tabelle nei widget, considera di disabilitare le funzionalit&#224; DataTables (ordinamento, filtro, paginazione) poich&#233; 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&#249; piccole per adattare la tabella allo spazio ridotto.<\/p>\n<h2>Inserire TablePress nei Template PHP<\/h2>\n<p>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 <code>do_shortcode()<\/code> di WordPress:<\/p>\n<pre><code>&lt;?php echo do_shortcode([table id=1 \/]); ?&gt;<\/code><\/pre>\n<p>Questo metodo &#232; 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&#8217;ID della tabella:<\/p>\n<pre><code>&lt;?php\n$table_id = get_post_meta(get_the_ID(), tablepress_table_id, true);\nif ($table_id) {\n  echo do_shortcode(\"[table id={$table_id} \/]\");\n}\n?&gt;<\/code><\/pre>\n<h2>Shortcode in Commenti e Excerpt<\/h2>\n<p>Per motivi di sicurezza, WordPress non processa gli shortcode nei commenti degli utenti. Questo significa che un visitatore non pu&#242; inserire uno shortcode TablePress in un commento per visualizzare una tabella. Questa &#232; una protezione intenzionale che impedisce l&#8217;iniezione di contenuti non autorizzati.<\/p>\n<p>Gli <strong>excerpt<\/strong> (riassunti) degli articoli, per impostazione predefinita, non processano gli shortcode. Se inserisci uno shortcode TablePress nel testo di un articolo, l&#8217;excerpt mostrer&#224; il testo grezzo dello shortcode invece della tabella. Per evitare questo, assicurati che lo shortcode sia posizionato dopo il tag &#8220;Leggi tutto&#8221; (more tag) o scrivi un excerpt personalizzato nel campo apposito.<\/p>\n<h2>Troubleshooting delle Integrazioni<\/h2>\n<p>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&#8217;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.<\/p>\n<p>Se la tabella appare ma senza interattivit&#224; (ordinamento, filtro), il problema &#232; probabilmente un conflitto JavaScript. Controlla la console del browser (F12 &rarr; Console) per errori JavaScript. Conflitti comuni includono il caricamento multiplo di jQuery o incompatibilit&#224; con altri plugin che utilizzano DataTables.<\/p>\n<p>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&#224; del selettore CSS determina quale regola prevale in caso di conflitto.<\/p>\n<div style=\"background:#f0f4f8;border-left:4px solid #2563eb;padding:18px 24px;margin:30px 0;border-radius:8px;\">\n<h3 style=\"margin-top:0;\">Leggi anche gli altri articoli della serie TablePress<\/h3>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/installare-configurare-tablepress-wordpress\/\">Come Installare e Configurare TablePress su WordPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/tablepress-creare-prima-tabella-guida\/\">Creare la Prima Tabella con TablePress: Guida Passo Passo<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/tablepress-formattazione-stili-css-personalizzato\/\">Formattazione e Stili in TablePress: CSS Personalizzato<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/tablepress-woocommerce-tabelle-ecommerce-catalogo\/\">TablePress e WooCommerce: Tabelle per E-Commerce e Catalogo<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/tablepress-problemi-comuni-troubleshooting\/\">Risolvere i Problemi Comuni di TablePress: Troubleshooting<\/a><\/li>\n<\/ul>\n<\/div>\n<p>Hai bisogno di assistenza per integrare TablePress con il tuo page builder o per risolvere problemi di compatibilit&#224;? Il team di <strong>G Tech Group<\/strong> &#232; esperto in tutte le principali piattaforme WordPress. <a href=\"https:\/\/gtechgroup.it\/contatti\/\">Contattaci<\/a> per un supporto tecnico rapido e professionale.<\/p>\n<h3>Migliora il Tuo Sito WordPress<\/h3>\n<p>Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/come-installare-elementor-wordpress-guida-principianti\/\">Come Installare Elementor su WordPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/wp-rocket-installare-configurare-wordpress\/\">Come Installare e Configurare WP Rocket<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/come-installare-configurare-seopress-wordpress-guida\/\">Come Installare e Configurare SEOPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/installare-attivare-updraftplus-wordpress\/\">Come Installare e Configurare UpdraftPlus<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>TablePress: Shortcode, Blocchi Gutenberg e Elementor Uno degli aspetti pi&#249; apprezzati di TablePress &#232; la sua flessibilit&#224; nell&#8217;integrarsi con qualsiasi editor e page builder di&hellip;<\/p>\n","protected":false},"author":2,"featured_media":167205,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"TablePress: Shortcode e Gutenberg | Guida","_seopress_titles_desc":"Come inserire tabelle TablePress con shortcode, blocchi Gutenberg e widget Elementor.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"TablePress: Shortcode, Blocchi Gutenberg","footnotes":""},"categories":[1,61],"tags":[2599,1005,3244,3606,492],"class_list":["post-167255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-senza-categoria","category-wordpress","tag-elementor","tag-gutenberg","tag-shortcode","tag-tablepress","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=167255"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167255\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/167205"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=167255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}