Gli shortcode di WordPress sono una potente funzione per fare cose interessanti con poco sforzo. Potete farci praticamente di tutto. Con gli shortcode, l’inserimento di elementi interattivi o la creazione di layout di pagina complessi diventa facile come inserire una singola riga di codice.

Se volete aggiungere una galleria, dovete semplicemente digitare il seguente codice:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

In questo modo viene visualizzata una galleria con gli ID immagine menzionati. Avrà 4 colonne e la loro dimensione massima sarà “media” (come definito da WordPress).

Non c’è bisogno di un brutto codice HTML.

Esempio di shortcode per galleria

Esempio di shortcode per galleria

Gli shortcode eliminano la necessità di script complicati. Grazie a loro, anche se avete poche o nessuna abilità di programmazione, potete aggiungere contenuti dinamici senza sforzo.

Sono molto popolari tra chi si occupa di sviluppo WordPress, in quanto aiutano tantissimo ad automatizzare la creazione di contenuti e design. Gli shortcode sono per chi sviluppa con WordPress ciò che le macro sono per gli analisti di dati, o le shortcode da tastiera chi si occupa di grafica professionale.

In questa guida, imparerete tutto quello che c’è da sapere sugli shortcode. Scoprirete come lavorare con l’API Shortcode creando i vostri shortcode. Alla fine, parleremo del futuro degli shortcode e di dove si inseriscono con il nuovo Block editor di WordPress.

Impazienti? Cominciamo!

Cos’è uno Shortcode?

In poche parole, Shortcode = Codice + Breve.

Gli shortcode usano i tag tra parentesi quadre [] per definire il modo in cui vengono utilizzati. Ogni shortcode svolge una particolare funzione in un sito. Può essere semplice come formattare il contenuto o complesso come definire l’intera struttura del sito web.

Ad esempio, è possibile utilizzare gli shortcode per incorporare cursori, moduli o tabelle dei prezzi. È anche possibile utilizzarli per creare modelli di progettazione di pagine riutilizzabili.

Una Breve Storia degli Shortcode

Gli shortcode sono stati resi popolari per la prima volta da un forum online chiamato Ultimate Bulletin Board (UBB). Nel 1998 avevano introdotto il BBCode (Bulletin Board Code), una raccolta di tag di facile utilizzo per consentire agli utenti di formattare facilmente i loro messaggi.

Formattazione facile con semplici BBCode

Formattazione facile con semplici BBCode

Essendo un linguaggio di markup leggero, il BBCode funziona sugli stessi principi dell’HTML, ma è molto più semplice.

Anche l’uso di tag predefiniti è molto più sicuro, in quanto gli utenti non possono inserire codice HTML e introdurre vulnerabilità per la sicurezza. Per esempio, un utente con intenzioni malevole potrebbe usare il tag <script> per eseguire codice JavaScript e interrompere la funzionalità del sito.

Poco dopo, altri software di forum online come phpBBB, XMB Forum e vBulletin hanno aggiunto la funzionalità BBCode nelle loro bacheche.

Gli shortcode consentono a chi amministra il sito di avere un maggiore controllo su ciò che i loro utenti possono e non possono fare. Inoltre, hanno permesso agli utenti di formattare i loro contenuti attraverso semplici tag.

Per le stesse ragioni di sicurezza, WordPress impedisce l’esecuzione del codice PHP all’interno dei contenuti del sito. Per superare questa limitazione, WordPress 2.5 nel 2008 ha introdotto la funzionalità shortcode con il rilascio di Shortcode API. Questa si è dimostrata essere una delle caratteristiche più utilizzate da molti sviluppatori di plugin e temi di WordPress.

Cosa Sono gli Shortcode di WordPress?

Gli shortcode di WordPress sono stringhe di parentesi quadre ([ ]) che si trasformano magicamente in qualcosa di affascinante che apparirà sul frontend. Offrono agli utenti un modo semplice per creare e modificare contenuti complicati senza preoccuparsi di HTML complesso o codici embed.

Gli shortcode di WordPress sono semplici e facili da usare

Gli shortcode di WordPress sono semplici e facili da usare

I 2 Tipi di Shortcode

In WordPress esistono principalmente due tipi di shortcode.

Gli shortcode self-closing e gli shortcode enclosing possono essere validi sia con che senza attributi.

