![[mio-shortcode], tramite add_shortcode,() diventa Risultato del mio shortcode](https://www.andrearonchetti.it/wp-content/uploads/2018/06/shortcode.jpg)
Gli shortcode sono una funzionalità di WordPress che consente di inserire, nelle pagine e nei post, del codice html elaborato in modo dinamico. Sono particolarmente utili quando abbiamo un codice da replicare in diverse parti del sito e, sopratutto, quando serve un’informazione elaborata al caricamento la pagina. Sono impiegati da moltissimi plugin, tra cui Contact Form 7 e i pagebuilder.
In questo articolo vediamo come si costruisce uno shortcode.
Per agganciare del codice Php a WordPress leggere Come estendere le funzionalità di WordPress in modo personalizzato.
Una funzione chiamata tramite una stringa
Lo shortcode, in fin dei conti, esegue una funzione che restituisce un risultato. Gli viene assegnato un nome (tassativamente univoco) e gli si aggancia una funzione utilizzando add_shortcode(‘nome-shortcode’,’nome_funzione_php’).
Una volta che lo shortcode è così impostato la funzione associata viene eseguita quando WordPress, scansionando il contenuto da stampare a video, riconosce una stringa del tipo [nome-shortcode (…)]. Il valore prodotto sostituirà la stringa dello shortcode.
Struttura di uno shortcode
Uno shortcode è un tag, racchiuso tra partentesi quadrate, così strutturato:
- nome dello shortcode;
- parametri (opzionali);
- contenuto (opzionale).
Questa è la sintassi: [nome-shortcode parametro=”valore” parametro2=”valore2” …]contenuto[/nome-shortcode]
Lo shortcode non deve, necessariamente, avere dei parametri e racchiudere un contenuto.
Utilizzare uno shortcode per stampare i giorni mancanti a una scadenza
Per capire meglio il funzionamento dello shortcode partiamo da un semplice esempio. Supponiamo di pubblicare un’offerta sul nostro sito e di dover calcolare al momento quanti giorni mancano alla sua scadenza. Vediamo alcune modalità differenti per implementare questa funzionalità sfruttando gli shortocode in modi diversi.
Shortcode semplice: calcolare il numero di giorni rispetto a una data statica predefinita.
In questo caso creeremo uno shortcode semplice che calcolerà il numero dei giorni mancanti al 30 Giugno 2018, assumendo, come data odierna, il 25 Giugno 2018.
Cominciamo con l’associare lo shortcode alla sua funzione:
add_shortcode('n-giorni','calc_n_giorni');
E ora vediamo la funzione.
function calc_n_giorni(){ //array con i valori della scadenza $exp=array( 'H'=>8, 'i'=>0, 's'=>0, 'n'=>6, 'j'=>30, 'Y'=>2018, ); //array con i valori della data di partenza: i parametri della data sono ottenuti con date(), l'orario è impostato di default $today=array( 'H'=>8, 'i'=>0, 's'=>0, 'n'=>date('n'), 'j'=>date('j'), 'Y'=>date('Y'), ); //timestamp della scadenza $time_exp=mktime($exp['H'],$exp['i'],$exp['s'],$exp['n'],$exp['j'],$exp['Y']); //timestamp della data odierna $time_today=mktime($today['H'],$today['i'],$today['s'],$today['n'],$today['j'],$today['Y']); //timestamp del lasso di tempo tra le due date $time_diff=$time_exp-$time_today; //lasso di tempo in giorni $n_giorni=$time_diff/86400; //resituzione del numero dei giorni return $n_giorni; }
La funzione è molto semplice: ricava il timestamp della data di scadenza e della data odierna, calcola la differenza tra i due timestamp e lo divide per il numero dei secondi che compongono un giorno. Il risultato è un numero intero, dato che l’orario impostato per le due date è identico.
Attenzione: se tra le due date si verificasse il passaggio dall’ora legale all’ora solare, e viceversa, il risultato verrebbe falsato dalla differenza di un’ora, in più o in meno. In questo caso occorrerebbe impostare il timezone oppure, dato che il lasso di tempo è in giorni, andrebbe arrotondato a intero il valore della divisione.
Nell’editor avremo “L’offerta scade il 30 Giugno, tra [n-giorni] giorni” e nel frontend “L’offerta scade il 30 Giugno, tra 5 giorni”.
Questo shortcode è creato in modo molto semplice, ma lavorerà esclusivamente sulla scadenza del 30 Giugno. Sarebbe molto più utile, invece, poter impostare una data custom.
Shortcode con parametro: calcolare il numero di giorni rispetto a una scadenza specificata nell’editor
Le scadenze da impostare in un sito potrebbero molteplici: si rende così necessario riutilizzare lo shortcode con date differenti; a questo scopo tornano utili i parametri. Lo shortcode andrebbe scritto così: [n-giorni data=”29-6-2018″]
Qui la scadenza è di un giorno prima rispetto a quella dell’esempio precedente. Vediamo adesso la funzione calc_n_giorni($atts) parametrizzata.
function calc_n_giorni($atts){ $arr_data=explode("-",$atts['data']); //array con i valori della scadenza $exp=array( 'H'=>8, 'i'=>0, 's'=>0, 'n'=>$arr_data[1], 'j'=>$arr_data[0], 'Y'=>$arr_data[2], ); //array con i valori della data di partenza: i parametri della data sono ottenuti con date(), l'orario è impostato di default $today=array( 'H'=>8, 'i'=>0, 's'=>0, 'n'=>date('n'), 'j'=>date('j'), 'Y'=>date('Y'), ); //Calcolo e restituzione del numero dei giorni [...] }
Qualcosa è cambiato. Troviamo il parametro $atts, che WordPress valorizzerà come array associativo, usando come chiave la stringa prima del “=” e come valore quella subito dopo; volendo si possono passare più parametri. La stringa data=”29-6-2018″ per WordPress sarà $atts[‘data’]=”29-6-2018″.
Nello specifico viene scomposta la stringa in un array con i tre valori della data che vengono passati alle relative chiavi nell’array della scadenza. Il resto del codice è lo stesso dell’esempio precedente, l’output quindi sarà il medesimo, tranne che riporta un numero inferiore data la scadenza più vicina.
Shortcode con parametro opzionale: la data di default è il 30 Giugno 2018 ma è possibile impostarne una a piacere
Mettiamo il caso che la maggioranza delle nostre offerte scada il 30 Giugno 2018, quindi, sebbene questa debba essere la data predefinita, ci serve poter impostare una scadenza differente. Qua ci viene in aiuto la funzione shortcode_atts(array lista_attributi, $atts, nome_shortcode): restituisce un array di attributi; tra questi vengono sovrascritti quelli specificati dall’utente. In buona sostanza imposta i parametri necessari: a quelli non indicati vengono assegnati i valori di default specificati nell’array. Nel nostro caso avremo:
function calc_n_giorni($atts){ $a=shortcode_atts(array( 'data'=>'30-6-2018' ),$atts,'n-giorni'); $arr_data=explode("-",$atts['data']); //array con i valori della scadenza $exp=array( 'H'=>8, 'i'=>0, 's'=>0, 'n'=>$arr_data[1], 'j'=>$arr_data[0], 'Y'=>$arr_data[2], ); //array con i valori della data di partenza: i parametri della data sono ottenuti con date(), l'orario è impostato di default $today=array( 'H'=>8, 'i'=>0, 's'=>0, 'n'=>date('n'), 'j'=>date('j'), 'Y'=>date('Y'), ); //Calcolo e restituzione del numero dei giorni [...] }
Pertanto, se non viene specificato l’attributo data, WordPress considererà la scadenza 30 Giugno 2018, altrimenti vale quella impostata nello shortcode.
Shortcode, con parametro opzionale, avente tag di apertura e chiusura: il contenuto viene manipolato
Lasciando sempre come scadenza predefinita il 30 Giugno 2018 con la possibilità di cambiarla, adesso vogliamo che la frase contenuta tra il tag di apertura e di chiusura dello shortcode venga stampata solamente qualora l’offerta non scadesse oggi o non fosse già scaduta, specificando il numero dei giorni calcolati usando la sottostringa {{n}}.
Questo è lo shortcode: [n-giorni data=”30-6-2018″]L’offerta scade il 30 Giugno, ancora {{n}} giorni disponibili.[/n-giorni]
Rivediamo la funzione.
function calc_n_giorni($atts,$content){ // Valorizzazione dei parametri con shortcode_atts [...] // Creazione degli array con la data di scadenza e quella ordierna [...] // Calcolo del numero dei giorni [...] // Stabiliamo il contenuto da stampare if($n_giorni==0){ return "L'offerta scade oggi."; } if($n_giorni<0){ return ""; } $content=str_replace('{{n}}',$n_giorni,$content); return $content; }
In questo caso calc_n_giorni($atts,$content) accetta un secondo parametro, $content. Si tratta della stringa inserita tra l’apertura e la chiusura dello shortcode.
Al termine del calcolo si stabilisce cosa deve restituire la funzione, il cui valore va a sovrascrivere, all’interno della pagina, tutta la stringa che parte dall’apertura dello shortcode fino alla sua chiusura.
- Se la differenza tra i due giorni fosse 0 significherebbe che la data di scadenza coinciderebbe con quella odierna: al posto del contenuto di default WordPress stamperebbe “L’offerta scade oggi.”.
- Se, invece, il lasso di tempo fosse negativo verrebbe restituita una stringa vuota e a video non si leggerebbe nulla.
- Qualora la scadenza debba ancora venire comparirebbe la stringa contenuta tra l’apertura e la chiusura dello shortcode; nel contenuto verrebbe cercata la sottostringa {{n}}, alla quale sarebbe sostiuito il numero dei giorni calcolato.
Basta un po’ di conoscenza di WordPress e Php
Creare e utilizzare gli shortcode non è assolutamente difficile, è sufficiente conoscere il Php, naturalmente, e le API di WordPress. Saper scrivere degli shortcode personalizzati può, in certi casi, far risparmiare allo sviluppatore l’installazione di plugin che offrirebbero diverse funzionalità in più, non utili nel progetto in fase di sviluppo e che, di contro, verrebbero caricate da WordPress, appesantendo il sito.
Per sperimentare questa funzionalità si consiglia un’installazione in locale di WordPress; inizialmente, per fare qualche prova, va bene scrivere il codice nel functions.php del tema ma, quando il codice è completato e lo si vuole conservare, è meglio scriverlo facendo un plugin che non risenta degli aggiornamenti.
Per approfondire gli shortcode:
Per sapere come aggiungere del codice personalizzato in un sito WordPress: