WordPress: creare ed usare gli shortcode

Gli shortcode di WordPress possono essere considerati delle macro il cui codice viene eseguito da WordPress quando incontra una stringa come [shortcode]. In questo articolo vedremo come creare gli shortcode.

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

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

Esempio:


function my_shortcode() {
	//...
}

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. Al contrario, non va mai usato il costrutto echo:


function my_shortcode() {
	
	$html = '<p>Test.</p>';
	
	return $html;
}

add_shortcode('my-shortcode', 'my_shortcode');

Usando adesso il nostro shortcode otterremo:


<p>Test.</p>

Ma la funzione di riferimento accetta anche parametri che diventano automaticamente parametri dello shortcode, ossia [my-shortcode parametro1="valore" parametro2="valore"]. Questo è il segreto dell'utilità degli shortcode in WordPress.

Altra caratteristica è la possibilità di accettare del contenuto, come ad esempio [my-shortcode]Contenuto[/my-shortcode]. In questo caso la sintassi dello shortcode è identica a quella HTML.

Ecco un 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 ) );
      
   $html = '<figure>';
   $html .= '<img src="' . $src . '" title="' . $title . '" class="' . $class . '"/>';
   $html .= (!is_null($content)) ? '<figcaption>' . $content . '</figcaption>' : '';
   $html .= '</figure>';
   
   return $html;
      
    
}

add_shortcode('my-shortcode', 'my_shortcode');

La funzione di WordPress shortcode_atts() viene usata con la funzione extract() in modo che i valori dell'array associativo diventino variabili che possono essere utilizzate nello shortcode. Le variabili avranno lo stesso nome delle chiavi dell'array.

Un output di questo shortcode scritto come [my-shortcode title="Test" class="Test"]Test[/my-shortcode] potrebbe essere:


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

Potete trovare maggiori informazioni nella documentazione ufficiale.

Torna su