Come creare uno shortcode personalizzato in WordPress

Cosa sono gli shortcode WordPress e perché usarli

Gli shortcode WordPress sono frammenti di codice racchiusi tra parentesi quadre che permettono di eseguire funzioni complesse all’interno di post, pagine e widget senza scrivere codice PHP. Introdotti nella versione 2.5, gli shortcode hanno rivoluzionato il modo di aggiungere contenuti dinamici in WordPress, permettendo a sviluppatori e utenti di inserire elementi come gallerie, moduli, pulsanti personalizzati e molto altro con una semplice sintassi testuale. Un shortcode si presenta tipicamente nella forma [nome_shortcode] o [nome_shortcode attributi=”valore”] e, quando WordPress elabora la pagina, viene sostituito con l’output generato dalla funzione PHP corrispondente. I casi d’uso sono infiniti: visualizzare gli ultimi post del blog in una pagina statica, creare pulsanti personalizzati con stili unici, inserire tabelle di prezzi, mostrare un loop di testimonianze, generare griglie di portfolio o elenchi di prodotti, aggiungere contenuti dinamici come l’anno corrente o i dati dell’utente loggato. Gli shortcode rimangono rilevanti anche nell’era di Gutenberg perché offrono un livello di flessibilità e riutilizzabilità che i blocchi standard non sempre eguagliano, specialmente per funzionalità back-end complesse.

Creare il primo shortcode con add_shortcode()

La creazione di uno shortcode personalizzato richiede due passaggi fondamentali: scrivere una funzione PHP che genera l’output desiderato, e registrare la funzione come shortcode utilizzando add_shortcode(). La funzione riceve tipicamente tre parametri: $atts (un array di attributi passati allo shortcode), $content (il contenuto racchiuso tra tag di apertura e chiusura per shortcode encloser) e $tag (il nome dello shortcode stesso). La funzione deve restituire una stringa, non stamparla direttamente. È importante ricordare che l’output di uno shortcode viene processato prima che WordPress generi la pagina, quindi non può dipendere da dati che vengono determinati successivamente nel ciclo di rendering. Ecco un esempio base: per creare uno shortcode che visualizza la data corrente, scrivi una funzione che restituisce “Oggi è il ” . date(‘d/m/Y’), e registrala con add_shortcode(‘data_corrente’, ‘nome_della_funzione’). A questo punto, inserendo [data_corrente] in un post, apparirà automaticamente la data del giorno. Tutto il codice va inserito nel file functions.php del tema attivo o in un plugin personalizzato per mantenerlo funzionante anche dopo un cambio di tema.

Passare attributi agli shortcode con shortcode_atts()

