Come fare uno shortcode WordPress

Cos’è lo shortcode di WordPress

Lo shortcode di WordPress è un breve codice personalizzato che puoi inserire nell’editor di testo o all’interno di un template file tutte le volte che vuoi. Lo puoi usare per visualizzare un titolo, un paragrafo, la lista dei post del tuo blog, altri oggetti e il contenuto che serve.

[shortcode]

Questa scorciatoia ti evita di scrivere e poi riscrivere svariate linee di codice ogni volta decidi di ripetere l’oggetto. Inoltre hai diverse opzioni che puoi scegliere di attivare o meno per la sua dinamicità.

Lo shortcode WordPress ha poche regole da osservare: deve essere racchiuso tra parentesi quadre, deve avere un nome univoco e all’occorrenza devono essere dichiarate alcune opzioni:

• [shortcode]
• attributi
• valori

[shortcode attributo="valore"]

Come realizzare uno shortcode personalizzato

Sviluppare uno shortcode personalizzato WordPress è molto semplice, richiede solo il tempo necessario alla scrittura del codice di cui hai necessità: più è complesso e più tempo avrai bisogno.

Ipotizziamo che vuoi creare uno shortcode per visualizzare un titolo. Ti basta seguire questi semplici passi:

1. aprire il file functions.php nella root del tuo tema e dichiarare la funzione dello shortcode;
2. assegnare gli attributi opzionali;
3. scrivere il codice html necessario per visualizzare ciò che desideri;
4. richiamare lo shortcode nell’editor del post, oppure inserirlo in un file del tema.

1. Nel tuo file functions.php o in un file alternativo, ma che sia correttamente incluso nel functions.php, dichiara la funzione dello shortcode:

// dichiaro la funzione dello shortcode

add_shortcode( 'my_title', 'my_title_shortcode' );
function my_title_shortcode( $atts ) {
    //
}

Come leggi, il primo attributo ‘my_title’ è il nome dello shortocode che userai nel tuo post, mentre ‘my_title_shortcode’ è il nome della funzione che puoi chiamare come ti pare purché abbia un nome univoco e illuminante.

2. La funzione dello shortcode chiama la variabile $atts da cui si estrae un array di attributi. Questi attributi servono per rendere dinamico l’uso dello shortcode.

add_shortcode( 'my_title', 'my_title_shortcode' );
function my_title_shortcode( $atts ) {
    //inserisco le opzioni
	extract(shortcode_atts(
        array(
			'tag'	=> '',
			'id'	=> '',
			'class'	=> '',
			'text'	=> ''
        ),
        $atts
    ));
}

3. Ora è il momento di scrivere il codice necessario per visualizzare nel front-end il titolo personalizzato dalle tue opzioni.

add_shortcode( 'my_title', 'my_title_shortcode' );
function my_title_shortcode( $atts ) {
    extract(shortcode_atts(
       array(
          'tag' 	=> '',
          'id'  	=> '',
          'class'   => '',
          'text'    => ''
        ),
        $atts
    ));
 
     
    // gestisco le variabili estratte
    $tag ?
       $my_h = $tag :
       $my_h = '1';
     
    $id ?
       $my_id = 'id="'.$id.'"' :
       $my_id = false;
     
    // output
    if ($text) {
       return '<h'.$my_h.' '. $my_id.' class="title '.$class.'">'.$text.'</h'.$my_h.'>';
    }
}

4. Non ti resta che inserire nell’editor dell’articolo il nome del tuo shortcode racchiuso tra parentesi quadre, assegnando a tua scelta i valori di personalizzazione:

[my_title tag="3" id="test" class="text-center" text="Questo è il mio titolo"]

Se devi usare lo shortcode all’interno di un file php del tuo tema, puoi richiamarlo nel modo che segue:

// richiamo lo shortcode nel template file del tema
	
echo do_shortcode('[my_title tag="3" id="test" class="my-class" text="Questo è un titolo personalizzato"]');

Annidare contenuto nello shortcode

Potrebbe servirti di racchiudere un paragrafo o altro contenuto che sarebbe poco gestibile attraverso gli attributi. WordPress dà una semplice soluzione: devi predisporre un tag di chiusura allo shortocode.

[my_shortcode] Il tuo contenuto [/my_shortcode]

Devi però fare alcuni accorgimenti all’esempio del codice sopra:

// dichiriamo la variabile $content come nulla
function my_div_shortcode( $atts, $content = null ) {
	extract(shortcode_atts(
  		array(
  			'class' => '',
  		),
  		$atts
 	));

	// output
	return '<div class="'.$class.'">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'my_div', 'my_div_shortcode' );

Come si può dedurre, hai a disposizione infinite opzioni per rendere dinamica una semplice porzione di codice da utilizzare ovunque e più volte.

Unica limitazione è l’impossibilità di annidare uno shortcode con lo stesso nome. Se ne hai bisogno, devi avere la premura di realizzarne uno apposito:

[shortcode_genitore]
[shortcode_figlio] Questo è il contenuto [/shortcode_figlio]
[/shortcode_genitore]

Per comprendere tutte le potenzialità degli shortcodes ti suggerisco di leggere la documentazione ufficiale di WordPress.