Gli shortcode di WordPress: come inserire elementi dinamici al vostro progetto
La redazione di IONOS
WordPress si annovera tra i CMS più utilizzati al mondo grazie ai suoi innumerevoli plug-in che gli hanno fatto conquistare un’ampia varietà di funzioni, con cui si possono realizzare diversi progetti web. Ma WordPress è rimasto fedele negli anni alla sua idea iniziale di essere un sistema utilizzabile per blogger e redattori che non hanno conoscenze tecniche di HTML e CSS, risultando così una soluzione facile e veloce, per riuscire a diffondere i contenuti nel World Wide Web. Chi quindi vuole osare e intraprendere i primi passi come autore web, potrà fare affidamento e partire da solide basi, utilizzando WordPress. Inoltre gli sviluppatori di WordPress hanno introdotto nel 2008 una nuova feature, gli shortcode, con cui si possono aggiungere facilmente ai propri contenuti redazionali elementi dinamici.
Che cosa sono gli shortcode?
Gli shortcode, che sono stati aggiunti a WordPress a partire dalla versione 2.5, sono dei comandi brevi, che possono essere inseriti all’interno dei testi e sono collegati ad un codice PHP. Tale codice è integrato nel file functions.php o in un file .php separato a cui si fa riferimento nel file functions.php. Se le pagine vengono aperte con uno shortcode, WordPress è responsabile per l’esecuzione e l’interpretazione del rispettivo script. Il visitatore cerca così, al posto del codice, il contenuto generato tramite la funzione PHP. Uno shortcode ricopre quindi la funzione di segnaposto, ad esempio per gli elementi semplici, come una parte di un testo, o anche per diversi tipi di contenuti dinamici, come finestre pop-up o una galleria di immagini.
L’implementazione di uno shortcode su WordPress non presenta grosse difficoltà, perché basta inserirlo direttamente nell’editor al punto giusto dell’articolo. Questi codici vengono posti tra parantesi quadre [], per far sì che WordPress li riconosca come tali. Così uno shortcode ha ad esempio la forma [post-recenti]. Collegata con la giusta funzione PHP, con questo codice devono essere indicati alla posizione scelta gli articoli pubblicati recentemente. Inoltre si possono specificare gli shortcode con altri parametri aggiuntivi. Per limitare l’indicazione degli articoli pubblicati recentemente a cinque, è ad esempio possibile ampliare il codice citato sopra nel modo seguente: [post-recenti post=“5”].
Perché gli shortcode di WordPress sono così utili
Gli shortcode di WordPress sono così pratici, in particolare per due aspetti: da una parte permettono agli utenti che non possiedono conoscenze di JavaScript o CSS di inserire elementi dinamici nel loro progetto web, conferendogli così più dinamicità, e dall’altra contribuiscono a far risparmiare tempo. Non è necessario che conosciate il linguaggio elementare di scripting PHP per gli shortcode, perché diversi comandi brevi dei corrispettivi script sono già disponibili di default su WordPress e sono anche elencati in modo chiaro sul sito ufficiale.
Inoltre trovate su questa pagina istruzioni su come attivare e utilizzare lo shortcode desiderato. Se ciò non bastasse, molti utenti WordPress mettono a disposizione gratuitamente i propri shortcode sviluppati per WordPress su diverse piattaforme come SNIPPLR o WPdevSnippets. Alcuni shortcode sono disponibili grazie a plug-in e template, perciò dovete programmare in maniera autonoma solo se volete cambiare uno script già esistente o ne volete creare uno nuovo.
Come già accennato prima, il secondo più grande vantaggio degli shortcode è il considerevole risparmio di tempo: se ad esempio utilizzate sempre un certo passaggio del testo, un logo o un altro elemento nei vostri articoli, inserendo uno shortcode già programmato sprecherete meno tempo. Se volete cambiare questo elemento a posteriori, non siete neanche costretti a farlo in modo separato per ogni articolo: basterà semplicemente adattare il codice PHP e le modifiche verranno apportate per tutte le pagine del vostro progetto WordPress che contengono il comando.
Come creare shortcode su WordPress
È già chiaro che il fulcro di uno shortcode è lo script PHP, che viene eseguito non appena WordPress si imbatte su uno di questi elementi predefiniti. Tuttavia, in questa sede eviteremo di addentrarci nella programmazione di uno script simile perché si finirebbe per scrivere un corso base di programmazione PHP. Nei paragrafi successivi imparerete, invece, come integrare e disattivare gli shortcode su WordPress per poter utilizzare il vostro progetto. Inserite il rispettivo codice PHP nel file functions.php, contenuto nella directory del tema utilizzato, o in un file PHP separato, che integrate opportunamente nel codice. Per essere sicuri che gli shortcode non spariscano con il prossimo update del tema, dovete creare un tema Child. Nelle istruzioni sul forum di WordPress è indicato come riuscire in questo compito.
Impostare una funzione di callback
La funzione PHP che viene eseguita non appena WordPress rileva uno shortcode, è la funzione di callback, in italiano: funzione di richiamo. Viene passata come parametro di un’altra funzione e richiamata in particolari condizioni con parametri definiti. La seguente funzione di esempio ricerca nel database e genera per lo shortcode [post-recenti] un link all’ultimo post pubblicato:
function post_recenti_function() {
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
endwhile;
endif;
wp_reset_query();
return $return_string;
}Il testo che deve sostituire lo shortcode, si trova nella variabile $return_string (in PHP tutte le variabili sono contrassegnate con $). La funzione PHP (post_recenti_function) risponde a questa variabile con l’istruzione return. Se, invece, utilizzate erroneamente il comando echo, l’elemento implementato tramite shortcode finisce improvvisamente prima del contenuto vero e proprio.
Rilevare gli shortcode su WordPress
È indispensabile far capire a WordPress che la funzione creata corrisponde ad uno shortcode, che deve essere eseguito automaticamente, se la pagina richiamata presenta il comando [post-recenti]. Per fare ciò, dovete ampliare il vostro file PHP con il seguente codice:
add_shortcode('post-recenti', 'post_recenti_function');Così avete definito da una parte il nome dello shortcode [post-recenti], che utilizzate dopo anche nell’editor, e dall’altra la funzione da applicare, cioè post_recenti_function(). Per evitare che sorgano conflitti tra i diversi shortcode di WordPress, è importante che scegliate un nome univoco che compaia una sola volta.
Definire con i parametri gli shortcode per una maggiore funzionalità
Per conferire una flessibilità aggiuntiva al vostro shortcode di WordPress, avete la possibilità di aggiungere parametri opzionali. Nell’esempio utilizzato finora si presenta la possibilità di segnalare nello shortcode esattamente quanti post debbano essere mostrati. A questo scopo avete bisogno di altre due funzioni: la funzione shortcode_atts(), che combina l’attributo shortcode generato dagli utenti con attributi nativi e inserisce automaticamente i valori standard necessari, e la funzione PHP extract() per importare gli attributi degli shortcode. Nel caso in cui il campo dell’argomento rimanga vuoto, inserite anche il valore standard 1 ('posts' => 1):
function post_recenti_function($atts){
extract(shortcode_atts(array(
'posts' => 1,
), $atts));
$return_string = '<ul>';
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .='<li><ahref="'.get_permalink().'">'.get_the_title().'</a></li>';
endwhile;
endif;
$return_string .= '</ul>';
wp_reset_query();
return $return_string;
}Se ora specificate lo shortcode nel testo, per esempio in questo modo [post-recenti post="5"], non compare solo l’ultimo articolo pubblicato, ma una lista dei cinque più recenti.
Utilizzare contenuti precisi come parametri degli shortcode
Potete modificare ancora l’esempio presentato e aggiungere un elemento preciso del contenuto come paragrafo. Nel nostro esempio il parametro del content deve definire il titolo di un <h3>. Così ampliate lo script di callback con la variabile $content e inserite prima dell’elenco <ul> il titolo HTML <h3>:
function post_recenti_function($atts, $content = null) {
extract(shortcode_atts(array(
'posts' => 1,
), $atts));
$return_string = '<h3>'.$content.'</h3>';
$return_string .= '<ul>';
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
endwhile;
endif;
$return_string .= '</ul>';
wp_reset_query();
return $return_string;
}In modo analogo come con un tag HTML, incorniciate ora il titolo desiderato nel vostro testo con uno shortcode di apertura e uno di chiusura:
[post-recenti ="5"]Titolo dell’elenco degli articoli più recenti[/post-recenti]Utilizzare uno shortcode di WordPress in un widget
Finora si è trattato solo di come poter fare ad inserire gli shortcode nell’editor di WordPress, ma spesso ci sono situazioni in cui risulta interessante inserirli in un widget, come una sidebar (barra laterale). WordPress non riconosce però di default gli shortcode presenti in questa posizione, ma basterà una piccola riga di codice aggiuntiva nel file PHP per riuscire a risolvere velocemente questa circostanza:
add_filter('widget_text', 'do_shortcode');Con questo codice segnalate a WordPress che deve verificare la presenza di shortcode anche negli elementi testuali dei widget.
Disattivare gli shortcode non più necessari
Se un preciso shortcode non vi serve più, avete due possibilità per disattivarlo: la soluzione ottimale sarebbe quella di eliminare la funzione di callback dal file PHP e tutte le voci del codice dai vostri articoli. Se invece rimuovete solo la funzione di callback, WordPress non riconoscerebbe lo shortcode come tale e lo farebbe visualizzare come testo in chiaro nel bel mezzo dell’articolo. Visto che questo metodo comporta spesso un grande impegno, se uno shortcode viene utilizzato spesso, si può ricorrere per casi di questo tipo ad una seconda possibilità: al posto di eliminare il codice e la funzione PHP, si amplia la funzione di callback tramite un’istruzione return e in questo modo viene quasi bloccata:
add_shortcode('post-recenti', '__return_false');Shortcode pratici per il vostro blog
Dopo che avete avuto un piccolo accenno sulla struttura degli shortcode e sapete come fare in modo che vengano rilevati e integrati su WordPress, passiamo agli esempi seguenti, dove facciamo luce sulle molteplici possibilità offerte da questa tecnica.
Inserire il pulsante per i link
Per aggiungere un pulsante per i link al vostro progetto con una scritta personalizzata, basta uno shortcode con la seguente funzione di callback:
function link_button_function( $atts, $content = null ) {
return '<button type="button">'.do_shortcode($content).'</button>';
}
add_shortcode('link-button', 'link_button_function');Ora inserite la scritta desiderata del pulsante semplicemente tra lo shortcode di apertura e quello di chiusura:
[link-button]Cliccate qui![/link-button]Mostrare il menu di WordPress
Con il seguente codice potete farvi mostrare il menu scelto del vostro progetto di WordPress in un testo:
function menu_function($atts, $content = null) {
extract(
shortcode_atts(
array( 'name' => null, ),
$atts
)
);
return wp_nav_menu(
array(
'menu' => $name,
'echo' => false
)
);
}
add_shortcode('menu', 'menu_function');Se volete utilizzare questo shortcode, inserite semplicemente come parametro il nome del menu corrispondente, come nell’esempio:
[menu name="Menu principale"]Integrare Google Maps
Con la tecnica dello shortcode si possono integrare nel vostro progetto anche le mappe di Google Maps in modo facile e veloce, senza che dobbiate adattare il codice sorgente. Il codice appropriato per il vostro file PHP sarà il seguente:
function googlemap_function($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));
return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&key=“LA_VOSTRA_CHIAVE_API"></iframe>';
}
add_shortcode("googlemap", "googlemap_function");Questo classico shortcode è collegato ai tre parametri principali, ovvero all’altezza (height), alla lunghezza (width) e alla fonte di Google Maps (src). Perciò il codice dovrebbe apparire nel vostro editor così:
[googlemap width="640" height="480" src= https://www.google.com/maps/place/Brandenburger+Tor/@52.5158015,13.3776636,233m?hl=it]I plug-in per inserire gli shortcode di WordPress: la via più facile
Per tutti quelli che non vogliono né creare un proprio shortcode, né implementare manualmente modelli già pronti nel file functions.php e nel corrispettivo file PHP, c’è ancora un’altra possibilità per attivare i comandi utili per il proprio progetto web: sul sito ufficiale di WordPress trovate un’ampia scelta di plug-in che aggiungono alla vostra installazione di WordPress sia shortcode singoli che altri diversi. Così potete, ad esempio, con l’estensione Last Updated Shortcode ricorrere allo shortcode omonimo [lastupdated], che indica quando un articolo o una pagina sono stati aggiornati l’ultima volta. Con più di 50 shortcode e un proprio editor CSS risulta più completo il plug-in Shortcodes Ultimate. Con questo ampliate WordPress ad esempio con i comandi per le tab, i pulsanti, i box o gli slider. Se utilizzate plug-in per gli shortcode, dovreste sempre tenere presente questo: le estensioni richiedono delle precise risorse e rallentano il vostro progetto web nel caso di un utilizzo eccessivo. Inoltre la maggior parte delle volte non sapete se un plug-in è stato sviluppato ulteriormente, quindi se viene aggiornato regolarmente o se presenta delle falle di sicurezza. Infine bisogna anche ricordare che non solo ci sono plug-in che implementano gli shortcode, ma anche alcuni che vi aiutano a generare delle proprie funzioni di callback e a gestire i vostri shortcode. Per questo motivo risultano particolarmente adatte le seguenti tre estensioni di WordPress:
- Shortcoder: in un editor visuale generate il vostro shortcode e lo inserite in modo facile negli snippet HTML e JavaScript.
- Shortcodes in Use: con questo strumento per amministratori ricevete una panoramica su quali articoli e su quali pagine state utilizzando gli shortcode e da dove provengono i rispettivi codici (plug-in standard o personalizzati).
- Shortcode Reference: tramite l’installazione di questi plug-in ricevete durante la creazione dei contenuti una panoramica dettagliata sugli shortcode disponibili per la vostra installazione WordPress.