Gli shortcode self-closing e gli shortcode enclosing possono essere validi sia con che senza attributi.

Esempio: Lo shortcode gallery non ha bisogno di un tag di chiusura. Ci aggiungiamo tutto ciò di cui abbiamo bisogno con attributi diversi.

Esempio: Lo shortcode caption viene utilizzato per avvolgere una didascalia intorno a qualsiasi contenuto. Viene usato principalmente per aggiungere una didascalia alle immagini, ma funziona con qualsiasi elemento HTML.

Alcuni shortcode funzionano con o senza attributi. Dipende da come vengono definiti.

Gli Shortcode Predefiniti di WordPress

WordPress include 6 shortcode di default:

Per maggiori dettagli su come si possono usare gli shortcode di default e quali attributi supportano, fate riferimento ai documenti Codex collegati.

Come Utilizzare gli Shortcode di WordPress

L’utilizzo di shortcode in WordPress è un processo semplice. Ma dipende da dove volete aggiungerli sul vostro sito. Assicuratevi di leggere la documentazione degli shortcode per capire come funzionano e imparate quali attributi supporta, in modo da poter ottenere esattamente ciò che volete.

Utilizzo degli Shortcode di WordPress nelle Pagine e nei Post

Per prima cosa, andate all’editor di pagina/post dove volete inserire lo shortcode.

Se utilizzate l’editor di Gutenberg, potete aggiungere il tag shortcode nel blocco omonimo Shortcode. Lo trovate nella sezione Widget.

Aggiunta del blocco Shortcode in Gutenberg

Aggiunta del blocco Shortcode in Gutenberg

Il blocco di Gutenberg dedicato agli shortcode

Il blocco di Gutenberg dedicato agli shortcode

State ancora usando il Classic Editor (o il plugin)? Potete digitare i vostri tag shortcode nel modo classico. Alcuni shortcode possono anche includere un pulsante nella schermata dell’editor così da inserirli prontamente.

Aggiunta di uno shortcode nell'editor classico

Aggiunta di uno shortcode nell’editor classico

Utilizzo degli Shortcode di WordPress nei Widget della Barra Laterale

Gli shortcode possono essere inseriti anche nei widget della barra laterale. Per aggiungerli, andate su Appearance » Widgets e aggiungete un widget Text alla sezione in cui desiderate aggiungere lo shortcode.

Aggiunta di shortcode nella barra laterale con il widget Testo

Aggiunta di shortcode nella barra laterale con il widget Testo

Incollate lo shortcode all’interno del widget Text e salvatelo. Quando visitate il frontend del vostro sito vedrete l’output dello shortcode nella barra laterale.

Potete vedere il risultato dello shortcode (la gallery) nella barra laterale

Potete vedere il risultato dello shortcode (la gallery) nella barra laterale

Nota: le versioni di WordPress 4.8 e successive non supportano gli shortcode nei widget della barra laterale. Per saperne di più, leggete le note sui miglioramenti del widget nell’aggiornamento di WordPress 4.9.

Utilizzo dei Shortcode WordPress nell’Header e nel Footer

Gli shortcode di WordPress sono in genere destinati a pagine, post e widget. Ma avete un modo semplice per inserire gli shortcode in qualsiasi punto del vostro sito.

Diciamo che volete aggiungere un pulsante di call to action nel vostro footer o in tutti i vostri post prima della sezione commenti. La funzione di callback do_shortcode() viene utile in questo caso.

Dovete aggiungere il seguente codice all’header.php del tema, al footer.php o a uno qualsiasi dei suoi file di template:

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

In questo modo l’output dello shortcode apparirà nel punto in cui avete inserito il codice.
Ricordate di includere le parentesi quadre tra le virgolette per far funzionare lo shortcode, perché includere solo il nome non funzionerà.

Allo stesso modo, potete utilizzare la funzione di richiamo do_shortcode() per attivare gli shortcode in qualsiasi punto di WordPress, come nella sezione dei commenti.

Una Rapida Introduzione alla Shortcode API

La Shortcode API di WordPress definisce in che modo è possibile utilizzare gli shortcode per personalizzare ed espandere le funzionalità del sito. Permette a chi si occupa di sviluppo di creare contenuti unici (ad es. moduli, caroselli, slider, ecc.) che gli utenti possono aggiungere nei loro siti incollando il relativo shortcode.

