Shortcode WordPress, cosa sono e come si creano?

Gli shortcode sono una delle funzioni più utilizzate in WordPress, li avrai trovati spesso integrati in temi premium oppure in plugin come il Visual Composer o anche creando una galleria di immagini in WordPress.

Ma cosa sono esattamente gli shortcode e come si creano?

Che cos’è uno shortcode WordPress

Uno shortcode WordPress altro non è che un piccolo codice, inserito nell’editor di WordPress durante la creazione di un contenuto, ad esempio un articolo oppure una pagina, aggiungendo un codice composto dalla seguente sintassi:

[shortcode opzione=“valore”] 

Il quale viene successivamente elaborato dal CMS per generare del codice più complesso.

Uno shortcode può anche accettare dei parametri, che vengono processati per estenderne le funzionalità.

L’inserimento di uno shortcode può avvenire in due modi, il primo è quello di scrivere direttamente il codice, seguendo le indicazioni fornite dallo sviluppatore mentre il secondo è quello di utilizzare un pulsante all’interno dell’editor di WordPress, il quale permette di generare lo shortcode, in base ai parametri inseriti.

Questo pulsante non sempre è presente, poiché dipende dallo sviluppatore dello shortcode.

Come si crea uno shortcode WordPress

Puoi definire un nuovo shortcode, aggiungendo questa linea all’interno del file functions.php del tuo tema, oppure creando un nuovo plugin per WordPress

add_shortcode("nomeshortcode", "funzioneshortcode");

Successivamente inserisci la funzione PHP che genererà il codice HTML dello shortcode:

function funzioneshortcode( $atts ) {  
return 'Contenuto dello shortcode';  
}

Adesso puoi richiamare lo shortcode in un post oppure all’interno di una pagina WordPress, aggiungendo:

[nomeshortcode]

In questo modo lo shortcode restituirà il valore ‘Contenuto dello shortcode‘.

Come generare shortcode WordPress più complessi

L’esempio che ti ho precedentemente mostrato è abbastanza semplice, per creare uno shortcode più complesso tramite l’utilizzo di attributi, è necessario sostituire la funzione PHP:

function funzioneshortcode( $atts ) {  
return 'Contenuto dello shortcode';  
}

con:

function funzioneshortcode( $atts ) { 
	
extract( shortcode_atts( array(
	'valore1' => 'a',
	'valore2' => 'b',
), $atts ) );
 
return $valore1 . ' ' . $valore2;  
}

Gli attributi presenti nello shortcode sono valore1 e valore2.

Se questi non vengono definiti nello shortcode, ad esempio scrivendo:

[nomeshortcode valore1="bianco" valore2="nero" ]

Lo shortcode stamperà solamente i valori di default a e b.

Puoi migliorare ulteriormente la funzione dello shortcode, predisponendolo a visualizzare del contenuto tra il codice di apertura e chiusura dello stesso, in questo modo:

[nomeshortcode valore1="bianco" valore2="nero" ]Contenuto dello shortcode[/shortcode]

sostituendo:

function funzioneshortcode( $atts ) { 
	
extract( shortcode_atts( array(
	'valore1' => 'a',
	'valore2' => 'b',
), $atts ) );
 
return $valore1 . ' ' . $valore2;  
}

con:

function funzioneshortcode( $atts, $content = null ) { 
	
extract( shortcode_atts( array(
	'valore1' => 'a',
	'valore2' => 'b',
), $atts ) );
 
return $content . ' ' . $valore1 . ' ' . $valore2;  
}

Ciò che vedrai all’interno dell’articolo sarà il contenuto dello shortcode, ovvero Contenuto dello shortcode rappresentato dalla variabile $content, seguito dal contenuto dei due parametri valore1 e valore2.

Come creare uno shortcode WordPress che contiene il contenuto di un altro shortcode

Potresti avere anche la necessità di racchiudere uno shortcode all’interno di un altro:

[shortcode_contenitore][shortcode_interno]Contenuto dello shortcode[/shortcode_interno][/shortcode_contenitore]

Per fare questo, devi utilizzare la funzione do_shortcode, all’interno della funzione che gestisce lo shortcode contenitore:

add_shortcode("shortcode_contenitore", "funzione_shortcode_contenitore");

function funzione_shortcode_contenitore( $atts, $content = null ) { 
	
return do_shortcode($content);  

}

La funzione do_shortcode è utile anche per elaborare uno shortcode nel codice di un tema oppure di un plugin, ad esempio all’interno di un template custom di una pagina WordPress.

echo do_shortcode('[shortcode']);

Conclusioni

Grazie a questo articolo, sarai in grado di creare uno shortcode WordPress, senza utilizzare plugin esterni che possono rallentare il tuo sito.

Puoi approfondire quest’argomento leggendo il seguente tutorial su HTML.it, in cui viene spiegato come aggiungere un pulsante all’interno dell’editor di WordPress, semplificando così l’inserimento da parte dell’utente

Se hai suggerimenti oppure dubbi su questa guida, lascia pure un commento 🙂