Creare ed usare shortcode con parametri in WordPress

Gli shortcode di WordPress possono essere considerati delle macro il cui codice viene eseguito da WordPress quando incontra una stringa come [shortcode].

Uno shortcode viene definito in genere nel file functions.php di un tema o all’interno di un plugin ed è costituito sostanzialmente da due parti:

La funzione di riferimento.
La chiamata ad add_shortcode().

function my_shortcode() {
	//contenuto
}
add_shortcode('my-shortcode', 'my_shortcode');

La funzione add_shortcode() riceve come primo parametro il nome del nuovo shortcode e come secondo parametro il nome della funzione di riferimento. Una volta definito uno shortcode possiamo usarlo nei nostri post o pagine. Nel nostro esempio scriveremo [my-shortcode].

Una caratteristica della funzione di riferimento è che in tale funzione va sempre restituito un valore tramite l’istruzione return.

Ma come facciamo a creare ed usare shortcode con parametri in WordPress?
Ebbene la cosa interessante sta proprio nel fatto che la funzione di riferimento accetta parametri che diventano automaticamente parametri dello shortcode, ossia [my-shortcode parametro1="valore" parametro2="valore"].

Per recuperare il valore dei parametri si utilizza la funzione di WordPress shortcode_atts() che abbinata alla funzione extract() trasforma i valori dell’array associativo in variabili che possono essere utilizzate nello shortcode. Queste variabili avranno lo stesso nome delle chiavi dell’array.

Esempio:

function my_shortcode($atts, $content = null) {
    global $post;
    $id = $post->ID;
    $image_id = get_post_thumbnail_id($id);
    $image_url = wp_get_attachment_image_src($image_id);
    $src = $image_url[0];
	extract( shortcode_atts( array(
      'title' => '', // default
      'class' => '', // default
      ), $atts ) );
    return '<img class="' . $class . '" title="' . $title . '" alt="" src="' . $src . '" />';
}
add_shortcode('my-shortcode', 'my_shortcode');

L’output dello shortcode scritto come [my-shortcode title="Test" class="Test"] sarà:

<img class="Test" title="Test" alt="" src="http://sito/wp-content/uploads/2012/10/thumb.jpg" />

Potete trovare maggiori informazioni nella documentazione ufficiale.