Categorie
Web development WordPress

Shortcode WordPress: cosa sono e come crearne di nuovi

Gli shortcode WordPress sono il metodo per incorporare funzionalità all’interno dei contenuti del CMS.

Essi permettono infatti di richiamare delle funzioni usando una parola chiave racchiusa tra parentesi quadre.

Un esempio di shortcode built-in (già compreso nelle funzionalità di WordPress) è

[gallery]

Questo shortcode permette di mostrare un galleria di immagini contenute nei media.

Gli shortcodes built-in

WordPress comprende di default i seguenti shortcodes:

Non mi soffermerò sulle funzionalità dei singoli shortcode, ma ho incluso i link alla documentazione ufficiale.

Le tipologie esistenti di WordPress shortcode

In WordPress possono essere definiti diversi tipi di shortcode: shortcode semplice, shortcode con attributi, shortcode con tag di apertura e chiusura.

Shortcode semplici

Sono quelli richiamabili tramite un tag circondato da parentesi quadre, come nel primo esempio.

Shortcode con attributi

Sono quelli richiamabili tramite un tag e parametri aggiuntivi.
Il comportamento dello shortcode varierà in funzione dei parametri inseriti.

[gallery id="123" size="medium"]

Shortcode con tag di apertura e chiusura

Sono quelli che prendono del contenuto in input per poterlo elaborare e ritornare come output.
Un esempio di questo tipo di shortcode è [caption].
guida wordpress

Aggiungere uno shortcode personalizzato

Usando le Shortcode API potrai implementare degli shortcode custom.

Nel seguito illustrerò alcuni esempi pratici per implementare alcuni shortcode custom.

Tale codice può essere inserito in vari punti di WordPress, ma per semplicità consiglio di inserirlo nel file functions.php del tema attivo (percorso /wp-content/themes/tema-attivo/functions.php).

Integrare lo shortcode in maniera strutturata

Il metodo migliore per includere uno shortcode personalizzato in WordPress è integrare il codice che ne implementa le funzionalità in un plugin dedicato.

Per farlo, sarà sufficiente utilizzare il codice che trovi in questo articolo ed inserirlo nel file php del plugin, seguendo le indicazioni contenute nell’articolo dedicato alla creazione di plugin WordPress.

Disclaimer

Facendo un errore di modifica in functions.php è molto probabile ottenere un errore fatale di PHP, causando la non raggiungibilità del sito (errore 500). Per questo motivo, consiglio di fare queste operazioni dopo aver fatto un backup del file functions.php, e, se possibile, farlo su un sito non in produzione (non pubblicamente esposto).

Implementare uno shortcode WordPress personalizzato

Ecco quindi alcuni esempi. Assicurati di aver letto il disclaimer.

Implementazione shortcode semplice

Di seguito l’implementazione di uno shortcode semplice.

function semplice_func( $atts ){
	return "ecco uno shortcode semplice";
}
add_shortcode( 'semplice', 'semplice_func' );

Il codice precedente quindi renderà usabile lo shortcode [semplice], che se usato ritornerà il messaggio “ecco uno shortcode semplice”.

Implementazione shortcode con attributi

Di seguito l’implementazione di uno shortcode con attributi.

function attributi_func( $atts ) {
	$a = shortcode_atts( array(
		'foo' => 'something',
		'bar' => 'something else',
	), $atts );
	return "foo = {$a['foo']}";
}
add_shortcode( 'attributi', 'attributi_func' );

Il codice precedente rende disponibile lo shortcode “[attributi]” che supporta due attributi: [“foo” e “bar”]. Entrambi gli attributi sono opzionali e assumeranno i valori predefiniti [foo=”something” bar=”something else”] se non diversamente specificato durante l’utilizzo dello stesso.
Questo shortcode ritornerà “foo = {il valore dell’attributo foo}”.

Implementazione shortcode con tag di apertura e chiusura

Di seguito l’implementazione di uno shortcode con tag di apertura e chiusura.

function sottotitolo_shortcode( $atts, $content = null ) {
	return '<span class="sottotitolo">' . $content . '</span>';
}
add_shortcode( 'sottotitolo', 'sottotitolo_shortcode' );

Il codice precedente renderà disponibile lo shortcode [sottotitolo][/sottotitolo].
Questo shortcode ritornerà “<span class=”sottotitolo”>ciò che è incluso tra [sottotitolo] e [/sottotitolo]</span>”.

Seguimi su