{"id":167183,"date":"2025-06-09T09:00:00","date_gmt":"2025-06-09T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/classic-editor-shortcode-contenuti-dinamici\/"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T22:00:00","slug":"classic-editor-shortcode-contenuti-dinamici","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/classic-editor-shortcode-contenuti-dinamici\/","title":{"rendered":"Classic Editor e i Shortcode: Inserire Contenuti Dinamici"},"content":{"rendered":"

Classic Editor e i Shortcode: Inserire Contenuti Dinamici<\/h2>\n

Gli shortcode rappresentano una delle funzionalità più potenti di WordPress e trovano nel Classic Editor il loro ambiente naturale. Mentre Gutenberg ha introdotto i blocchi come alternativa moderna agli shortcode, l’editor classico rimane l’interfaccia dove questi piccoli frammenti di codice tra parentesi quadre esprimono il massimo della loro praticità. In questa guida esploreremo come utilizzare, creare e gestire gli shortcode con Classic Editor, trasformando il tuo editor in uno strumento capace di inserire contenuti dinamici complessi con pochi caratteri.<\/p>\n

Cosa Sono gli Shortcode<\/h2>\n

Gli shortcode sono piccoli codici racchiusi tra parentesi quadre che WordPress interpreta e sostituisce con contenuti dinamici al momento della visualizzazione della pagina. Ad esempio, <\/code> inserisce una galleria di immagini, <\/code> incorpora un lettore audio e [contact-form-7 id=\"123\"]<\/code> visualizza un modulo di contatto. La loro sintassi è semplice e memorizzabile, il che li rende perfetti per l’uso nell’editor classico dove vengono digitati direttamente nel testo.<\/p>\n

Gli shortcode possono essere di due tipi: self-closing come <\/code> e enclosing come Testo della didascalia<\/code>. I primi non richiedono un tag di chiusura, i secondi racchiudono del contenuto che viene processato dallo shortcode stesso. Entrambi possono accettare attributi che ne modificano il comportamento.<\/p>\n

Shortcode Nativi di WordPress<\/h2>\n

WordPress include diversi shortcode nativi che funzionano perfettamente con Classic Editor senza bisogno di plugin aggiuntivi. Conoscerli è il primo passo per sfruttare appieno questa funzionalità:<\/p>\n

<\/strong>: inserisce una galleria di immagini allegate all’articolo o specificate tramite ID. Attributi principali: ids<\/code> (elenco di ID immagini separati da virgola), columns<\/code> (numero di colonne, default 3), size<\/code> (dimensione thumbnail: thumbnail, medium, large, full), link<\/code> (destinazione del link: file, none), orderby<\/code> (ordinamento: menu_order, title, rand).<\/p>\n

<\/strong> e <\/strong>: incorporano rispettivamente un lettore audio e video HTML5. Supportano i formati più comuni (MP3, OGG, WAV per l’audio; MP4, WebM, OGV per il video) e sono completamente responsivi.<\/p>\n

<\/strong>: aggiunge una didascalia a un’immagine con formattazione semanticamente corretta utilizzando i tag <figure><\/code> e <figcaption><\/code>.<\/p>\n

<\/strong>: incorpora contenuti da servizi esterni come YouTube, Vimeo, Twitter, Instagram e molti altri. Basta incollare l’URL tra i tag <code>url<\/a><\/code> e WordPress lo convertirà automaticamente nel player o widget appropriato tramite oEmbed.<\/p>\n

\"Shortcode<\/p>\n

Shortcode dei Plugin Più Popolari<\/h2>\n

La maggior parte dei plugin WordPress utilizza shortcode per inserire le proprie funzionalità nei contenuti. Ecco alcuni degli shortcode più diffusi che probabilmente utilizzerai con Classic Editor:<\/p>\n

Contact Form 7<\/strong>: [contact-form-7 id=\"123\" title=\"Contatti\"]<\/code> inserisce un modulo di contatto. Ogni modulo ha un ID univoco che puoi trovare nella pagina di gestione del plugin.<\/p>\n

WooCommerce<\/strong>: offre numerosi shortcode come [products]<\/code> per mostrare prodotti, [product_page id=\"99\"]<\/code> per una singola scheda prodotto, [woocommerce_cart]<\/code> per il carrello e [woocommerce_checkout]<\/code> per il checkout. Questi shortcode sono fondamentali per le pagine critiche del negozio online.<\/p>\n

Yoast SEO<\/strong>: utilizza shortcode come [wpseo_breadcrumb]<\/code> per inserire le breadcrumb in posizioni personalizzate al di fuori del template del tema.<\/p>\n

TablePress<\/strong>: [table id=1 \/]<\/code> inserisce tabelle create e gestite tramite l’interfaccia dedicata del plugin, con ordinamento, filtri e paginazione.<\/p>\n

Creare Shortcode Personalizzati<\/h2>\n

Creare i propri shortcode è sorprendentemente semplice e apre possibilità infinite. La funzione add_shortcode()<\/code> di WordPress è tutto ciò che serve. Ecco un esempio di shortcode che inserisce un box informativo stilizzato:<\/p>\n

function gtg_info_box_shortcode($atts, $content = null) {\n    $atts = shortcode_atts(array(\n        tipo => info,\n        titolo => \n    ), $atts, info_box);\n\n    $class = info-box info-box-- . esc_attr($atts[tipo]);\n    $titolo = !empty($atts[titolo])\n        ? <h4 class=\"info-box__title\"> . esc_html($atts[titolo]) . <\/h4>\n        : ;\n\n    return <div class=\" . $class . \">\n        . $titolo\n        . <div class=\"info-box__content\"> . do_shortcode($content) . <\/div>\n        . <\/div>;\n}\nadd_shortcode(info_box, gtg_info_box_shortcode);<\/code><\/pre>\n
Questo shortcode si usa così nell’editor classico: [info_box tipo=\"avviso\" titolo=\"Importante\"]Il contenuto del box[\/info_box]<\/code>. Nota l’uso di do_shortcode($content)<\/code> che permette di annidare altri shortcode all’interno del contenuto.<\/p>\n
Best Practice per gli Shortcode in Classic Editor<\/h2>\n
Quando lavori con gli shortcode nell’editor classico, segui queste best practice per evitare problemi comuni:<\/p>\n
Usa la modalità Testo per gli shortcode complessi<\/strong>: se uno shortcode ha molti attributi o contiene HTML, passare alla modalità Testo ti offre un controllo più preciso. La modalità Visuale a volte può aggiungere tag <p><\/code> o <br><\/code> indesiderati attorno agli shortcode.<\/p>\n
Verifica gli shortcode in anteprima<\/strong>: gli shortcode non vengono eseguiti nell’editor; vedrai solo il testo tra parentesi quadre. Usa sempre l’anteprima per verificare che l’output sia corretto prima di pubblicare.<\/p>\n
Documenta i tuoi shortcode<\/strong>: se crei shortcode personalizzati, crea una pagina di documentazione interna per il tuo team con la sintassi, gli attributi disponibili e gli esempi d’uso. Questo è particolarmente importante in ambienti multi-autore.<\/p>\n
\"Configurazione<\/p>\n
Il Problema degli Shortcode e il Cambio tra Visuale e Testo<\/h2>\n
Uno dei problemi più insidiosi quando si usano shortcode con Classic Editor riguarda il passaggio tra la modalità Visuale e la modalità Testo. WordPress applica una funzione chiamata wpautop<\/code> che aggiunge automaticamente tag <p><\/code> ai blocchi di testo e <br><\/code> alle interruzioni di riga. Questa funzione può interferire con gli shortcode, soprattutto quelli enclosing che contengono HTML.<\/p>\n
La soluzione più comune è posizionare gli shortcode su righe separate, senza testo prima o dopo sulla stessa riga. In alternativa, puoi utilizzare il plugin TinyMCE Advanced con l’opzione “Mantieni i tag paragrafo” attivata, che previene le conversioni automatiche di wpautop<\/code>. Per gli sviluppatori, è possibile rimuovere completamente wpautop<\/code> con remove_filter(the_content, wpautop)<\/code>, ma questa è una soluzione drastica che influisce su tutti i contenuti.<\/p>\n
Shortcode con Anteprima Visuale<\/h2>\n
Un limite degli shortcode nell’editor classico è che vengono visualizzati come testo semplice: l’autore non vede l’output effettivo fino all’anteprima. Per migliorare l’esperienza, puoi registrare un plugin TinyMCE che sostituisce visivamente gli shortcode con un’anteprima stilizzata nell’editor. WordPress fa già questo per alcuni shortcode nativi come <\/code> e <\/code>, mostrando un placeholder interattivo invece del testo grezzo.<\/p>\n
Per i tuoi shortcode personalizzati, puoi creare anteprime simili registrando una “view” TinyMCE che renderizza una rappresentazione visiva dello shortcode nell’editor. Questo richiede la creazione di un file JavaScript con la logica di rendering e la registrazione del view tramite wp.mce.views.register()<\/code>.<\/p>\n
Shortcode e Performance<\/h2>\n
Ogni shortcode presente in un articolo viene elaborato dal server al momento della visualizzazione della pagina. Se un articolo contiene molti shortcode complessi (ad esempio, shortcode che eseguono query al database), il tempo di caricamento può aumentare. Per mitigare questo problema, considera l’uso di un plugin di caching come WP Super Cache o W3 Total Cache, che salva l’output HTML generato e lo serve ai visitatori successivi senza rielaborare gli shortcode.<\/p>\n
Per gli shortcode che generano contenuti raramente modificati (come tabelle di pricing o sezioni informative), puoi anche considerare l’uso del Transient API di WordPress per cachare l’output dello shortcode nel database, riducendo il carico sul server ad ogni visualizzazione della pagina.<\/p>\n
Migrare gli Shortcode a Gutenberg<\/h2>\n
Se in futuro deciderai di migrare da Classic Editor a Gutenberg, i tuoi shortcode continueranno a funzionare. Gutenberg include un blocco “Shortcode” dedicato che accetta qualsiasi shortcode. Tuttavia, i blocchi Gutenberg offrono un’esperienza più moderna con anteprime in tempo reale, pannelli di impostazioni laterali e un’interfaccia visuale più ricca. Se crei shortcode personalizzati oggi, considera la possibilità di sviluppare anche i corrispondenti blocchi Gutenberg per una futura migrazione più agevole.<\/p>\n
\"Plugin<\/p>\n
Conclusioni<\/h2>\n
Gli shortcode e Classic Editor formano un binomio collaudato e potente per la creazione di contenuti dinamici in WordPress. La loro semplicità sintattica, la flessibilità degli attributi e la possibilità di creare shortcode personalizzati rendono questa tecnologia ancora perfettamente attuale nel 2026. Che tu utilizzi shortcode di plugin popolari o ne crei di personalizzati per il tuo progetto, Classic Editor offre l’ambiente ideale per lavorare con questi strumenti in modo rapido ed efficiente.<\/p>\n
\n
Leggi anche gli altri articoli della serie Classic Editor<\/h3>\n