Con l’aiuto di shortcode è possibile aggiungere quasi tutte le funzioni che si possono immaginare al proprio sito web.

L’API supporta sia gli shortcode self-closing che quelli enclosing: gestisce tutti i difficili processi di analisi e include funzioni di supporto per impostare e recuperare gli attributi di default.

Grazie all’API, potrete tuffarvi direttamente nello sviluppo e nella personalizzazione degli shortcode, piuttosto che perdere tempo prezioso a definire regular expressions per ognuno di loro.

Capire le Basi della Shortcode API

Ogni volta che aprite una pagina o un post in WordPress, WordPress cerca gli shortcode registrati durante l’elaborazione dei contenuti del sito.

Se trova uno shortcode già registrato, la Shortcode API prende il controllo e restituisce l’output del/degli shortcode. La stringa di output restituita sostituisce il tag dello shortcode nella posizione in cui era stata aggiunta.

Per registrare uno shortcode in WordPress, si usa la funzione add_shortcode(). Ecco come fare:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

La funzione di gestione degli shortcode è definita come segue:

function shortcode_handler_function( $atts, $content, $tag ){ }

L’API analizza il tag dello shortcode, gli attributi e il contenuto allegato (se presente) bypassando i valori alla funzione handler, che li elabora e restituisce una stringa di output.

Questa stringa di output sostituisce lo shortcode macro sul frontend del vostro sito. Ciò che in definitiva si vede nel browser è questo output.

Dove Aggiungere i Vostri Script per gli Shortcode Personalizzati?

Potete aggiungere i vostri script per gli shortcode personalizzati nel file functions.php del vostro tema o includerli in un plugin.

Se li aggiungete a un file del tema, potete eseguire la funzione add_shortcode() così com’è.

Se invece lo aggiungete ad un plugin, vi consiglio di inizializzarlo solo dopo che WordPress si è caricato completamente. Potete assicurarvi di questo avvolgendo la funzione add_shortcode() all’interno di un’altra funzione. Questa si chiama funzione wrapper:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

La funzione add_action() aggancia la funzione shortcodes_init per eseguirsi solo dopo che WordPress ha terminato il caricamento (e viene chiamata “init” hook).

Come Creare uno Shortcode Personalizzato in WordPress (Livello Principiante)

Ora che abbiamo visto le basi, è giunto il momento di creare uno shortcode personalizzato.

Per seguire i passi indicati di seguito, dovreste avere familiarità con il codice PHP e saper modificare i file del vostro tema WordPress. Quando avrete finito con il tutorial, avrete il vostro primo shortcode per WordPress personalizzato e pronto a partire!

Inizieremo con lo shortcode più semplice possibile, per poi passare a quelli più complessi. Godetevi queste brevi tappe verso la padronanza degli shortcode!

Esempio 1: Shortcode con [current_year]

Creiamo uno shortcode chiamato [current_year] che riporta l’anno corrente sul vostro sito web.

Questo shortcode è utile se state aggiungendo contenuti al vostro sito web che devono essere aggiornati ogni anno. Ad esempio, quando aggiungete una nota di copyright al footer del vostro sito.

Userò un plugin barebone per aggiungere le funzioni del mio shortcode. Potreste aggiungerlo al file functions.php del vostro tema e ottenere gli stessi risultati, ma non lo consiglio. Questo va bene per i test e per l’apprendimento!

Info

Fate un backup prima di apportare qualsiasi modifica al vostro sito. Kinsta fornisce backup automatici a tutti i suoi clienti.

Iniziamo a creare un plugin. Create una nuova cartella nella vostra directory /wp-content/plugins/.

Annotate la posizione della directory dei plugin

Annotate la posizione della directory dei plugin

Sto chiamando il mio plugin “salcodes”, ma potete chiamarlo come volete.

Nella directory dei plugin <strong salcodes, create un file PHP con lo stesso nome (salcodes.php). Una volta fatto, aggiungete l’header seguente al file del plugin:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Questa semplice intestazione del plugin è sufficiente per i nostri scopi. Per saperne di più sui requisiti per l’header dei plugin, consultare il Codex WordPress. Salvate questo file e poi andate sulla <a href="https://kinsta.com/knowledgebase/wordpress-admin/"dashboard di WordPress per attivare il plugin.

Ora, registriamo lo shortcode e la sua funzione handler. Per fare ciò, aggiungete il seguente codice al file del vostro plugin:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

Ora salvate il file del plugin e verificate se lo shortcode funziona come previsto.

Aggiungete lo shortcode in qualsiasi punto del vostro sito (pagina, post, widget della barra laterale, ecc.). Io lo aggiungo al widget di testo della barra laterale del mio sito.

Testiamo lo shortcode personalizzato aggiungendolo al sito.

Testiamo lo shortcode personalizzato aggiungendolo al sito.

Come previsto, funziona perfettamente.

Risultato dello shortcode che indica l'anno

Risultato dello shortcode che indica l’anno

Congratulazioni per aver raggiunto il vostro primo traguardo!

Lo shortcode appena creato non è associato a nessuna variabile $attributes o $content.
Imparerete ad usarle negli esempi seguenti.

Esempio 2: Shortcode per un Pulsante di Call-To-Action

Creiamo ora uno shortcode personalizzabile per un pulsante di call-to-action. Anche questo sarà uno shortcode self-closing (scusa $contento, devi aspettare fino al prossimo punto).

Voglio che gli utenti siano in grado di personalizzare le dimensioni e il colore del pulsante CTA con gli attributi dello shortcode.

Poiché l’output finale è un pulsante, si possono usare i suoi attributi HTML come href, id, class, target e label per personalizzarlo con facilità.

Potete utilizzare gli attributi id e class per cambiare lo stile del pulsante, dato che sono entrambi comuni selettori CSS.

Stanco di un host lento per il tuo sito WordPress? Forniamo server velocissimi e un supporto di livello mondiale da parte di esperti WordPress, 24 ore su 24, 7 giorni su 7. Dai un’occhiata ai nostri piani

Qui non avvolgerò la mia funzione handler, così sarà più semplice da spiegare.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Woah, c’è molto da disfare qui. Vi spiegherò tutto riga per riga, in modo che possiate capire come funziona.

Se desiderate impostare il link predefinito come URL della homepage del sito, potete utilizzare la funzione WordPress home_url().

Proviamo ad usare lo shortcode così com’è, senza definire alcun attributo, e vediamo cosa viene fuori.

Aggiungo lo shortcode a un widget di testo della barra laterale per testarlo.

Aggiungo lo shortcode a un widget di testo della barra laterale per testarlo.

Se vi state chiedendo a cosa servono le doppie parentesi quadre ([[cta_button]]), si tratta delle cosiddette escaping shortcode. Questi vi aiutano ad emettere qualsiasi shortcode registrato nel vostro sito come se fosse testo normale, come nell’immagine qui sotto.

Risultato dello shortcode per un pulsante CTA: funziona come previsto

Risultato dello shortcode per un pulsante CTA: funziona perfettamente, come previsto

L'output HTML del pulsante CTA senza attributi

L’output HTML del pulsante CTA senza attributi

Gli utenti possono personalizzare la dimensione e il colore del pulsante grazie allo shortcode. Abbiamo già impostato i loro valori di default nella funzione handler, ma è necessario registrare e accodare il foglio di stile nella lista delle risorse disponibili. Questo foglio di stile dovrebbe contenere tutte le classi definite nello shortcode.

Potete impostare queste classi anche nel foglio di stile globale del vostro tema, ma vi consiglio di caricarle separatamente. Questo assicura che anche se cambiate o aggiorna il tema di WordPress, queste classi continueranno a caricarsi insieme allo shortocode.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

La funzione salcodes_enqueue_scripts() definisce la variabile globale $post, e quindi conferma due condizioni attraverso le seguenti:

Se entrambe le condizioni sono vere, la funzione registra e accoda il foglio di stile style.css incluso nella cartella CSS. La funzione plugin_dir_url( $file ) facilita l’ottenimento dell’URL della directory del plugin.

Non vi mostrerò il codice CSS qui, ma potete trovarlo nel codice sorgente collegato alla fine di questa sezione.

Infine, testiamo lo shortcode [cta_button] aggiungendolo al contenuto del post:

Notate il link personalizzato, il colore, la dimensione e gli attributi dell'etichetta.

