Avrai sicuramente avuto modo di vedere com’è fatto e come funziona uno shortcode utilizzando un plugin oppure un tema premium. Ma come mai, per chi utilizza #WordPress, sono così comodi? Come hanno fatto a raggiungere questo livello di popolarità?
La risposta è unica: semplicità di utilizzo da parte dell’utente finale e degli sviluppatori.
Approfondiamo quindi l’argomento andando a vedere nel dettaglio che cos’è e come si crea uno shortcode.
Come si presentano gli shortcodes?
Gli shortcodes sono dei piccoli codici racchiusi tra parentesi quadre:
[googlemap] – Potrebbe essere lo shortcode per inserire una mappa, predefinita, in un punto specifico della pagina
Questa è la forma più semplice in cui si mostrano: senza parametri o valori aggiuntivi. Il contenuto infatti viene definito a priori e “inserito” dallo sviluppatore.
Come funziona uno shortcode?
Programmare uno shortcode richiede 2 passaggi:
- Creazione di una funzione in cui vengono ricevuti dei parametri, se presenti, e viene elaborato il codice
- Associazione di questa funzione ad uno shortcode specifico tramite la funzione add_shortcode da inserire il codice all’interno del file functions.php
Per mantenere il codice più ordinato è meglio creare un file .php separato (chiamato per esempio shortcodes.php) ed includerlo nel file functions.
Esempio pratico per creare un shortcode
Proviamo ora a realizzare un semplice shortcode per inserire del Lorem Ipsum all’interno di un post/pagina scrivendo [lorem].
Vediamo quindi, seguendo i 3 steps sopraindicati, come procedere.
1. Prima di tutto dobbiamo creare la funzione vera e propria che restituirà il nostro testo ed aggiungerla nel file functions.php:
function lorem_function() {
return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nulla vitae lacus mattis volutpat eu at sapien. Nunc interdum congue libero, quis laoreet elit sagittis ut. Pellentesque lacus erat, dictum condimentum pharetra vel, malesuada volutpat risus. Nunc sit amet risus dolor. Etiam posuere tellus nisl. Integer lorem ligula, tempor eu laoreet ac, eleifend quis diam. Proin cursus, nibh eu vehicula varius, lacus elit eleifend elit, eget commodo ante felis at neque. Integer sit amet justo sed elit porta convallis a at metus. Suspendisse molestie turpis pulvinar nisl tincidunt quis fringilla enim lobortis. Curabitur placerat quam ac sem venenatis blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed ligula nisl. Nam ullamcorper elit id magna hendrerit sit amet dignissim elit sodales. Aenean accumsan consectetur rutrum.';
}2. Attraverso la funzione add_shortcode(), che inseriamo a seguire nel file functions, assoceremo lorem_ipsum() al nostro shortcode.
La funzione richiede 2 parametri:
- il primo che corrisponde al nome da inserire tra le parentesi quadre
- il secondo è il nome della funzione da richiamare
Scriveremo quindi:
add_shortcode('lorem', 'lorem_function');A questo punto inserendo [ lorem ] dentro ad un post o una pagina verrà stampato il testo generato dalla nostra funzione.
Aggiungere dei parametri
Abbiamo appena visto come realizzare uno shortcode senza parametri, che mostrerà sempre il medesimo risultato. Vediamo ora come, per esempio, possiamo generare un’immagine casuale di dimensioni diverse definendo come parametri larghezza ed altezza desiderate.
Il nostro shortcode finale sarà:
[picture width="500" height="500"]
Per realizzare il nostro snippet faremo riferimento al sito lorempixel.com che ci permetterà di ottenere un’immagine a caso gratuitamente.
Rispetto alla funzione realizzata precedentemente, quella attuale dovrà accogliere i parametri relativi all’altezza ed alla larghezza. Il codice che dovremo andare a scrivere, sempre all’interno del file functions.php sarà:
function random_picture($atts) {
extract(shortcode_atts(array(
'width' => 400,
'height' => 200,
), $atts));
return '<img src="http://lorempixel.com/'. $width . '/'. $height . '" />';
}Vediamo quindi come, per poter usare gli attributi, siano necessarie due funzioni: shortcode_atts(), che combina i parametri ricevuti con quelli definiti nella funzione, ed extract() che estrae gli attributi. Tramite il return infine restituiamo il codice html corretto per stampare l’immagine.
Registriamo quindi lo shortcode ed il gioco è fatto:
add_shortcode('picture', 'random_picture');Laddove inserissimo nei nostri post [picture] senza attributi, verrà restituita un’immagine con i valori di default.
Articolo ispirato e liberamente tradotto da: WordPress ShortCodes: Creation, Parameters and Benefits
