Chiunque abbia avuto a che fare con un sito web WordPress, prima o poi si sarà imbattuto nel termine shortcode.
Gli shortcode sono comodi, funzionali e ci permettono di ampliare notevolmente le funzionalità delle pagine WordPress; ma è possibile crearne di personalizzati? Assolutamente si!
Vediamo dunque insieme come creare shortcode in WordPress.
Cos’è uno shortcode in WordPress?
Prima di vedere come creare shortcode in WordPress, analizziamo cosa si intende con il termine shortcode.
Prendendo spunto dalla documentazione ufficiale di WordPress, uno shortcode è una scorciatoia che permette di aggiungere rapidamente una funzionalità articolata che normalmente richiederebbe numerose linee di codice, all’interno di una pagina o di un articolo.
Gli shortcode sono rappresentati da piccole e determinate stringhe di testo racchiuse all’interno di parentesi quadre e vengono inseriti all’interno delle pagine tramite un apposito widget.
Ad esempio, utilizzando il page builder Elementor, è possibile trascinare nella pagina il widget dedicato e scrivere al suo interno la sintassi specifica dello shortcode che si intende richiamare:
In questo esempio, lo shortcode "caption" serve a renderizzare una didascalia al di sotto di un tag HTML "img"
Esempio shortcode "caption"
[caption align="aligncenter" width="500"]
<img src="https://effedev.it/wp-content/uploads/2024/03/logo-top-icon-1.png" alt="Logo EFFEDeveloper" />
Questa è una caption per dimostrare l'utilizzo degli shortcode in WordPress
[/caption]
Gli shortcode predefiniti di WordPress
WordPress, ad oggi con la versione 6.5.4, offre nativamente il supporto ai seguenti shortcode:
| Tag Shortcode | Ambito |
|---|---|
|
Consente di incorporare in una pagina WordPress, un player per riprodurre una traccia audio |
|
|
Consente di aggiungere una didascalia al di sotto di un tag HTML. Solitamente usato insieme ai tag <img> e <video> |
|
|
Consente di incorporare in una pagina WordPress, delle risorse esterne come ad esempio un video di YouTube |
|
|
Permette l'aggiunta di una o più gallerie di immagini all'interno di un post |
|
|
Permette l'aggiunta della funzionalità riguardante una playlist di tracce audio o video |
|
|
Consente di incorporare un player per riprodurre un file video all'interno di una pagina WordPress |
Oltre a quelli già presenti nativamente in WordPress, è possibile utilizzarne di nuovi installando ulteriori plugin direttamente dallo store di WordPress oppure è possibile crearne di personalizzati, aggiungendo del codice PHP custom nei file del tema che si sta attualmente usando nel sito.
Vediamo dunque come aggiungere alcuni shortcode personalizzati al nostro portale WordPress.
Come creare shortcode in WordPress: In pratica
Prima di iniziare a modificare il codice del tema per aggiungere lo shortcode personalizzato, ti consiglio caldamente di effettuare un backup del tuo sito: in questo modo se qualcosa dovesse andare storto potrai facilmente tornare indietro ad una situazione stabile.
Terminato il backup, devi localizzare il file “functions.php” del tuo tema Child attivo e per farlo potrai usare un FTP File Manager come “FileZilla” per collegarti al server che ospita il tuo sito, oppure potrai sfruttare direttamente l’interfaccia web di amministrazione di WordPress.
Se il tuo sito non sta utilizzando un tema Child, ti consiglio di attivarne uno poiché le personalizzazioni fatte direttamente sui file del tema principale possono essere sovrascritte in seguito agli aggiornamenti del tema.
Dai un’occhiata a questa guida per farti un’idea su come creare un tema Child ed evitare di perdere le tue customizzazioni.
In questo esempio utilizzerò l’interfaccia web di amministrazione di WordPress per raggiungere il file “functions.php“:
Nell'editor di testo potremo poi aggiungere il codice PHP per creare gli shortcode personalizzati
L’aggiunta di uno shortcode avviene mediante l’utilizzo della funzione PHP add_shortcode la quale accetta come parametri, il nome con il quale vogliamo richiamare lo shortcode e poi la funzione che contiene la sua logica.
Assicurati di dare un nome univoco al tuo shortcode personalizzato per evitare conflitti e collisioni con altri codici già presenti.
Vediamo un semplice esempio per renderizzare una stringa che invita gli utenti a navigare sul mio sito:
functions.php
...
add_shortcode('effedev_visit_my_website', function () {
return "<p style='text-align:center; border: 2px solid black; border-radius: 8px; padding: 5px;'>Ciao! Visita il mio <a href='https://effedev.it'>sito web</a></p>";
});
...
Come è facile intuire, la stringa “effedev_visit_my_website” rappresenta il nome univoco del tag shortcode che deve essere inserito all’interno delle parentesi quadre per essere così renderizzato come puoi vedere nell’esempio qua sotto.
Invece il secondo parametro rappresenta una funzione anonima PHP che contiene la logica associata a questo shortcode.
Ciao! Visita il mio sito web
Qualche esempio di shortcode personalizzato
Qua di seguito trovi alcuni esempi di shortcode che ho preparato e che recuperano informazioni utili dei post, come l’autore, il titolo e la data di pubblicazione di una pagina WordPress.
Shortcode per visualizzare l’autore di un post
functions.php
...
add_shortcode('effedev_get_page_author', function () {
return get_the_author();
});
...
Shortcode per visualizzare il titolo di un post
functions.php
...
add_shortcode('effedev_get_page_title', function () {
return get_the_title();
});
...
Shortcode per visualizzare la data di pubblicazione di un post
functions.php
...
add_shortcode('effedev_get_page_publish_date', function () {
$articleId = get_the_ID();
$txtDate = get_post_field('post_date', $articleId);
$rawDate = date_create($txtDate);
return date_format($rawDate, "d/m/Y");
});
...
Conclusioni
Abbiamo dunque visto insieme come creare shortcode in WordPress e abbiamo constatato come questi rappresentino senza dubbio una funzionalità interessante e flessibile.
Questo perché ci permettono di estendere facilmente le potenzialità del nostro portale WordPress mantenendo al tempo stesso una semplice e ordinata costruzione delle pagine.
Se hai trovato questo articolo utile e interessante, ti invito a condividerlo e ad entrare in contatto con me tramite i miei recapiti e tramite LinkedIn.
Ti invito inoltre a dare un’occhiata ai miei servizi e in particolare a quello di realizzazione siti web.
Un caloroso saluto da Lorenzo Fadda – EFFEDeveloper 👋