Notate il link personalizzato, il colore, la dimensione e gli attributi dell’etichetta.

L’immagine sottostante mostra come appare il pulsante CTA sul frontend:

Il pulsante CTA ha ora un nuovo URL, colore, dimensione ed etichetta.

Il pulsante CTA ha ora un nuovo URL, colore, dimensione ed etichetta.

Ora che avete imparato a definire gli attributi personalizzati e ad includere gli stili, potete aggiungere varie altre funzionalità al vostro shortcode per il pulsante CTA. Ad esempio, potete dare agli utenti la possibilità di aggiungere animazioni, effetti hover e vari altri stili di pulsante.

Esempio 3: Shortcode Che Usa $content

Per il nostro esempio finale, costruiamo uno shortcode enclosing chiamato[boxed] che visualizza qualsiasi contenuto incluso fra i suoi tag in un box con titoli colorati.

Cominciamo registrando lo shortcode e definendo la sua funzione di handler:

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

In questo esempio, modifichiamo il contenuto utilizzando gli stili CSS in linea.

Gli stili per tutte le classi utilizzate all’interno dello shortcode sono registrati e accodati come abbiamo fatto nell’esempio precedente.

Ma quando due shortcode usano lo stesso foglio di stile significa fare in modo di caricarlo anche se uno solo dei due viene usato. Quindi, aggiorniamo la funzione salcodes_enqueue_scripts():

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

Ora prendiamo il nostro shortcode [boxed] e facciamogli fare un giro.

Aggiunta dello shortcode con riquadro insieme a un titolo, title_color e gli attributi colore.

Aggiunta dello shortcode con riquadro insieme a un titolo, title_color e gli attributi colore.

La schermata sottostante mostra l’output ottenuto:

Non è poi così difficile ottenere un box carino!

Non è poi così difficile ottenere un box carino!

Ora che avete imparato a creare i vostri shortcode, potete pensare creativamente e dar loro il vostro tocco personale. Non dimenticate di condividere le vostre creazioni con noi!

Se volete, potete scaricare il codice sorgente dello Shortcode Plugin da qui.

Gli Shortcode di WordPress: Pro e Contro

I Pro

I Contro

Shortcode e Blocchi di Gutenberg

L’introduzione di Gutenberg ha ridotto il fascino degli shortcode. Gli utenti possono ora aggiungere blocchi direttamente dall’interfaccia dell’editor, invece di occuparsi dei markup degli shortcode, a prescindere dalla loro semplicità.

E se desiderate aggiungere degli shortcode, Gutenberg dispone anche di un blocco appositamente dedicato. I blocchi sono i nuovi shortcode.

“Se si può fare con uno shortcode, si può fare come un blocco”. – James Huff, Happiness Engineer in Automattic

Questo spiega perché tutti i popolari shortcode vengono convertiti in blocchi. Molti sviluppatori di WordPress si sono orientati a far funzionare i loro prodotti e servizi esclusivamente con l’editor a blocchi (Gutenberg).

Ma questo non significa che sia la fine del mondo per gli shortcode. Il core team di WordPress ha promesso molti miglioramenti all’editor a blocchi, che si possono già vedere nel tema Twenty Twenty; ma fino ad allora, gli shortcode sono qui per rimanere!

Fare di più con meno, dite? È possibile con gli shortcode di WordPress! Imparate cosa sono e come crearne di vostri con questa guida approfondita. La vita è troppo breve per non usare shortcodes〚〛💪Click to Tweet

Sommario

Aggiungere funzionalità complesse ovunque nel vostro sito WordPress è facile grazie agli shortcode. Forniscono agli utenti dei tag facili da digitare che potete utilizzare senza temere di dovervi destreggiare con del codice complicato.

Anche se non ci sono shortcode nella vita, ci sono sicuramente molte shortcode da usare in WordPress. I nostri preferiti sono Shortcodes Ultimate e Shortcodes di Angie Makes.

E se non riuscite a trovare quello che cercate, potete crearne uno voi stessi.

Potete anche usare uno shortcode per creare il vostro codice personalizzato utilizzando il plugin Shortcoder. Si prenderà cura di tutto l’essenziale al postro costro. E ricordate: la vita è breve, usate le scorciatoie!


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24×7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani