In questo articolo vi spiego come creare uno shortcode in Wordpress e lo faccio per due motivi principali. Primo perché gli shortcode sono una funzionalità utilissima di WordPress, largamente utilizzati anche dai plugin. Secondo perché sono veramente semplici da creare.
Cosa è uno shortcode
Gli shortcode sono delle brevi stringhe di testo racchiuse tra parentesi quadre (ad esempio [shortcode]) che, se inserite nel testo di un articolo, verranno sostituite automaticamente da WordPress con un contenuto più lungo e complesso da voi scelto, quando l’articolo viene visualizzato. Potete considerarli come dei segnaposto o delle abbreviazioni.
Gli shortcode sono anche in grado di accettare uno o più attributi che ci permettono di modificare di volta in volta il contenuto con cui vengono sostituiti.
Perché creare uno shortcode
Gli impieghi degli shortcode sono veramente infiniti, il limite è solo la vostra fantasia. Se alla fine degli articoli siete soliti inserire un link con il riferimento alla fonte dell’articolo, potete utilizzare uno shortcode. Se volete inserire una citazione casuale scelta tra una lista, potete farlo con uno shortcode. Potete usare uno shortcode anche se volete inserire un banner pubblicitario se non state già utilizzando un plugin che lo fa per voi offrendovi, guarda un po’, degli shortcode già fatti.
In linea generale può essere utile creare dei vostri shortcode quando vi accorgete di ripetere spesso in articoli diversi uno stesso contenuto più o meno articolato. In questo modo, associando questo contenuto ad uno shortcode, potrete inserirlo in un articolo nel tempo che vi ci vuole a digitare [contenuto_lungo_e_articolato]. Inoltre, modificando il testo associato allo shortcode, sarete sicuri anche di modificare tutti i punti dove lo avete inserito senza doverli andare a cercare e modificare uno per uno.
Come creare uno shortcode
Veniamo ora all’aspetto pratico. Per creare uno shortcode è sufficiente lanciare la funzione add_shortcode per associare il testo dello shortcode ad una funzione che ne genererà il contenuto. Di seguito l’esempio più semplice possibile.
// con questo comando associo il testo di uno shortcode ad una funzione
add_shortcode("il_mio_shortcode", "la_mia_funzione");
// la funzione genera il contenuto con cui lo shortcode deve essere sostituito
function la_mia_funzione( $atts ) {
return "Il mio primo shortcode";
}Questo pezzo di codice può essere inserito o all’interno di un plugin che avete creato appositamente o, più semplicemente, all’interno del file functions.php. Questo file è il punto più immediato per aggiungere funzionalità a WordPress anche se ha lo svantaggio di essere specifico per ogni tema. Per cui se doveste cambiare tema, ricordatevi di ricopiare il codice che avete aggiunto.
Per modificare il file functions.php potete utilizzare l’editor integrato di WordPress dal menù “Aspetto > Editor“, selezionando poi dal menù a tendina il vostro tema e quindi cliccando su “Funzioni del tema” nella colonna di destra con la lista dei file.
Come creare shortcode parametrici
Come già anticipato uno shortcode può accettare uno o più attributi che ne modificano il comportamento a seconda delle esigenze. Inoltre gli shortcode possono essere utilizzati come dei tag HTML per racchiudere un contenuto che verrà poi passato alla funzione associata come parametro aggiuntivo.
Per capire meglio questi due aspetti conviene fare un esempio. Fate caso ai due box colorati con le diciture “Principiante” e “Intermedio” che ho inserito all’inizio degli ultimi due paragrafi per indicare la difficoltà della sezione. Per inserirli ho creato uno shortcode che si usa nel modo seguente:
[ff_alert type="danger"]Intermedio[/ff_alert]
In questo modo sto passando allo shortcode l’attributo “type” con valore “danger” per specificare la colorazione da applicare al box. La stringa racchiusa tra apertura e chiusura dello shortcode, ovvero la stringa “Intermedio”, rappresenta il contenuto che dovrà essere inserito nel box. Ma vediamo come possono essere utilizzati questi dati all’interno della funzione associata allo shortcode.
add_shortcode("ff_alert","ff_alert_function");
function ff_alert_function($atts, $content="") {
extract(
shortcode_atts(array(
'type' => 'info',
), $atts)
);
return '<div class="'.$type.'">'.$content.'</div>';
}Come vedete la funzione associata allo shortcode, in questo caso “ff_alert_function”, accetta due parametri. Il primo è un array associativo, ovvero chiave-valore, contenente gli attributi passati allo shortcode in fase di inserimento nell’articolo. In questo caso conterrà un’unica chiave, “type” con valore “danger”. Il secondo parametro è invece il contenuto dello shortcode, ovvero tutta la stringa racchiusa al suo interno. Sempre con riferimento all’esempio, la variabile $content conterrà la stringa “Intermedio”.
In questo modo ho potuto costruire un div con una classe CSS specifica che si chiama come l’attributo “type”, ovvero “alert-danger”, inserendo poi la variabile $content come contenuto del div.
Fate caso anche all’utilizzo della funzione “shortcode_atts”. Questa è una funzione di WordPress che prende in input due array associativi: il primo contiene i nomi dei parametri validi per quello shortcode, associati al loro valore di default. Il secondo array sono gli effettivi parametri di input dello shortcode. Questa funzione combina gli attributi dello shortcode indicati dall’utente con gli attributi supportati, utilizzando i valori predefiniti quando necessario e rimuovendo eventualmente gli attributi non supportati. In ouput restituirà l’array così combinato.
