Come creare uno shortcode in WordPress: la guida completa

Lo shortcode è uno strumento essenziale in WordPress e consente anche ai non addetti ai lavori di innestare codice, talvolta anche complesso, dentro il testo dei vostri articoli senza dover pensare alla programmazione.

Scopriamo insieme quali sono le caratteristiche dello shortcode e come usarlo nel modo corretto in questa guida completa.

Il principio di funzionamento di uno shortcode si basa su una sintassi di questo tipo:

[NOME SHORTCODE parametro=”value-parametro”]

Ovviamente i parametri sono facoltativi ma uno shortcode senza parametri  non ha molto senso.

Vediamo la composizione di uno shortcode base.

NOTA: TUTTO il codice presente va messo dentro il file functions.php del vostro tema.

//SHORTCODE BASE
add_shortcode( 'TrgBase', 'TrgBase_func' );
function TrgBase_func( $atts ) {
extract(  shortcode_atts( array(
  'text' => ''//default param
), $atts ) );
return'<p>'.$text.'</p>';
}
//SHORTCODE BASE

Come vedete si inizia a dichiarare la funzione dello shortcode dove al suo interno si dichiarano i parametri dello stesso ($atts) dando ai vari parametri un valore di default.

La funzionalità extract permette di “estrarre i parametri e renderli disponibili nel return sotto forma di variabile pronta all’uso.

Alla fine della funzione si mette un semplice return dove andremmo a comporre l’html che dovrà restituire lo shortcode.

Completa il cerchio la dichiarazione:

add_shortcode( 'TrgBase', 'TrgBase_func' );

Che di fatto aggiunge lo shortcode nel tema e lo rende utilizzabile. 

Nel nostro esempio molto elementare qui sopra andando ad inserire all’interno dell’editor di wordpress questo codice:

[TrgBase text=”ciao”]

All’interno dell’articolo apparirà:

<p>Ciao</p>

Come creare shortcode complessi WordPress

Ora andremo a creare qualcosa di più complesso in modo tale che abbiate una base più solida per personalizzare il codice in base alle vostre reali esigenze.

Nello shortcode qui sotto andremo a creare un semplice embed di un video youtube.

//SHORTCODE EMBED YOUTUBE
add_shortcode( 'TrgYoutube', 'TrgYoutube_func' );
function TrgYoutube_func( $atts ) {
extract(  shortcode_atts( array(
'videourl' => ''//default param
), $atts ) );
return'<iframe src="\'.$videourl.\'" frameborder="none" width="100%" height="100%" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
}
//SHORTCODE EMBED YOUTUBE

Come vedete il funzionamento è uguale al precedente, con la differenza che l’html nel return è sicuramente più complesso del precedente.

Anche in questo caso per “usare” quanto vedete qui sopra vi basterà inserire nell’articolo o nella pagina del vostro sito wordpress:

[TrgYoutube videourl=”https://url-embed-youtube” ]

Nel caso aveste bisogno di “usare” una porzione di testo inserita dentro l’articolo di wordpress ci viene in aiuto l’enclosing shortcode.

Il suo funzionamento è similare a quanto visto fatta eccezione per la struttura di base:

//ENCLOSING SHORTCODE
function caption_shortcode( $atts, $content = null ) {
return '<span class="caption">' . $content . '</span>';
}
add_shortcode( 'caption', 'caption_shortcode' );

//ENCLOSING SHORTCODE

Come vedete in questo caso per richiamare lo shortcode dovremo usare:

Targetweb

per ottenere come risultato:

<span class="caption">Targetweb</span>

WordPress: come generare e gestire shortcode multipli

Esistono casi ancora più complessi come l’uso di shortcode multipli nella stessa pagina o articolo.

In questo caso la linea guida principale è differenziare eventuali div ID o variabili js (nel caso nell’html ci siano script).

//SHORTCODE MULTIPLO EMBED YOUTUBE
add_shortcode( 'MultipleYoutube', 'MultipleYoutube_func' );
function MultipleYoutube_func( $atts ) {
  extract(  shortcode_atts( array(
    'videourl' => ''
  ), $atts ) );

  $rand = rand(0,99999);

  foreach ($atts as $keyshortcode => $shortcode) {
  
  //Nel caso aveste id da popolare dovete differenziali con il numero randomico generato. es. <div id="test'.$rand.'"></div>
  return '';

  }//foreach
//SHORTCODE MULTIPLO EMBED YOUTUBE

Come vedete da questo breve esempio in questo caso ho usato una variabile random per dare alle variabili js / ID html un nome univoco.

Per processare tutti gli attributi ho semplicemente messo il codice di return all’interno del classico ciclo foreach per processare tutto l’array.

Conclusioni

Se questa guida vi è stata utile condividetela con i vostri amici e colleghi oppure se avete problemi posso aiutarvi… lasciate un commento!

Nel caso ne abbiate bisogno posso anche farvi una consulenza per il vostro progetto WordPress, basta scrivermi  qui.