Gli attributi rendono gli shortcode flessibili e riutilizzabili in diversi contesti. Per gestirli correttamente, la funzione shortcode_atts() permette di definire valori predefiniti per ogni attributo, garantendo che lo shortcode funzioni anche quando l’utente non specifica tutti i parametri. La sintassi è shortcode_atts(array(‘attributo1’ => ‘default1’, ‘attributo2’ => ‘default2’), $atts). Questo unisce gli attributi forniti dall’utente con i valori predefiniti, dando priorità a quelli espliciti. Per esempio, uno shortcode per un pulsante personalizzato potrebbe accettare attributi come colore, testo e url. Se l’utente scrive [pulsante colore=”blu” testo=”Clicca qui” url=”https://esempio.it”], la funzione estrarrà questi valori e genererà il codice HTML corrispondente. Se l’utente omette qualche attributo, verrà utilizzato il valore predefinito definito in shortcode_atts(). È buona pratica validare e sanificare tutti gli attributi ricevuti, specialmente url e altri dati che potrebbero essere utilizzati in contesti sensibili come attributi HTML o URL di reindirizzamento.

Shortcode con contenuto racchiuso (enclosing shortcode)

Gli shortcode possono anche racchiudere contenuto, funzionando come contenitori che avvolgono il testo o HTML presente tra il tag di apertura e chiusura. La sintassi è [shortcode]contenuto da avvolgere[/shortcode]. In questo caso, la funzione riceve il contenuto racchiuso nel parametro $content e può manipolarlo prima di restituirlo. Un esempio classico è uno shortcode per evidenziare il testo: [evidenzia colore=”giallo”]Testo da evidenziare[/evidenzia] potrebbe restituire Testo da evidenziare. L’uso di do_shortcode() all’interno della funzione è importante per permettere che eventuali shortcode annidati nel contenuto vengano processati: $content = do_shortcode($content). Questo è utile per shortcode che fungono da contenitori di layout, come colonne o box, all’interno dei quali l’utente potrebbe inserire altri shortcode. Attenzione però a non creare dipendenze circolari che potrebbero portare a loop infiniti o errori di memoria.

Esempi complessi: colonne, directory e griglie

Gli shortcode diventano veramente potenti quando si creano sistemi di layout complessi. Uno shortcode per colonne responsive potrebbe funzionare con una sintassi come [colonne] [colonna larghezza=”6″]Contenuto sinistra[/colonna] [colonna larghezza=”6″]Contenuto destra[/colonna] [/colonne], generando il markup CSS Grid o Flexbox appropriato. Per una directory dello staff, uno shortcode [staff] potrebbe accettare parametri come categoria, numero di membri e ordine, e interrogare il database per restituire una griglia di card con foto, nome e bio di ogni membro, con stili predefiniti. Una griglia di portfolio potrebbe utilizzare [portfolio categoria=”web-design” colonne=”3″ filtro=”si”] per mostrare i progetti filtrati con animazioni e lightbox. Questi esempi mostrano come gli shortcode possano sostituire completamente plugin complessi per funzionalità specifiche, mantenendo il sito leggero e performante. La chiave è bilanciare flessibilità e complessità: offri opzioni di personalizzazione sufficienti ma mantieni la sintassi semplice e intuitiva per l’utente finale.

Sicurezza negli shortcode: escaping e validazione

La sicurezza è un aspetto critico nello sviluppo di shortcode, specialmente se questi vengono utilizzati da più utenti o in contesti dove il contenuto può essere inserito da collaboratori con diversi livelli di permessi. L’escaping dell’output è fondamentale per prevenire attacchi XSS (Cross-Site Scripting): utilizza esc_html(), esc_attr() o esc_url() per sanificare i dati prima di includerli nell’HTML generato. Per attributi che possono contenere HTML consentito, usa wp_kses() per specificare esattamente quali tag e attributi sono permessi, bloccando tutto il resto. Per attributi numerici, utilizza intval() o floatval() per assicurarti di ricevere effettivamente un numero. Non eseguire mai direttamente input utente in funzioni come eval() o include(). Verifica che l’utente abbia i permessi necessari per utilizzare lo shortcode aggiungendo un controllo current_user_can() prima di eseguire operazioni sensibili come query al database o modifiche ai file. Ricorda che gli shortcode vengono eseguiti nel contesto del front-end, quindi qualsiasi vulnerabilità è potenzialmente sfruttabile da visitatori anonimi.

Best practice per gli shortcode: prefissi, naming e organizzazione

Seguire delle best practice nello sviluppo degli shortcode garantisce manutenibilità e evita conflitti con altri plugin o temi. Utilizza sempre un prefisso unico per i nomi dei tuoi shortcode, tipicamente correlato al nome del tuo plugin o tema (ad esempio, per Studio Immens, tutti gli shortcode potrebbero iniziare con si_ come [si_pulsante], [si_colonne]). Questo previene collisioni con shortcode di altri sviluppatori. Organizza il codice in file separati se crei molti shortcode, magari in una cartella /inc/shortcodes/ all’interno del tuo plugin o tema. Documenta ogni shortcode con commenti chiari che spieghino parametri, valori predefiniti e comportamento. Evita di creare shortcode all’interno di altri shortcode (nesting eccessivo) che può portare a problemi di performance e manutenibilità. Per attributi booleani, usa valori come “si”/”no” o “vero”/”falso” piuttosto che 1/0 per maggiore chiarezza. Raggruppa shortcode correlati in un’unica funzione di registrazione per mantenere il codice pulito e centrale.

Alternative moderne: blocchi Gutenberg, blocchi riutilizzabili e pattern

Con l’introduzione di Gutenberg in WordPress 5.0 e la maturazione del Full Site Editing, gli shortcode non sono più l’unica opzione per contenuti dinamici e riutilizzabili. I blocchi Gutenberg nativi offrono funzionalità che prima richiedevano shortcode, come colonne, gruppi, pulsanti e media. I blocchi riutilizzabili permettono di salvare una combinazione di blocchi e riutilizzarla in qualsiasi post o pagina, con la possibilità di aggiornare tutte le istanze modificando il blocco originale. I block pattern offrono layout predefiniti che possono essere inseriti con un click. Per funzionalità dinamiche e lato server, tuttavia, gli shortcode rimangono la soluzione più pratica. Puoi anche creare blocchi Gutenberg personalizzati che integrano shortcode esistenti, offrendo un’interfaccia visiva per parametri che altrimenti andrebbero digitati manualmente. La strategia migliore nel 2026 è utilizzare blocchi nativi dove possibile, ricorrendo agli shortcode per funzionalità back-end complesse o per garantire compatibilità con temi e plugin che non supportano ancora completamente l’ecosistema a blocchi.

Conclusione

Gli shortcode rimangono uno strumento potente e flessibile nell’arsenale di ogni sviluppatore WordPress. Nonostante l’evoluzione di Gutenberg e dei blocchi, la capacità di creare funzionalità dinamiche con una sintassi semplice e di integrarle ovunque nel sito rende gli shortcode ancora preziosi. Con le giuste pratiche di sicurezza e organizzazione, puoi estendere WordPress in modi che sarebbero altrimenti complessi o richiederebbero plugin ingombranti. Inizia con shortcode semplici per risolvere problemi specifici e gradualmente costruisci una libreria di shortcode riutilizzabili che accelereranno il tuo sviluppo e miglioreranno l’esperienza dei tuoi utenti.

Leave a Reply